Backed out changeset f742585cb26e (bug 1838226) for dt failures on br…

…owser_inspector_highlighter-cssshape_offset-path.js . CLOSED TREE

devtools/client/inspector/test/browser.ini

@@ -118,7 +118,6 @@ fail-if = a11y_checks # bug 1687723 ruleview-shapeswatch is not accessible
 skip-if =
   verify && debug
 fail-if = a11y_checks # bug 1687723 ruleview-shapeswatch is not accessible
-[browser_inspector_highlighter-cssshape_offset-path.js]
 [browser_inspector_highlighter-csstransform_01.js]
 [browser_inspector_highlighter-csstransform_02.js]
 [browser_inspector_highlighter-custom-element.js]

devtools/client/shared/output-parser.js

@@ -139,10 +139,7 @@ class OutputParser {
     options.expectFilter =
       name === "filter" ||
       (BACKDROP_FILTER_ENABLED && name === "backdrop-filter");
-    options.expectShape =
-      name === "clip-path" ||
-      name === "shape-outside" ||
-      name === "offset-path";
+    options.expectShape = name === "clip-path" || name === "shape-outside";
     options.expectFont = name === "font-family";
     options.supportsColor =
       this.#cssProperties.supportsType(name, "color") ||

devtools/client/shared/test/browser_outputparser.js

@@ -526,17 +526,11 @@ function testParseShape(doc, parser) {
       definition: "inset()",
       spanCount: 0,
     },
-    {
-      desc: "offset-path property with inset shape value",
-      property: "offset-path",
-      definition: "inset(200px)",
-      spanCount: 1,
-    },
   ];
 
-  for (const { desc, definition, property = "clip-path", spanCount } of tests) {
+  for (const { desc, definition, spanCount } of tests) {
     info(desc);
-    const frag = parser.parseCssProperty(property, definition, {
+    const frag = parser.parseCssProperty("clip-path", definition, {
       shapeClass: "ruleview-shape",
     });
     const spans = frag.querySelectorAll(".ruleview-shape-point");

devtools/client/shared/test/highlighter-test-actor.js

@@ -99,15 +99,6 @@ var highlighterTestSpec = protocol.generateActorSpec({
         value: RetVal("string"),
       },
     },
-    getHighlighterBoundingClientRect: {
-      request: {
-        nodeID: Arg(0, "string"),
-        actorID: Arg(1, "string"),
-      },
-      response: {
-        value: RetVal("json"),
-      },
-    },
     getHighlighterComputedStyle: {
       request: {
         nodeID: Arg(0, "string"),
@@ -284,23 +275,6 @@ class HighlighterTestActor extends protocol.Actor {
     return helper.getAttributeForElement(nodeID, name);
   }
 
-  /**
-   * Get the bounding client rect for an highlighter element, given its ID.
-   *
-   * @param {String} nodeID The full ID of the element to get the DOMRect for
-   * @param {String} actorID The highlighter actor ID
-   * @return {DOMRect} The value, if found, null otherwise
-   */
-  getHighlighterBoundingClientRect(nodeID, actorID) {
-    const helper = getHighlighterCanvasFrameHelper(this.conn, actorID);
-
-    if (!helper) {
-      throw new Error(`Highlighter not found`);
-    }
-
-    return helper.getBoundingClientRect(nodeID);
-  }
-
   /**
    * Get the computed style for a given property, on one of the elements of the
    * box model highlighter, given its ID.

devtools/client/shared/widgets/ShapesInContextEditor.js

@@ -106,7 +106,7 @@ class ShapesInContextEditor {
       options.transformMode = !this.state.shapes.options.transformMode;
     }
 
-    // Same target node, dfferent modes -> toggle between shape-outside, clip-path and offset-path.
+    // Same target node, dfferent modes -> toggle between shape-outside and clip-path.
     // Hide highlighter for previous property, but continue and show for other property.
     if (node == this.highlighterTargetNode && this.mode !== options.mode) {
       await this.hide();

devtools/server/actors/highlighters/auto-refresh.js

@@ -130,14 +130,6 @@ class AutoRefreshHighlighter extends EventEmitter {
 
     this._stopRefreshLoop();
     this.currentNode = node;
-
-    // For offset-path, the highlighter needs to be computed from the containing block
-    // of the node, not the node itself.
-    this.useContainingBlock = this.options.mode === "cssOffsetPath";
-    this.drawingNode = this.useContainingBlock
-      ? InspectorUtils.containingBlockOf(this.currentNode)
-      : this.currentNode;
-
     this._updateAdjustedQuads();
     this._startRefreshLoop();
 
@@ -206,19 +198,10 @@ class AutoRefreshHighlighter extends EventEmitter {
   _updateAdjustedQuads() {
     this.currentQuads = {};
 
-    // If we need to use the containing block, and if it is the <html> element,
-    // we need to use the viewport quads.
-    const useViewport =
-      this.useContainingBlock &&
-      this.drawingNode === this.currentNode.ownerDocument.documentElement;
-    const node = useViewport
-      ? this.drawingNode.ownerDocument
-      : this.drawingNode;
-
     for (const region of BOX_MODEL_REGIONS) {
       this.currentQuads[region] = getAdjustedQuads(
         this.contentWindow,
-        node,
+        this.currentNode,
         region,
         { ignoreScroll: this._ignoreScroll, ignoreZoom: this._ignoreZoom }
       );

devtools/server/actors/highlighters/shapes.js

@@ -382,16 +382,16 @@ class ShapesHighlighter extends AutoRefreshHighlighter {
     // and "stroke-box" is not specified. stroke only applies to SVG elements, so use
     // getBBox, which only exists for SVG, to check if currentNode is an SVG element.
     if (
-      this.drawingNode.getBBox &&
-      getComputedStyle(this.drawingNode).stroke !== "none" &&
+      this.currentNode.getBBox &&
+      getComputedStyle(this.currentNode).stroke !== "none" &&
       !this.useStrokeBox
     ) {
       dims = getObjectBoundingBox(
         dims.top,
         dims.left,
         dims.width,
         dims.height,
-        this.drawingNode
+        this.currentNode
       );
     }
 
@@ -407,11 +407,11 @@ class ShapesHighlighter extends AutoRefreshHighlighter {
     // In an iframe, we get the node's quads relative to the frame, instead of the parent
     // document.
     let dims =
-      this.highlighterEnv.window.document === this.drawingNode.ownerDocument
+      this.highlighterEnv.window.document === this.currentNode.ownerDocument
         ? this.currentQuads[this.referenceBox][0].bounds
         : getAdjustedQuads(
-            this.drawingNode.ownerGlobal,
-            this.drawingNode,
+            this.currentNode.ownerGlobal,
+            this.currentNode,
             this.referenceBox
           )[0].bounds;
     const zoom = getCurrentZoom(this.win);
@@ -422,16 +422,16 @@ class ShapesHighlighter extends AutoRefreshHighlighter {
     // and "stroke-box" is not specified. stroke only applies to SVG elements, so use
     // getBBox, which only exists for SVG, to check if currentNode is an SVG element.
     if (
-      this.drawingNode.getBBox &&
-      getComputedStyle(this.drawingNode).stroke !== "none" &&
+      this.currentNode.getBBox &&
+      getComputedStyle(this.currentNode).stroke !== "none" &&
       !this.useStrokeBox
     ) {
       dims = getObjectBoundingBox(
         dims.top,
         dims.left,
         dims.width,
         dims.height,
-        this.drawingNode
+        this.currentNode
       );
     }
 
@@ -2046,14 +2046,9 @@ class ShapesHighlighter extends AutoRefreshHighlighter {
       },
     ];
     const geometryTypes = ["margin", "border", "padding", "content"];
-    // default to border for clip-path and offset-path, and margin for shape-outside
-    const defaultGeometryTypesByProperty = new Map([
-      ["clip-path", "border"],
-      ["offset-path", "border"],
-      ["shape-outside", "margin"],
-    ]);
 
-    let referenceBox = defaultGeometryTypesByProperty.get(this.property);
+    // default to border for clip-path, and margin for shape-outside
+    let referenceBox = this.property === "clip-path" ? "border" : "margin";
     for (const geometry of geometryTypes) {
       if (definition.includes(geometry)) {
         referenceBox = geometry;

devtools/server/actors/highlighters/utils/markup.js

@@ -312,14 +312,6 @@ CanvasFrameAnonymousContentHelper.prototype = {
     return this.content?.root.getElementById(id);
   },
 
-  getBoundingClientRect(id) {
-    const node = this._getNodeById(id);
-    if (!node) {
-      return null;
-    }
-    return node.getBoundingClientRect();
-  },
-
   getComputedStylePropertyValue(id, property) {
     const node = this._getNodeById(id);
     if (!node) {