Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 798 insertions, 0 deletions

diff --git a/devtools/server/actors/highlighters/geometry-editor.js b/devtools/server/actors/highlighters/geometry-editor.js
new file mode 100644
index 0000000000..d7e56204e5
--- /dev/null
+++ b/devtools/server/actors/highlighters/geometry-editor.js
@@ -0,0 +1,798 @@
+/* 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,
+  getAdjustedQuads,
+} = require("resource://devtools/shared/layout/utils.js");
+const {
+  getCSSStyleRules,
+} = require("resource://devtools/shared/inspector/css-logic.js");
+
+const GEOMETRY_LABEL_SIZE = 6;
+
+// List of all DOM Events subscribed directly to the document from the
+// Geometry Editor highlighter
+const DOM_EVENTS = ["mousemove", "mouseup", "pagehide"];
+
+const _dragging = Symbol("geometry/dragging");
+
+/**
+ * Element geometry properties helper that gives names of position and size
+ * properties.
+ */
+var GeoProp = {
+  SIDES: ["top", "right", "bottom", "left"],
+  SIZES: ["width", "height"],
+
+  allProps() {
+    return [...this.SIDES, ...this.SIZES];
+  },
+
+  isSide(name) {
+    return this.SIDES.includes(name);
+  },
+
+  isSize(name) {
+    return this.SIZES.includes(name);
+  },
+
+  containsSide(names) {
+    return names.some(name => this.SIDES.includes(name));
+  },
+
+  containsSize(names) {
+    return names.some(name => this.SIZES.includes(name));
+  },
+
+  isHorizontal(name) {
+    return name === "left" || name === "right" || name === "width";
+  },
+
+  isInverted(name) {
+    return name === "right" || name === "bottom";
+  },
+
+  mainAxisStart(name) {
+    return this.isHorizontal(name) ? "left" : "top";
+  },
+
+  crossAxisStart(name) {
+    return this.isHorizontal(name) ? "top" : "left";
+  },
+
+  mainAxisSize(name) {
+    return this.isHorizontal(name) ? "width" : "height";
+  },
+
+  crossAxisSize(name) {
+    return this.isHorizontal(name) ? "height" : "width";
+  },
+
+  axis(name) {
+    return this.isHorizontal(name) ? "x" : "y";
+  },
+
+  crossAxis(name) {
+    return this.isHorizontal(name) ? "y" : "x";
+  },
+};
+
+/**
+ * Get the provided node's offsetParent dimensions.
+ * Returns an object with the {parent, dimension} properties.
+ * Note that the returned parent will be null if the offsetParent is the
+ * default, non-positioned, body or html node.
+ *
+ * node.offsetParent returns the nearest positioned ancestor but if it is
+ * non-positioned itself, we just return null to let consumers know the node is
+ * actually positioned relative to the viewport.
+ *
+ * @return {Object}
+ */
+function getOffsetParent(node) {
+  const win = node.ownerGlobal;
+
+  let offsetParent = node.offsetParent;
+  if (offsetParent && getComputedStyle(offsetParent).position === "static") {
+    offsetParent = null;
+  }
+
+  let width, height;
+  if (!offsetParent) {
+    height = win.innerHeight;
+    width = win.innerWidth;
+  } else {
+    height = offsetParent.offsetHeight;
+    width = offsetParent.offsetWidth;
+  }
+
+  return {
+    element: offsetParent,
+    dimension: { width, height },
+  };
+}
+
+/**
+ * Get the list of geometry properties that are actually set on the provided
+ * node.
+ *
+ * @param {Node} node The node to analyze.
+ * @return {Map} A map indexed by property name and where the value is an
+ * object having the cssRule property.
+ */
+function getDefinedGeometryProperties(node) {
+  const props = new Map();
+  if (!node) {
+    return props;
+  }
+
+  // Get the list of css rules applying to the current node.
+  const cssRules = getCSSStyleRules(node);
+  for (let i = 0; i < cssRules.length; i++) {
+    const rule = cssRules[i];
+    for (const name of GeoProp.allProps()) {
+      const value = rule.style.getPropertyValue(name);
+      if (value && value !== "auto") {
+        // getCSSStyleRules returns rules ordered from least to most specific
+        // so just override any previous properties we have set.
+        props.set(name, {
+          cssRule: rule,
+        });
+      }
+    }
+  }
+
+  // Go through the inline styles last, only if the node supports inline style
+  // (e.g. pseudo elements don't have a style property)
+  if (node.style) {
+    for (const name of GeoProp.allProps()) {
+      const value = node.style.getPropertyValue(name);
+      if (value && value !== "auto") {
+        props.set(name, {
+          // There's no cssRule to store here, so store the node instead since
+          // node.style exists.
+          cssRule: node,
+        });
+      }
+    }
+  }
+
+  // Post-process the list for invalid properties. This is done after the fact
+  // because of cases like relative positioning with both top and bottom where
+  // only top will actually be used, but both exists in css rules and computed
+  // styles.
+  const { position } = getComputedStyle(node);
+  for (const [name] of props) {
+    // Top/left/bottom/right on static positioned elements have no effect.
+    if (position === "static" && GeoProp.SIDES.includes(name)) {
+      props.delete(name);
+    }
+
+    // Bottom/right on relative positioned elements are only used if top/left
+    // are not defined.
+    const hasRightAndLeft = name === "right" && props.has("left");
+    const hasBottomAndTop = name === "bottom" && props.has("top");
+    if (position === "relative" && (hasRightAndLeft || hasBottomAndTop)) {
+      props.delete(name);
+    }
+  }
+
+  return props;
+}
+exports.getDefinedGeometryProperties = getDefinedGeometryProperties;
+
+/**
+ * The GeometryEditor highlights an elements's top, left, bottom, right, width
+ * and height dimensions, when they are set.
+ *
+ * To determine if an element has a set size and position, the highlighter lists
+ * the CSS rules that apply to the element and checks for the top, left, bottom,
+ * right, width and height properties.
+ * The highlighter won't be shown if the element doesn't have any of these
+ * properties set, but will be shown when at least 1 property is defined.
+ *
+ * The highlighter displays lines and labels for each of the defined properties
+ * in and around the element (relative to the offset parent when one exists).
+ * The highlighter also highlights the element itself and its offset parent if
+ * there is one.
+ *
+ * Note that the class name contains the word Editor because the aim is for the
+ * handles to be draggable in content to make the geometry editable.
+ */
+class GeometryEditorHighlighter extends AutoRefreshHighlighter {
+  constructor(highlighterEnv) {
+    super(highlighterEnv);
+
+    this.ID_CLASS_PREFIX = "geometry-editor-";
+
+    // The list of element geometry properties that can be set.
+    this.definedProperties = new Map();
+
+    this.markup = new CanvasFrameAnonymousContentHelper(
+      highlighterEnv,
+      this._buildMarkup.bind(this)
+    );
+    this.isReady = this.initialize();
+
+    const { pageListenerTarget } = this.highlighterEnv;
+
+    // Register the geometry editor instance to all events we're interested in.
+    DOM_EVENTS.forEach(type => pageListenerTarget.addEventListener(type, this));
+
+    this.onWillNavigate = this.onWillNavigate.bind(this);
+
+    this.highlighterEnv.on("will-navigate", this.onWillNavigate);
+  }
+
+  async initialize() {
+    await this.markup.initialize();
+    // Register the mousedown event for each Geometry Editor's handler.
+    // Those events are automatically removed when the markup is destroyed.
+    const onMouseDown = this.handleEvent.bind(this);
+
+    for (const side of GeoProp.SIDES) {
+      this.getElement("handler-" + side).addEventListener(
+        "mousedown",
+        onMouseDown
+      );
+    }
+  }
+
+  _buildMarkup() {
+    const container = this.markup.createNode({
+      attributes: { class: "highlighter-container" },
+    });
+
+    const root = this.markup.createNode({
+      parent: container,
+      attributes: {
+        id: "root",
+        class: "root",
+        hidden: "true",
+      },
+      prefix: this.ID_CLASS_PREFIX,
+    });
+
+    const svg = this.markup.createSVGNode({
+      nodeType: "svg",
+      parent: root,
+      attributes: {
+        id: "elements",
+        width: "100%",
+        height: "100%",
+      },
+      prefix: this.ID_CLASS_PREFIX,
+    });
+
+    // Offset parent node highlighter.
+    this.markup.createSVGNode({
+      nodeType: "polygon",
+      parent: svg,
+      attributes: {
+        class: "offset-parent",
+        id: "offset-parent",
+        hidden: "true",
+      },
+      prefix: this.ID_CLASS_PREFIX,
+    });
+
+    // Current node highlighter (margin box).
+    this.markup.createSVGNode({
+      nodeType: "polygon",
+      parent: svg,
+      attributes: {
+        class: "current-node",
+        id: "current-node",
+        hidden: "true",
+      },
+      prefix: this.ID_CLASS_PREFIX,
+    });
+
+    // Build the 4 side arrows, handlers and labels.
+    for (const name of GeoProp.SIDES) {
+      this.markup.createSVGNode({
+        nodeType: "line",
+        parent: svg,
+        attributes: {
+          class: "arrow " + name,
+          id: "arrow-" + name,
+          hidden: "true",
+        },
+        prefix: this.ID_CLASS_PREFIX,
+      });
+
+      this.markup.createSVGNode({
+        nodeType: "circle",
+        parent: svg,
+        attributes: {
+          class: "handler-" + name,
+          id: "handler-" + name,
+          r: "4",
+          "data-side": name,
+          hidden: "true",
+        },
+        prefix: this.ID_CLASS_PREFIX,
+      });
+
+      // Labels are positioned by using a translated <g>. This group contains
+      // a path and text that are themselves positioned using another translated
+      // <g>. This is so that the label arrow points at the 0,0 coordinates of
+      // parent <g>.
+      const labelG = this.markup.createSVGNode({
+        nodeType: "g",
+        parent: svg,
+        attributes: {
+          id: "label-" + name,
+          hidden: "true",
+        },
+        prefix: this.ID_CLASS_PREFIX,
+      });
+
+      const subG = this.markup.createSVGNode({
+        nodeType: "g",
+        parent: labelG,
+        attributes: {
+          transform: GeoProp.isHorizontal(name)
+            ? "translate(-30 -30)"
+            : "translate(5 -10)",
+        },
+      });
+
+      this.markup.createSVGNode({
+        nodeType: "path",
+        parent: subG,
+        attributes: {
+          class: "label-bubble",
+          d: GeoProp.isHorizontal(name)
+            ? "M0 0 L60 0 L60 20 L35 20 L30 25 L25 20 L0 20z"
+            : "M5 0 L65 0 L65 20 L5 20 L5 15 L0 10 L5 5z",
+        },
+        prefix: this.ID_CLASS_PREFIX,
+      });
+
+      this.markup.createSVGNode({
+        nodeType: "text",
+        parent: subG,
+        attributes: {
+          class: "label-text",
+          id: "label-text-" + name,
+          x: GeoProp.isHorizontal(name) ? "30" : "35",
+          y: "10",
+        },
+        prefix: this.ID_CLASS_PREFIX,
+      });
+    }
+
+    return container;
+  }
+
+  destroy() {
+    // Avoiding exceptions if `destroy` is called multiple times; and / or the
+    // highlighter environment was already destroyed.
+    if (!this.highlighterEnv) {
+      return;
+    }
+
+    const { pageListenerTarget } = this.highlighterEnv;
+
+    if (pageListenerTarget) {
+      DOM_EVENTS.forEach(type =>
+        pageListenerTarget.removeEventListener(type, this)
+      );
+    }
+
+    AutoRefreshHighlighter.prototype.destroy.call(this);
+
+    this.markup.destroy();
+    this.definedProperties.clear();
+    this.definedProperties = null;
+    this.offsetParent = null;
+  }
+
+  handleEvent(event, id) {
+    // No event handling if the highlighter is hidden
+    if (this.getElement("root").hasAttribute("hidden")) {
+      return;
+    }
+
+    const { target, type, pageX, pageY } = event;
+
+    switch (type) {
+      case "pagehide":
+        // If a page hide event is triggered for current window's highlighter, hide the
+        // highlighter.
+        if (target.defaultView === this.win) {
+          this.destroy();
+        }
+
+        break;
+      case "mousedown":
+        // The mousedown event is intended only for the handler
+        if (!id) {
+          return;
+        }
+
+        const handlerSide = this.markup
+          .getElement(id)
+          .getAttribute("data-side");
+
+        if (handlerSide) {
+          const side = handlerSide;
+          const sideProp = this.definedProperties.get(side);
+
+          if (!sideProp) {
+            return;
+          }
+
+          let value = sideProp.cssRule.style.getPropertyValue(side);
+          const computedValue = this.computedStyle.getPropertyValue(side);
+
+          const [unit] = value.match(/[^\d]+$/) || [""];
+
+          value = parseFloat(value);
+
+          const ratio = value / parseFloat(computedValue) || 1;
+          const dir = GeoProp.isInverted(side) ? -1 : 1;
+
+          // Store all the initial values needed for drag & drop
+          this[_dragging] = {
+            side,
+            value,
+            unit,
+            x: pageX,
+            y: pageY,
+            inc: ratio * dir,
+          };
+
+          this.getElement("handler-" + side).classList.add("dragging");
+        }
+
+        this.getElement("root").setAttribute("dragging", "true");
+        break;
+      case "mouseup":
+        // If we're dragging, drop it.
+        if (this[_dragging]) {
+          const { side } = this[_dragging];
+          this.getElement("root").removeAttribute("dragging");
+          this.getElement("handler-" + side).classList.remove("dragging");
+          this[_dragging] = null;
+        }
+        break;
+      case "mousemove":
+        if (!this[_dragging]) {
+          return;
+        }
+
+        const { side, x, y, value, unit, inc } = this[_dragging];
+        const sideProps = this.definedProperties.get(side);
+
+        if (!sideProps) {
+          return;
+        }
+
+        const delta =
+          (GeoProp.isHorizontal(side) ? pageX - x : pageY - y) * inc;
+
+        // The inline style has usually the priority over any other CSS rule
+        // set in stylesheets. However, if a rule has `!important` keyword,
+        // it will override the inline style too. To ensure Geometry Editor
+        // will always update the element, we have to add `!important` as
+        // well.
+        this.currentNode.style.setProperty(
+          side,
+          value + delta + unit,
+          "important"
+        );
+
+        break;
+    }
+  }
+
+  getElement(id) {
+    return this.markup.getElement(this.ID_CLASS_PREFIX + id);
+  }
+
+  _show() {
+    this.computedStyle = getComputedStyle(this.currentNode);
+    const pos = this.computedStyle.position;
+    // XXX: sticky positioning is ignored for now. To be implemented next.
+    if (pos === "sticky") {
+      this.hide();
+      return false;
+    }
+
+    const hasUpdated = this._update();
+    if (!hasUpdated) {
+      this.hide();
+      return false;
+    }
+
+    this.getElement("root").removeAttribute("hidden");
+
+    return true;
+  }
+
+  _update() {
+    // At each update, the position or/and size may have changed, so get the
+    // list of defined properties, and re-position the arrows and highlighters.
+    this.definedProperties = getDefinedGeometryProperties(this.currentNode);
+
+    if (!this.definedProperties.size) {
+      console.warn("The element does not have editable geometry properties");
+      return false;
+    }
+
+    setIgnoreLayoutChanges(true);
+
+    // Update the highlighters and arrows.
+    this.updateOffsetParent();
+    this.updateCurrentNode();
+    this.updateArrows();
+
+    // Avoid zooming the arrows when content is zoomed.
+    const node = this.currentNode;
+    this.markup.scaleRootElement(node, this.ID_CLASS_PREFIX + "root");
+
+    setIgnoreLayoutChanges(false, this.highlighterEnv.document.documentElement);
+    return true;
+  }
+
+  /**
+   * Update the offset parent rectangle.
+   * There are 3 different cases covered here:
+   * - the node is absolutely/fixed positioned, and an offsetParent is defined
+   *   (i.e. it's not just positioned in the viewport): the offsetParent node
+   *   is highlighted (i.e. the rectangle is shown),
+   * - the node is relatively positioned: the rectangle is shown where the node
+   *   would originally have been (because that's where the relative positioning
+   *   is calculated from),
+   * - the node has no offset parent at all: the offsetParent rectangle is
+   *   hidden.
+   */
+  updateOffsetParent() {
+    // Get the offsetParent, if any.
+    this.offsetParent = getOffsetParent(this.currentNode);
+    // And the offsetParent quads.
+    this.parentQuads = getAdjustedQuads(
+      this.win,
+      this.offsetParent.element,
+      "padding"
+    );
+
+    const el = this.getElement("offset-parent");
+
+    const isPositioned =
+      this.computedStyle.position === "absolute" ||
+      this.computedStyle.position === "fixed";
+    const isRelative = this.computedStyle.position === "relative";
+    let isHighlighted = false;
+
+    if (this.offsetParent.element && isPositioned) {
+      const { p1, p2, p3, p4 } = this.parentQuads[0];
+      const points =
+        p1.x +
+        "," +
+        p1.y +
+        " " +
+        p2.x +
+        "," +
+        p2.y +
+        " " +
+        p3.x +
+        "," +
+        p3.y +
+        " " +
+        p4.x +
+        "," +
+        p4.y;
+      el.setAttribute("points", points);
+      isHighlighted = true;
+    } else if (isRelative) {
+      const xDelta = parseFloat(this.computedStyle.left);
+      const yDelta = parseFloat(this.computedStyle.top);
+      if (xDelta || yDelta) {
+        const { p1, p2, p3, p4 } = this.currentQuads.margin[0];
+        const points =
+          p1.x -
+          xDelta +
+          "," +
+          (p1.y - yDelta) +
+          " " +
+          (p2.x - xDelta) +
+          "," +
+          (p2.y - yDelta) +
+          " " +
+          (p3.x - xDelta) +
+          "," +
+          (p3.y - yDelta) +
+          " " +
+          (p4.x - xDelta) +
+          "," +
+          (p4.y - yDelta);
+        el.setAttribute("points", points);
+        isHighlighted = true;
+      }
+    }
+
+    if (isHighlighted) {
+      el.removeAttribute("hidden");
+    } else {
+      el.setAttribute("hidden", "true");
+    }
+  }
+
+  updateCurrentNode() {
+    const box = this.getElement("current-node");
+    const { p1, p2, p3, p4 } = this.currentQuads.margin[0];
+    const attr =
+      p1.x +
+      "," +
+      p1.y +
+      " " +
+      p2.x +
+      "," +
+      p2.y +
+      " " +
+      p3.x +
+      "," +
+      p3.y +
+      " " +
+      p4.x +
+      "," +
+      p4.y;
+    box.setAttribute("points", attr);
+    box.removeAttribute("hidden");
+  }
+
+  _hide() {
+    setIgnoreLayoutChanges(true);
+
+    this.getElement("root").setAttribute("hidden", "true");
+    this.getElement("current-node").setAttribute("hidden", "true");
+    this.getElement("offset-parent").setAttribute("hidden", "true");
+    this.hideArrows();
+
+    this.definedProperties.clear();
+
+    setIgnoreLayoutChanges(false, this.highlighterEnv.document.documentElement);
+  }
+
+  hideArrows() {
+    for (const side of GeoProp.SIDES) {
+      this.getElement("arrow-" + side).setAttribute("hidden", "true");
+      this.getElement("label-" + side).setAttribute("hidden", "true");
+      this.getElement("handler-" + side).setAttribute("hidden", "true");
+    }
+  }
+
+  updateArrows() {
+    this.hideArrows();
+
+    // Position arrows always end at the node's margin box.
+    const marginBox = this.currentQuads.margin[0].bounds;
+
+    // Position the side arrows which need to be visible.
+    // Arrows always start at the offsetParent edge, and end at the middle
+    // position of the node's margin edge.
+    // Note that for relative positioning, the offsetParent is considered to be
+    // the node itself, where it would have been originally.
+    // +------------------+----------------+
+    // | offsetparent     | top            |
+    // | or viewport      |                |
+    // |         +--------+--------+       |
+    // |         | node            |       |
+    // +---------+                 +-------+
+    // | left    |                 | right |
+    // |         +--------+--------+       |
+    // |                  | bottom         |
+    // +------------------+----------------+
+    const getSideArrowStartPos = side => {
+      // In case an offsetParent exists and is highlighted.
+      if (this.parentQuads && this.parentQuads.length) {
+        return this.parentQuads[0].bounds[side];
+      }
+
+      // In case of relative positioning.
+      if (this.computedStyle.position === "relative") {
+        if (GeoProp.isInverted(side)) {
+          return marginBox[side] + parseFloat(this.computedStyle[side]);
+        }
+        return marginBox[side] - parseFloat(this.computedStyle[side]);
+      }
+
+      // In case the element is positioned in the viewport.
+      if (GeoProp.isInverted(side)) {
+        return this.offsetParent.dimension[GeoProp.mainAxisSize(side)];
+      }
+      return (
+        -1 *
+        this.currentNode.ownerGlobal[
+          "scroll" + GeoProp.axis(side).toUpperCase()
+        ]
+      );
+    };
+
+    for (const side of GeoProp.SIDES) {
+      const sideProp = this.definedProperties.get(side);
+      if (!sideProp) {
+        continue;
+      }
+
+      const mainAxisStartPos = getSideArrowStartPos(side);
+      const mainAxisEndPos = marginBox[side];
+      const crossAxisPos =
+        marginBox[GeoProp.crossAxisStart(side)] +
+        marginBox[GeoProp.crossAxisSize(side)] / 2;
+
+      this.updateArrow(
+        side,
+        mainAxisStartPos,
+        mainAxisEndPos,
+        crossAxisPos,
+        sideProp.cssRule.style.getPropertyValue(side)
+      );
+    }
+  }
+
+  updateArrow(side, mainStart, mainEnd, crossPos, labelValue) {
+    const arrowEl = this.getElement("arrow-" + side);
+    const labelEl = this.getElement("label-" + side);
+    const labelTextEl = this.getElement("label-text-" + side);
+    const handlerEl = this.getElement("handler-" + side);
+
+    // Position the arrow <line>.
+    arrowEl.setAttribute(GeoProp.axis(side) + "1", mainStart);
+    arrowEl.setAttribute(GeoProp.crossAxis(side) + "1", crossPos);
+    arrowEl.setAttribute(GeoProp.axis(side) + "2", mainEnd);
+    arrowEl.setAttribute(GeoProp.crossAxis(side) + "2", crossPos);
+    arrowEl.removeAttribute("hidden");
+
+    handlerEl.setAttribute("c" + GeoProp.axis(side), mainEnd);
+    handlerEl.setAttribute("c" + GeoProp.crossAxis(side), crossPos);
+    handlerEl.removeAttribute("hidden");
+
+    // Position the label <text> in the middle of the arrow (making sure it's
+    // not hidden below the fold).
+    const capitalize = str => str[0].toUpperCase() + str.substring(1);
+    const winMain = this.win["inner" + capitalize(GeoProp.mainAxisSize(side))];
+    let labelMain = mainStart + (mainEnd - mainStart) / 2;
+    if (
+      (mainStart > 0 && mainStart < winMain) ||
+      (mainEnd > 0 && mainEnd < winMain)
+    ) {
+      if (labelMain < GEOMETRY_LABEL_SIZE) {
+        labelMain = GEOMETRY_LABEL_SIZE;
+      } else if (labelMain > winMain - GEOMETRY_LABEL_SIZE) {
+        labelMain = winMain - GEOMETRY_LABEL_SIZE;
+      }
+    }
+    const labelCross = crossPos;
+    labelEl.setAttribute(
+      "transform",
+      GeoProp.isHorizontal(side)
+        ? "translate(" + labelMain + " " + labelCross + ")"
+        : "translate(" + labelCross + " " + labelMain + ")"
+    );
+    labelEl.removeAttribute("hidden");
+    labelTextEl.setTextContent(labelValue);
+  }
+
+  onWillNavigate({ isTopLevel }) {
+    if (isTopLevel) {
+      this.hide();
+    }
+  }
+}
+
+exports.GeometryEditorHighlighter = GeometryEditorHighlighter;