Fix #1848, add pixel dimensions when starting and dragging the select…

…ion.

addon/data/selector-ui.js

@@ -413,6 +413,30 @@ const ui = (function () { // eslint-disable-line no-unused-vars
     }
   };
 
+  exports.PixelDimensions = {
+    el: null,
+    xEl: null,
+    yEl: null,
+    display: function (xPos, yPos, x, y) {
+      if (! this.el) {
+        this.el = makeEl("div", "pageshot-pixel-dimensions");
+        this.xEl = makeEl("div");
+        this.el.appendChild(this.xEl);
+        this.yEl = makeEl("div");
+        this.el.appendChild(this.yEl);
+        iframe.document.body.appendChild(this.el);
+      }
+      this.xEl.textContent = x;
+      this.yEl.textContent = y;
+      this.el.style.top = (yPos + 12) + "px";
+      this.el.style.left = (xPos + 12) + "px";
+    },
+    remove: function () {
+      util.removeNode(this.el);
+      this.el = this.xEl = this.yEl = null;
+    }
+  };
+
   /** Removes every UI this module creates */
   exports.remove = function () {
     for (let name in exports) {

addon/data/shooter-interactive-worker.js

@@ -359,6 +359,7 @@ stateHandlers.crosshairs = {
   },
 
   mousemove: function (event) {
+    ui.PixelDimensions.display(event.pageX, event.pageY, event.pageX, event.pageY);
     if (event.target.className &&
         event.target.className !== "pageshot-preview-overlay" &&
         event.target.className.startsWith("pageshot-")) {
@@ -495,6 +496,7 @@ stateHandlers.crosshairs = {
 
   end: function () {
     ui.HoverBox.remove();
+    ui.PixelDimensions.remove();
   }
 };
 
@@ -599,6 +601,7 @@ stateHandlers.dragging = {
     selectedPos.y2 = util.truncateY(event.pageY);
     scrollIfByEdge(event.pageX, event.pageY);
     ui.Box.display(selectedPos);
+    ui.PixelDimensions.display(event.pageX, event.pageY, selectedPos.width, selectedPos.height);
   },
 
   mouseup: function (event) {
@@ -615,6 +618,10 @@ stateHandlers.dragging = {
         right: selectedPos.x2
       }));
     setState("selected");
+  },
+
+  end: function () {
+    ui.PixelDimensions.remove();
   }
 };
 
@@ -842,8 +849,8 @@ function activate() {
 }
 
 function deactivate() {
-  ui.Box.remove();
   try {
+    ui.Box.remove();
     ui.remove();
     removeHandlers();
     setState("cancel");

static/css/inline-selection.scss

@@ -280,6 +280,15 @@ $overlay-z-index: 9999999999;
   z-index: $overlay-z-index;
 }
 
+.pageshot-pixel-dimensions {
+  position: absolute;
+  pointer-events: none;
+  font-family: sans-serif;
+  font-size: 70%;
+  color: #000;
+  text-shadow: 1px 1px 0px #fff;
+}
+
 // FIXME: some of the styles in .pageshot-moving-element were copied from
 // .pageshot-preview-overlay and are probably unnecessary
 .pageshot-moving-element {