--- 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: 16px;
+  padding: 2px;
+}
+
 /* 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,36 @@ RulersHighlighter.prototype = {
         hidden: "true"
       },
       prefix
     });
 
     createRuler("x", RULERS_MAX_X_AXIS);
     createRuler("y", RULERS_MAX_Y_AXIS);
 
+    let viewportInfobarContainer = createNode(window, {
+      parent: container,
+      attributes: {
+        "class": "viewport-infobar-container",
+        "id": "viewport-infobar-container",
+        "position": "top"
+      },
+      prefix
+    });
+
+    createNode(window, {
+      nodeType: "span",
+      parent: viewportInfobarContainer,
+      attributes: {
+        "class": "viewport-dimensions",
+        "id": "viewport-dimensions"
+      },
+      prefix
+    });
+
     return container;
   },
 
   handleEvent: function (event) {
     switch (event.type) {
       case "scroll":
         this._onScroll(event);
         break;
@@ -232,16 +252,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 +282,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);