--- a/devtools/client/inspector/test/browser.ini
+++ b/devtools/client/inspector/test/browser.ini
@@ -113,16 +113,17 @@ skip-if = (os == 'linux' && bits == 32 &
 [browser_inspector_highlighter-keybinding_03.js]
 [browser_inspector_highlighter-keybinding_04.js]
 [browser_inspector_highlighter-measure_01.js]
 [browser_inspector_highlighter-measure_02.js]
 [browser_inspector_highlighter-options.js]
 [browser_inspector_highlighter-preview.js]
 [browser_inspector_highlighter-rulers_01.js]
 [browser_inspector_highlighter-rulers_02.js]
+[browser_inspector_highlighter-rulers_03.js]
 [browser_inspector_highlighter-selector_01.js]
 [browser_inspector_highlighter-selector_02.js]
 [browser_inspector_highlighter-xbl.js]
 [browser_inspector_highlighter-zoom.js]
 [browser_inspector_iframe-navigation.js]
 [browser_inspector_infobar_01.js]
 [browser_inspector_infobar_02.js]
 [browser_inspector_infobar_03.js]

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-rulers_03.js
@@ -0,0 +1,62 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test the creation of the viewport infobar and makes sure if resizes correctly
+
+const TEST_URL = "data:text/html;charset=utf-8," +
+                 "<div style='position:absolute;left: 0; top: 0; " +
+                 "width: 20px; height: 50px'></div>";
+
+const ID = "rulers-highlighter-";
+
+var {Toolbox} = require("devtools/client/framework/toolbox");
+
+add_task(function* () {
+  let { inspector, testActor } = yield openInspectorForURL(TEST_URL);
+  let front = inspector.inspector;
+
+  let highlighter = yield front.getHighlighterByType("RulersHighlighter");
+
+  yield isShown(highlighter, inspector, testActor);
+  yield hasRightLabelsContent(highlighter, inspector, testActor);
+  yield resizeInspector(highlighter, inspector, testActor);
+  yield hasRightLabelsContent(highlighter, inspector, testActor);
+
+  yield highlighter.finalize();
+});
+
+function* isShown(highlighterFront, inspector, testActor) {
+  info("Checking that the viewport infobar is displayed");
+  // the rulers doesn't need any node, but as highligher it seems mandatory
+  // ones, so the body is given
+  let body = yield getNodeFront("body", inspector);
+  yield highlighterFront.show(body);
+
+  let hidden = yield testActor.getHighlighterNodeAttribute(
+    `${ID}viewport-infobar-container`, "hidden", highlighterFront);
+
+  isnot(hidden, "true", "viewport infobar is visible after show");
+}
+
+function* hasRightLabelsContent(highlighterFront, inspector, testActor) {
+  info("Checking the rulers dimension tooltip have the proper text");
+
+  let dimensionText = yield testActor.getHighlighterNodeTextContent(
+    `${ID}viewport-infobar-container`, highlighterFront);
+
+  let windowDimensions = yield testActor.getWindowDimensions();
+  let windowHeight = Math.round(windowDimensions.height);
+  let windowWidth = Math.round(windowDimensions.width);
+  let windowText = windowHeight + "px \u00D7 " + windowWidth + "px";
+
+  is(dimensionText, windowText, "Dimension text was created successfully");
+}
+
+function* resizeInspector(highlighterFront, inspector, testActor) {
+  info("Docking the toolbox to the side of the browser to change the window size");
+  let toolbox = inspector.toolbox;
+  yield toolbox.switchHost(Toolbox.HostType.SIDE);
+}

--- a/devtools/server/actors/highlighters.css
+++ b/devtools/server/actors/highlighters.css
@@ -381,16 +381,27 @@
   text-anchor: start;
 }
 
 :-moz-native-anonymous .rulers-highlighter-vertical-labels > text {
   transform: rotate(-90deg);
   text-anchor: end;
 }
 
+:-moz-native-anonymous .rulers-highlighter-viewport-infobar-container {
+  shape-rendering: crispEdges;
+  background-color: rgba(255, 255, 255, 0.7);
+  font: var(--highlighter-font-family);
+  position: fixed;
+  top: 30px;
+  right: 0px;
+  font-size: 12px;
+  padding: 4px;
+}
+
 /* Measuring Tool Highlighter */
 
 :-moz-native-anonymous .measuring-tool-highlighter-root {
   position: absolute;
   top: 0;
   left: 0;
   pointer-events: auto;
   cursor: crosshair;

--- a/devtools/server/actors/highlighters/rulers.js
+++ b/devtools/server/actors/highlighters/rulers.js
@@ -187,16 +187,26 @@ RulersHighlighter.prototype = {
         hidden: "true"
       },
       prefix
     });
 
     createRuler("x", RULERS_MAX_X_AXIS);
     createRuler("y", RULERS_MAX_Y_AXIS);
 
+    createNode(window, {
+      parent: container,
+      attributes: {
+        "class": "viewport-infobar-container",
+        "id": "viewport-infobar-container",
+        "position": "top"
+      },
+      prefix
+    });
+
     return container;
   },
 
   handleEvent: function (event) {
     switch (event.type) {
       case "scroll":
         this._onScroll(event);
         break;
@@ -232,16 +242,18 @@ RulersHighlighter.prototype = {
     let zoom = getCurrentZoom(window);
     let isZoomChanged = zoom !== this._zoom;
 
     if (isZoomChanged) {
       this._zoom = zoom;
       this.updateViewport();
     }
 
+    this.updateViewportInfobar();
+
     setIgnoreLayoutChanges(false, window.document.documentElement);
 
     this._rafID = window.requestAnimationFrame(() => this._update());
   },
 
   _cancelUpdate: function () {
     if (this._rafID) {
       this.env.window.cancelAnimationFrame(this._rafID);
@@ -260,16 +272,24 @@ RulersHighlighter.prototype = {
     // where on non high dpi monitor would be 1.
     let minWidth = 1 / pixelRatio;
     let strokeWidth = Math.min(minWidth, minWidth / this._zoom);
 
     this.markup.getElement(this.ID_CLASS_PREFIX + "root").setAttribute("style",
       `stroke-width:${strokeWidth};`);
   },
 
+  updateViewportInfobar: function () {
+    let { window } = this.env;
+    let { innerHeight, innerWidth } = window;
+    let infobarId = this.ID_CLASS_PREFIX + "viewport-infobar-container";
+    let textContent = innerHeight + "px \u00D7 " + innerWidth + "px";
+    this.markup.getElement(infobarId).setTextContent(textContent);
+  },
+
   destroy: function () {
     this.hide();
 
     let { pageListenerTarget } = this.env;
 
     if (pageListenerTarget) {
       pageListenerTarget.removeEventListener("scroll", this);
       pageListenerTarget.removeEventListener("pagehide", this);