1 files changed, 265 insertions, 0 deletions
diff --git a/devtools/server/actors/highlighters/css-transform.js b/devtools/server/actors/highlighters/css-transform.js
new file mode 100644
index 0000000000..c9f16b42e0
--- /dev/null
+++ b/devtools/server/actors/highlighters/css-transform.js
@@ -0,0 +1,265 @@
+/* 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 {
+  AutoRefreshHighlighter,
+} = require("resource://devtools/server/actors/highlighters/auto-refresh.js");
+const {
+  CanvasFrameAnonymousContentHelper,
+  getComputedStyle,
+} = require("resource://devtools/server/actors/highlighters/utils/markup.js");
+const {
+  setIgnoreLayoutChanges,
+  getNodeBounds,
+} = require("resource://devtools/shared/layout/utils.js");
+
+// The minimum distance a line should be before it has an arrow marker-end
+const ARROW_LINE_MIN_DISTANCE = 10;
+
+var MARKER_COUNTER = 1;
+
+/**
+ * The CssTransformHighlighter is the class that draws an outline around a
+ * transformed element and an outline around where it would be if untransformed
+ * as well as arrows connecting the 2 outlines' corners.
+ */
+class CssTransformHighlighter extends AutoRefreshHighlighter {
+  constructor(highlighterEnv) {
+    super(highlighterEnv);
+
+    this.ID_CLASS_PREFIX = "css-transform-";
+
+    this.markup = new CanvasFrameAnonymousContentHelper(
+      this.highlighterEnv,
+      this._buildMarkup.bind(this)
+    );
+    this.isReady = this.markup.initialize();
+  }
+
+  _buildMarkup() {
+    const container = this.markup.createNode({
+      attributes: {
+        class: "highlighter-container",
+      },
+    });
+
+    // The root wrapper is used to unzoom the highlighter when needed.
+    const rootWrapper = this.markup.createNode({
+      parent: container,
+      attributes: {
+        id: "root",
+        class: "root",
+      },
+      prefix: this.ID_CLASS_PREFIX,
+    });
+
+    const svg = this.markup.createSVGNode({
+      nodeType: "svg",
+      parent: rootWrapper,
+      attributes: {
+        id: "elements",
+        hidden: "true",
+        width: "100%",
+        height: "100%",
+      },
+      prefix: this.ID_CLASS_PREFIX,
+    });
+
+    // Add a marker tag to the svg root for the arrow tip
+    this.markerId = "arrow-marker-" + MARKER_COUNTER;
+    MARKER_COUNTER++;
+    const marker = this.markup.createSVGNode({
+      nodeType: "marker",
+      parent: svg,
+      attributes: {
+        id: this.markerId,
+        markerWidth: "10",
+        markerHeight: "5",
+        orient: "auto",
+        markerUnits: "strokeWidth",
+        refX: "10",
+        refY: "5",
+        viewBox: "0 0 10 10",
+      },
+      prefix: this.ID_CLASS_PREFIX,
+    });
+    this.markup.createSVGNode({
+      nodeType: "path",
+      parent: marker,
+      attributes: {
+        d: "M 0 0 L 10 5 L 0 10 z",
+        fill: "#08C",
+      },
+    });
+
+    const shapesGroup = this.markup.createSVGNode({
+      nodeType: "g",
+      parent: svg,
+    });
+
+    // Create the 2 polygons (transformed and untransformed)
+    this.markup.createSVGNode({
+      nodeType: "polygon",
+      parent: shapesGroup,
+      attributes: {
+        id: "untransformed",
+        class: "untransformed",
+      },
+      prefix: this.ID_CLASS_PREFIX,
+    });
+    this.markup.createSVGNode({
+      nodeType: "polygon",
+      parent: shapesGroup,
+      attributes: {
+        id: "transformed",
+        class: "transformed",
+      },
+      prefix: this.ID_CLASS_PREFIX,
+    });
+
+    // Create the arrows
+    for (const nb of ["1", "2", "3", "4"]) {
+      this.markup.createSVGNode({
+        nodeType: "line",
+        parent: shapesGroup,
+        attributes: {
+          id: "line" + nb,
+          class: "line",
+          "marker-end": "url(#" + this.markerId + ")",
+        },
+        prefix: this.ID_CLASS_PREFIX,
+      });
+    }
+
+    return container;
+  }
+
+  /**
+   * Destroy the nodes. Remove listeners.
+   */
+  destroy() {
+    AutoRefreshHighlighter.prototype.destroy.call(this);
+    this.markup.destroy();
+  }
+
+  getElement(id) {
+    return this.markup.getElement(this.ID_CLASS_PREFIX + id);
+  }
+
+  /**
+   * Show the highlighter on a given node
+   */
+  _show() {
+    if (!this._isTransformed(this.currentNode)) {
+      this.hide();
+      return false;
+    }
+
+    return this._update();
+  }
+
+  /**
+   * Checks if the supplied node is transformed and not inline
+   */
+  _isTransformed(node) {
+    const style = getComputedStyle(node);
+    return style && style.transform !== "none" && style.display !== "inline";
+  }
+
+  _setPolygonPoints(quad, id) {
+    const points = [];
+    for (const point of ["p1", "p2", "p3", "p4"]) {
+      points.push(quad[point].x + "," + quad[point].y);
+    }
+    this.getElement(id).setAttribute("points", points.join(" "));
+  }
+
+  _setLinePoints(p1, p2, id) {
+    const line = this.getElement(id);
+    line.setAttribute("x1", p1.x);
+    line.setAttribute("y1", p1.y);
+    line.setAttribute("x2", p2.x);
+    line.setAttribute("y2", p2.y);
+
+    const dist = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+    if (dist < ARROW_LINE_MIN_DISTANCE) {
+      line.removeAttribute("marker-end");
+    } else {
+      line.setAttribute("marker-end", "url(#" + this.markerId + ")");
+    }
+  }
+
+  /**
+   * Update the highlighter on the current highlighted node (the one that was
+   * passed as an argument to show(node)).
+   * Should be called whenever node size or attributes change
+   */
+  _update() {
+    setIgnoreLayoutChanges(true);
+
+    // Getting the points for the transformed shape
+    const quads = this.currentQuads.border;
+    if (
+      !quads.length ||
+      quads[0].bounds.width <= 0 ||
+      quads[0].bounds.height <= 0
+    ) {
+      this._hideShapes();
+      return false;
+    }
+
+    const [quad] = quads;
+
+    // Getting the points for the untransformed shape
+    const untransformedQuad = getNodeBounds(this.win, this.currentNode);
+
+    this._setPolygonPoints(quad, "transformed");
+    this._setPolygonPoints(untransformedQuad, "untransformed");
+    for (const nb of ["1", "2", "3", "4"]) {
+      this._setLinePoints(
+        untransformedQuad["p" + nb],
+        quad["p" + nb],
+        "line" + nb
+      );
+    }
+
+    // Adapt to the current zoom
+    this.markup.scaleRootElement(
+      this.currentNode,
+      this.ID_CLASS_PREFIX + "root"
+    );
+
+    this._showShapes();
+
+    setIgnoreLayoutChanges(
+      false,
+      this.highlighterEnv.window.document.documentElement
+    );
+    return true;
+  }
+
+  /**
+   * Hide the highlighter, the outline and the infobar.
+   */
+  _hide() {
+    setIgnoreLayoutChanges(true);
+    this._hideShapes();
+    setIgnoreLayoutChanges(
+      false,
+      this.highlighterEnv.window.document.documentElement
+    );
+  }
+
+  _hideShapes() {
+    this.getElement("elements").setAttribute("hidden", "true");
+  }
+
+  _showShapes() {
+    this.getElement("elements").removeAttribute("hidden");
+  }
+}
+
+exports.CssTransformHighlighter = CssTransformHighlighter;