summaryrefslogtreecommitdiffstats
path: root/devtools/server/actors/highlighters/measuring-tool.js
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /devtools/server/actors/highlighters/measuring-tool.js
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'devtools/server/actors/highlighters/measuring-tool.js')
-rw-r--r--devtools/server/actors/highlighters/measuring-tool.js563
1 files changed, 563 insertions, 0 deletions
diff --git a/devtools/server/actors/highlighters/measuring-tool.js b/devtools/server/actors/highlighters/measuring-tool.js
new file mode 100644
index 000000000..e1e1de94f
--- /dev/null
+++ b/devtools/server/actors/highlighters/measuring-tool.js
@@ -0,0 +1,563 @@
+/* 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";
+
+const events = require("sdk/event/core");
+const { getCurrentZoom,
+ setIgnoreLayoutChanges } = require("devtools/shared/layout/utils");
+const {
+ CanvasFrameAnonymousContentHelper,
+ createSVGNode, createNode } = require("./utils/markup");
+
+// Hard coded value about the size of measuring tool label, in order to
+// position and flip it when is needed.
+const LABEL_SIZE_MARGIN = 8;
+const LABEL_SIZE_WIDTH = 80;
+const LABEL_SIZE_HEIGHT = 52;
+const LABEL_POS_MARGIN = 4;
+const LABEL_POS_WIDTH = 40;
+const LABEL_POS_HEIGHT = 34;
+
+const SIDES = ["top", "right", "bottom", "left"];
+
+/**
+ * The MeasuringToolHighlighter is used to measure distances in a content page.
+ * It allows users to click and drag with their mouse to draw an area whose
+ * dimensions will be displayed in a tooltip next to it.
+ * This allows users to measure distances between elements on a page.
+ */
+function MeasuringToolHighlighter(highlighterEnv) {
+ this.env = highlighterEnv;
+ this.markup = new CanvasFrameAnonymousContentHelper(highlighterEnv,
+ this._buildMarkup.bind(this));
+
+ this.coords = {
+ x: 0,
+ y: 0
+ };
+
+ let { pageListenerTarget } = highlighterEnv;
+
+ pageListenerTarget.addEventListener("mousedown", this);
+ pageListenerTarget.addEventListener("mousemove", this);
+ pageListenerTarget.addEventListener("mouseleave", this);
+ pageListenerTarget.addEventListener("scroll", this);
+ pageListenerTarget.addEventListener("pagehide", this);
+}
+
+MeasuringToolHighlighter.prototype = {
+ typeName: "MeasuringToolHighlighter",
+
+ ID_CLASS_PREFIX: "measuring-tool-highlighter-",
+
+ _buildMarkup() {
+ let prefix = this.ID_CLASS_PREFIX;
+ let { window } = this.env;
+
+ let container = createNode(window, {
+ attributes: {"class": "highlighter-container"}
+ });
+
+ let root = createNode(window, {
+ parent: container,
+ attributes: {
+ "id": "root",
+ "class": "root",
+ },
+ prefix
+ });
+
+ let svg = createSVGNode(window, {
+ nodeType: "svg",
+ parent: root,
+ attributes: {
+ id: "elements",
+ "class": "elements",
+ width: "100%",
+ height: "100%",
+ hidden: "true"
+ },
+ prefix
+ });
+
+ createNode(window, {
+ nodeType: "label",
+ attributes: {
+ id: "label-size",
+ "class": "label-size",
+ "hidden": "true"
+ },
+ parent: root,
+ prefix
+ });
+
+ createNode(window, {
+ nodeType: "label",
+ attributes: {
+ id: "label-position",
+ "class": "label-position",
+ "hidden": "true"
+ },
+ parent: root,
+ prefix
+ });
+
+ // Creating a <g> element in order to group all the paths below, that
+ // together represent the measuring tool; so that would be easier move them
+ // around
+ let g = createSVGNode(window, {
+ nodeType: "g",
+ attributes: {
+ id: "tool",
+ },
+ parent: svg,
+ prefix
+ });
+
+ createSVGNode(window, {
+ nodeType: "path",
+ attributes: {
+ id: "box-path"
+ },
+ parent: g,
+ prefix
+ });
+
+ createSVGNode(window, {
+ nodeType: "path",
+ attributes: {
+ id: "diagonal-path"
+ },
+ parent: g,
+ prefix
+ });
+
+ for (let side of SIDES) {
+ createSVGNode(window, {
+ nodeType: "line",
+ parent: svg,
+ attributes: {
+ "class": `guide-${side}`,
+ id: `guide-${side}`,
+ hidden: "true"
+ },
+ prefix
+ });
+ }
+
+ return container;
+ },
+
+ _update() {
+ let { window } = this.env;
+
+ setIgnoreLayoutChanges(true);
+
+ let zoom = getCurrentZoom(window);
+
+ let { documentElement } = window.document;
+
+ let width = Math.max(documentElement.clientWidth,
+ documentElement.scrollWidth,
+ documentElement.offsetWidth);
+
+ let height = Math.max(documentElement.clientHeight,
+ documentElement.scrollHeight,
+ documentElement.offsetHeight);
+
+ let { body } = window.document;
+
+ // get the size of the content document despite the compatMode
+ if (body) {
+ width = Math.max(width, body.scrollWidth, body.offsetWidth);
+ height = Math.max(height, body.scrollHeight, body.offsetHeight);
+ }
+
+ let { coords } = this;
+
+ let isZoomChanged = zoom !== coords.zoom;
+
+ if (isZoomChanged) {
+ coords.zoom = zoom;
+ this.updateLabel();
+ }
+
+ let isDocumentSizeChanged = width !== coords.documentWidth ||
+ height !== coords.documentHeight;
+
+ if (isDocumentSizeChanged) {
+ coords.documentWidth = width;
+ coords.documentHeight = height;
+ }
+
+ // If either the document's size or the zoom is changed since the last
+ // repaint, we update the tool's size as well.
+ if (isZoomChanged || isDocumentSizeChanged) {
+ this.updateViewport();
+ }
+
+ setIgnoreLayoutChanges(false, documentElement);
+
+ this._rafID = window.requestAnimationFrame(() => this._update());
+ },
+
+ _cancelUpdate() {
+ if (this._rafID) {
+ this.env.window.cancelAnimationFrame(this._rafID);
+ this._rafID = 0;
+ }
+ },
+
+ destroy() {
+ this.hide();
+
+ this._cancelUpdate();
+
+ let { pageListenerTarget } = this.env;
+
+ pageListenerTarget.removeEventListener("mousedown", this);
+ pageListenerTarget.removeEventListener("mousemove", this);
+ pageListenerTarget.removeEventListener("mouseup", this);
+ pageListenerTarget.removeEventListener("scroll", this);
+ pageListenerTarget.removeEventListener("pagehide", this);
+ pageListenerTarget.removeEventListener("mouseleave", this);
+
+ this.markup.destroy();
+
+ events.emit(this, "destroy");
+ },
+
+ show() {
+ setIgnoreLayoutChanges(true);
+
+ this.getElement("elements").removeAttribute("hidden");
+
+ this._update();
+
+ setIgnoreLayoutChanges(false, this.env.window.document.documentElement);
+ },
+
+ hide() {
+ setIgnoreLayoutChanges(true);
+
+ this.hideLabel("size");
+ this.hideLabel("position");
+
+ this.getElement("elements").setAttribute("hidden", "true");
+
+ this._cancelUpdate();
+
+ setIgnoreLayoutChanges(false, this.env.window.document.documentElement);
+ },
+
+ getElement(id) {
+ return this.markup.getElement(this.ID_CLASS_PREFIX + id);
+ },
+
+ setSize(w, h) {
+ this.setCoords(undefined, undefined, w, h);
+ },
+
+ setCoords(x, y, w, h) {
+ let { coords } = this;
+
+ if (typeof x !== "undefined") {
+ coords.x = x;
+ }
+
+ if (typeof y !== "undefined") {
+ coords.y = y;
+ }
+
+ if (typeof w !== "undefined") {
+ coords.w = w;
+ }
+
+ if (typeof h !== "undefined") {
+ coords.h = h;
+ }
+
+ setIgnoreLayoutChanges(true);
+
+ if (this._isDragging) {
+ this.updatePaths();
+ }
+
+ this.updateLabel();
+
+ setIgnoreLayoutChanges(false, this.env.window.document.documentElement);
+ },
+
+ updatePaths() {
+ let { x, y, w, h } = this.coords;
+ let dir = `M0 0 L${w} 0 L${w} ${h} L0 ${h}z`;
+
+ // Adding correction to the line path, otherwise some pixels are drawn
+ // outside the main rectangle area.
+ let x1 = w > 0 ? 0.5 : 0;
+ let y1 = w < 0 && h < 0 ? -0.5 : 0;
+ let w1 = w + (h < 0 && w < 0 ? 0.5 : 0);
+ let h1 = h + (h > 0 && w > 0 ? -0.5 : 0);
+
+ let linedir = `M${x1} ${y1} L${w1} ${h1}`;
+
+ this.getElement("box-path").setAttribute("d", dir);
+ this.getElement("diagonal-path").setAttribute("d", linedir);
+ this.getElement("tool").setAttribute("transform", `translate(${x},${y})`);
+ },
+
+ updateLabel(type) {
+ type = type || this._isDragging ? "size" : "position";
+
+ let isSizeLabel = type === "size";
+
+ let label = this.getElement(`label-${type}`);
+
+ let origin = "top left";
+
+ let { innerWidth, innerHeight, scrollX, scrollY } = this.env.window;
+ let { x, y, w, h, zoom } = this.coords;
+ let scale = 1 / zoom;
+
+ w = w || 0;
+ h = h || 0;
+ x = (x || 0) + w;
+ y = (y || 0) + h;
+
+ let labelMargin, labelHeight, labelWidth;
+
+ if (isSizeLabel) {
+ labelMargin = LABEL_SIZE_MARGIN;
+ labelWidth = LABEL_SIZE_WIDTH;
+ labelHeight = LABEL_SIZE_HEIGHT;
+
+ let d = Math.hypot(w, h).toFixed(2);
+
+ label.setTextContent(`W: ${Math.abs(w)} px
+ H: ${Math.abs(h)} px
+ ↘: ${d}px`);
+ } else {
+ labelMargin = LABEL_POS_MARGIN;
+ labelWidth = LABEL_POS_WIDTH;
+ labelHeight = LABEL_POS_HEIGHT;
+
+ label.setTextContent(`${x}
+ ${y}`);
+ }
+
+ // Size used to position properly the label
+ let labelBoxWidth = (labelWidth + labelMargin) * scale;
+ let labelBoxHeight = (labelHeight + labelMargin) * scale;
+
+ let isGoingLeft = w < scrollX;
+ let isSizeGoingLeft = isSizeLabel && isGoingLeft;
+ let isExceedingLeftMargin = x - labelBoxWidth < scrollX;
+ let isExceedingRightMargin = x + labelBoxWidth > innerWidth + scrollX;
+ let isExceedingTopMargin = y - labelBoxHeight < scrollY;
+ let isExceedingBottomMargin = y + labelBoxHeight > innerHeight + scrollY;
+
+ if ((isSizeGoingLeft && !isExceedingLeftMargin) || isExceedingRightMargin) {
+ x -= labelBoxWidth;
+ origin = "top right";
+ } else {
+ x += labelMargin * scale;
+ }
+
+ if (isSizeLabel) {
+ y += isExceedingTopMargin ? labelMargin * scale : -labelBoxHeight;
+ } else {
+ y += isExceedingBottomMargin ? -labelBoxHeight : labelMargin * scale;
+ }
+
+ label.setAttribute("style", `
+ width: ${labelWidth}px;
+ height: ${labelHeight}px;
+ transform-origin: ${origin};
+ transform: translate(${x}px,${y}px) scale(${scale})
+ `);
+
+ if (!isSizeLabel) {
+ let labelSize = this.getElement("label-size");
+ let style = labelSize.getAttribute("style");
+
+ if (style) {
+ labelSize.setAttribute("style",
+ style.replace(/scale[^)]+\)/, `scale(${scale})`));
+ }
+ }
+ },
+
+ updateViewport() {
+ let { scrollX, scrollY, devicePixelRatio } = this.env.window;
+ let { documentWidth, documentHeight, zoom } = this.coords;
+
+ // Because `devicePixelRatio` is affected by zoom (see bug 809788),
+ // in order to get the "real" device pixel ratio, we need divide by `zoom`
+ let pixelRatio = devicePixelRatio / zoom;
+
+ // The "real" device pixel ratio is used to calculate the max stroke
+ // width we can actually assign: on retina, for instance, it would be 0.5,
+ // where on non high dpi monitor would be 1.
+ let minWidth = 1 / pixelRatio;
+ let strokeWidth = Math.min(minWidth, minWidth / zoom);
+
+ this.getElement("root").setAttribute("style",
+ `stroke-width:${strokeWidth};
+ width:${documentWidth}px;
+ height:${documentHeight}px;
+ transform: translate(${-scrollX}px,${-scrollY}px)`);
+ },
+
+ updateGuides() {
+ let { x, y, w, h } = this.coords;
+
+ let guide = this.getElement("guide-top");
+
+ guide.setAttribute("x1", "0");
+ guide.setAttribute("y1", y);
+ guide.setAttribute("x2", "100%");
+ guide.setAttribute("y2", y);
+
+ guide = this.getElement("guide-right");
+
+ guide.setAttribute("x1", x + w);
+ guide.setAttribute("y1", 0);
+ guide.setAttribute("x2", x + w);
+ guide.setAttribute("y2", "100%");
+
+ guide = this.getElement("guide-bottom");
+
+ guide.setAttribute("x1", "0");
+ guide.setAttribute("y1", y + h);
+ guide.setAttribute("x2", "100%");
+ guide.setAttribute("y2", y + h);
+
+ guide = this.getElement("guide-left");
+
+ guide.setAttribute("x1", x);
+ guide.setAttribute("y1", 0);
+ guide.setAttribute("x2", x);
+ guide.setAttribute("y2", "100%");
+ },
+
+ showLabel(type) {
+ setIgnoreLayoutChanges(true);
+
+ this.getElement(`label-${type}`).removeAttribute("hidden");
+
+ setIgnoreLayoutChanges(false, this.env.window.document.documentElement);
+ },
+
+ hideLabel(type) {
+ setIgnoreLayoutChanges(true);
+
+ this.getElement(`label-${type}`).setAttribute("hidden", "true");
+
+ setIgnoreLayoutChanges(false, this.env.window.document.documentElement);
+ },
+
+ showGuides() {
+ let prefix = this.ID_CLASS_PREFIX + "guide-";
+
+ for (let side of SIDES) {
+ this.markup.removeAttributeForElement(`${prefix + side}`, "hidden");
+ }
+ },
+
+ hideGuides() {
+ let prefix = this.ID_CLASS_PREFIX + "guide-";
+
+ for (let side of SIDES) {
+ this.markup.setAttributeForElement(`${prefix + side}`, "hidden", "true");
+ }
+ },
+
+ handleEvent(event) {
+ let scrollX, scrollY, innerWidth, innerHeight;
+ let x, y;
+
+ let { pageListenerTarget } = this.env;
+
+ switch (event.type) {
+ case "mousedown":
+ if (event.button) {
+ return;
+ }
+
+ this._isDragging = true;
+
+ let { window } = this.env;
+
+ ({ scrollX, scrollY } = window);
+ x = event.clientX + scrollX;
+ y = event.clientY + scrollY;
+
+ pageListenerTarget.addEventListener("mouseup", this);
+
+ setIgnoreLayoutChanges(true);
+
+ this.getElement("tool").setAttribute("class", "dragging");
+
+ this.hideLabel("size");
+ this.hideLabel("position");
+
+ this.hideGuides();
+ this.setCoords(x, y, 0, 0);
+
+ setIgnoreLayoutChanges(false, window.document.documentElement);
+
+ break;
+ case "mouseup":
+ this._isDragging = false;
+
+ pageListenerTarget.removeEventListener("mouseup", this);
+
+ setIgnoreLayoutChanges(true);
+
+ this.getElement("tool").removeAttribute("class", "");
+
+ // Shows the guides only if an actual area is selected
+ if (this.coords.w !== 0 && this.coords.h !== 0) {
+ this.updateGuides();
+ this.showGuides();
+ }
+
+ setIgnoreLayoutChanges(false, this.env.window.document.documentElement);
+
+ break;
+ case "mousemove":
+ ({ scrollX, scrollY, innerWidth, innerHeight } = this.env.window);
+ x = event.clientX + scrollX;
+ y = event.clientY + scrollY;
+
+ let { coords } = this;
+
+ x = Math.min(innerWidth + scrollX - 1, Math.max(0 + scrollX, x));
+ y = Math.min(innerHeight + scrollY, Math.max(1 + scrollY, y));
+
+ this.setSize(x - coords.x, y - coords.y);
+
+ let type = this._isDragging ? "size" : "position";
+
+ this.showLabel(type);
+ break;
+ case "mouseleave":
+ if (!this._isDragging) {
+ this.hideLabel("position");
+ }
+ break;
+ case "scroll":
+ setIgnoreLayoutChanges(true);
+ this.updateViewport();
+ setIgnoreLayoutChanges(false, this.env.window.document.documentElement);
+
+ break;
+ case "pagehide":
+ this.destroy();
+ break;
+ }
+ }
+};
+exports.MeasuringToolHighlighter = MeasuringToolHighlighter;