Bug 1732334 - [devtools] Fix CSS Shape Editor on iframe with dedicated target. r=jdescottes.

Differential Revision: https://phabricator.services.mozilla.com/D126806

devtools/client/inspector/rules/test/browser_rules_shapes-toggle_01.js

@@ -57,7 +57,7 @@ add_task(async function() {
     "Shapes highlighter toggle is active."
   );
   ok(
-    highlighters.highlighters[HIGHLIGHTER_TYPE],
+    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE).actorID,
     "CSS shapes highlighter created in the rule-view."
   );
   ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");

devtools/client/inspector/rules/test/browser_rules_shapes-toggle_03.js

@@ -64,7 +64,7 @@ add_task(async function() {
     "shapes highlighter toggle is active."
   );
   ok(
-    highlighters.highlighters[HIGHLIGHTER_TYPE],
+    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE).actorID,
     "CSS shapes highlighter created in the rule-view."
   );
   ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");

devtools/client/inspector/rules/test/browser_rules_shapes-toggle_07.js

@@ -41,7 +41,7 @@ add_task(async function() {
     "Checking the CSS shapes highlighter is created and transform mode is on"
   );
   ok(
-    highlighters.highlighters[HIGHLIGHTER_TYPE],
+    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE).actorID,
     "CSS shapes highlighter created in the rule-view."
   );
   ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
@@ -67,7 +67,7 @@ add_task(async function() {
     "Checking the CSS shapes highlighter is created and transform mode is off"
   );
   ok(
-    highlighters.highlighters[HIGHLIGHTER_TYPE],
+    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE).actorID,
     "CSS shapes highlighter created in the rule-view."
   );
   ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
@@ -91,7 +91,7 @@ add_task(async function() {
     "Checking the CSS shapes highlighter is created and transform mode is on"
   );
   ok(
-    highlighters.highlighters[HIGHLIGHTER_TYPE],
+    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE).actorID,
     "CSS shapes highlighter created in the rule-view."
   );
   ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");

devtools/client/inspector/rules/test/browser_rules_shapes-toggle_basic-shapes-default.js

@@ -74,7 +74,7 @@ add_task(async function() {
       `Shapes highlighter toggle active for ${selector}`
     );
     ok(
-      highlighters.highlighters[HIGHLIGHTER_TYPE],
+      inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE).actorID,
       `Shapes highlighter instance created for ${selector}`
     );
     ok(

devtools/client/inspector/shared/highlighters-overlay.js

@@ -726,7 +726,7 @@ class HighlightersOverlay {
    *        TextProperty where to write changes.
    */
   async toggleShapesHighlighter(node, options, textProperty) {
-    const shapesEditor = await this.getInContextEditor("shapesEditor");
+    const shapesEditor = await this.getInContextEditor(node, "shapesEditor");
     if (!shapesEditor) {
       return;
     }
@@ -743,7 +743,7 @@ class HighlightersOverlay {
    *         Object used for passing options to the shapes highlighter.
    */
   async showShapesHighlighter(node, options) {
-    const shapesEditor = await this.getInContextEditor("shapesEditor");
+    const shapesEditor = await this.getInContextEditor(node, "shapesEditor");
     if (!shapesEditor) {
       return;
     }
@@ -770,9 +770,11 @@ class HighlightersOverlay {
    * Hide the shapes highlighter if visible.
    * This method delegates the to the in-context shapes editor which wraps
    * the shapes highlighter with additional functionality.
+   *
+   * @param  {NodeFront} node.
    */
-  async hideShapesHighlighter() {
-    const shapesEditor = await this.getInContextEditor("shapesEditor");
+  async hideShapesHighlighter(node) {
+    const shapesEditor = await this.getInContextEditor(node, "shapesEditor");
     if (!shapesEditor) {
       return;
     }
@@ -1388,12 +1390,13 @@ class HighlightersOverlay {
    * need to write value changes back to something, like to properties in the Rule view.
    * They typically exist in the context of the page, like the ShapesInContextEditor.
    *
+   * @param  {NodeFront} node.
    * @param  {String} type
    *         Type of in-context editor. Currently supported: "shapesEditor"
    * @return {Object|null}
    *         Reference to instance for given type of in-context editor or null.
    */
-  async getInContextEditor(type) {
+  async getInContextEditor(node, type) {
     if (this.editors[type]) {
       return this.editors[type];
     }
@@ -1402,7 +1405,10 @@ class HighlightersOverlay {
 
     switch (type) {
       case "shapesEditor":
-        const highlighter = await this._getHighlighter("ShapesHighlighter");
+        const highlighter = await this._getHighlighterTypeForNode(
+          "ShapesHighlighter",
+          node
+        );
         if (!highlighter) {
           return null;
         }

devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js

@@ -43,7 +43,7 @@ async function teardown(config) {
  * in the shapes highlighter on the page.
  */
 async function highlightFromRuleView(config) {
-  const { view, highlighters, highlighterTestFront } = config;
+  const { view, highlighters, highlighterTestFront, inspector } = config;
   const selector = "#polygon";
   const property = "clip-path";
 
@@ -52,7 +52,10 @@ async function highlightFromRuleView(config) {
   const container = getRuleViewProperty(view, selector, property).valueSpan;
   const shapesToggle = container.querySelector(".ruleview-shapeswatch");
 
-  const highlighterFront = highlighters.highlighters[HIGHLIGHTER_TYPE];
+  const highlighterFront = inspector.inspectorFront.getKnownHighlighter(
+    HIGHLIGHTER_TYPE
+  );
+
   let markerHidden = await highlighterTestFront.getHighlighterNodeAttribute(
     "shapes-marker-hover",
     "hidden",
@@ -106,13 +109,21 @@ async function highlightFromRuleView(config) {
  * corresponding points in the rule view.
  */
 async function highlightFromHighlighter(config) {
-  const { view, highlighters, highlighterTestFront, helper } = config;
+  const {
+    view,
+    highlighters,
+    highlighterTestFront,
+    helper,
+    inspector,
+  } = config;
   const selector = "#polygon";
   const property = "clip-path";
 
   await setup({ selector, property, ...config });
 
-  const highlighterFront = highlighters.highlighters[HIGHLIGHTER_TYPE];
+  const highlighterFront = inspector.inspectorFront.getKnownHighlighter(
+    HIGHLIGHTER_TYPE
+  );
   const { mouse } = helper;
   const container = getRuleViewProperty(view, selector, property).valueSpan;
 

devtools/client/inspector/test/browser_inspector_highlighter-cssshape_06-scale.js

@@ -150,10 +150,13 @@ async function testScale(config) {
 }
 
 async function getBoundingBoxInPx(config) {
-  const { highlighterTestFront, selector, inspector, highlighters } = config;
+  const { highlighterTestFront, selector, inspector } = config;
   const quads = await getAllAdjustedQuadsForContentPageElement(selector);
   const { width, height } = quads.content[0].bounds;
   const highlightedNode = await getNodeFront(selector, inspector);
+  const highlighterFront = inspector.inspectorFront.getKnownHighlighter(
+    HIGHLIGHTER_TYPE
+  );
   const computedStyle = await highlightedNode.inspectorFront.pageStyle.getComputed(
     highlightedNode
   );
@@ -163,7 +166,7 @@ async function getBoundingBoxInPx(config) {
   const path = await highlighterTestFront.getHighlighterNodeAttribute(
     "shapes-bounding-box",
     "d",
-    highlighters.highlighters[HIGHLIGHTER_TYPE]
+    highlighterFront
   );
   const coords = path
     .replace(/[MLZ]/g, "")

devtools/client/inspector/test/browser_inspector_highlighter-cssshape_06-translate.js

@@ -90,10 +90,13 @@ async function testTranslate(config) {
 }
 
 async function getBoundingBoxInPx(config) {
-  const { highlighterTestFront, selector, inspector, highlighters } = config;
+  const { highlighterTestFront, selector, inspector } = config;
   const quads = await getAllAdjustedQuadsForContentPageElement(selector);
   const { width, height } = quads.content[0].bounds;
   const highlightedNode = await getNodeFront(selector, inspector);
+  const highlighterFront = inspector.inspectorFront.getKnownHighlighter(
+    HIGHLIGHTER_TYPE
+  );
   const computedStyle = await highlightedNode.inspectorFront.pageStyle.getComputed(
     highlightedNode
   );
@@ -103,7 +106,7 @@ async function getBoundingBoxInPx(config) {
   const path = await highlighterTestFront.getHighlighterNodeAttribute(
     "shapes-bounding-box",
     "d",
-    highlighters.highlighters[HIGHLIGHTER_TYPE]
+    highlighterFront
   );
   const coords = path
     .replace(/[MLZ]/g, "")

devtools/client/inspector/test/browser_inspector_highlighter-cssshape_07.js

@@ -142,10 +142,13 @@ async function testOneDimScale(config) {
 }
 
 async function getBoundingBoxInPx(config) {
-  const { highlighterTestFront, selector, inspector, highlighters } = config;
+  const { highlighterTestFront, selector, inspector } = config;
   const quads = await getAllAdjustedQuadsForContentPageElement(selector);
   const { width, height } = quads.content[0].bounds;
   const highlightedNode = await getNodeFront(selector, inspector);
+  const highlighterFront = inspector.inspectorFront.getKnownHighlighter(
+    HIGHLIGHTER_TYPE
+  );
   const computedStyle = await highlightedNode.inspectorFront.pageStyle.getComputed(
     highlightedNode
   );
@@ -155,7 +158,7 @@ async function getBoundingBoxInPx(config) {
   const path = await highlighterTestFront.getHighlighterNodeAttribute(
     "shapes-bounding-box",
     "d",
-    highlighters.highlighters[HIGHLIGHTER_TYPE]
+    highlighterFront
   );
   const coords = path
     .replace(/[MLZ]/g, "")

devtools/client/inspector/test/browser_inspector_highlighter-cssshape_iframe_01.js

@@ -43,33 +43,55 @@ async function testPolygonIframeMovePoint(config) {
 
   info("Moving polygon point visible in iframe");
   // Iframe has 10px margin. Element in iframe is 800px by 800px. First point is at 0 0%
+  is(
+    await getClipPathPoint(highlightedNode, 0),
+    "0px 0%",
+    `First point is at 0 0%`
+  );
+
   await mouse.down(10, 10);
   await mouse.move(20, 20);
   await mouse.up();
   await reflowContentPage();
   await onRuleViewChanged;
 
-  let computedStyle = await highlightedNode.inspectorFront.pageStyle.getComputed(
-    highlightedNode
+  // point moved from y 0 to 10px, 10/800 (iframe height) = 1,25%
+  is(
+    await getClipPathPoint(highlightedNode, 0),
+    "10px 1.25%",
+    `Point moved to 10px 1.25%`
   );
-  let definition = computedStyle["clip-path"].value;
-  ok(definition.includes("10px 1.25%"), "Point moved to 10px 1.25%");
 
   onRuleViewChanged = waitForNEvents(view, "ruleview-changed", 2);
 
-  info("Moving polygon point not visible in iframe");
+  info("Dragging mouse out of the iframe");
+  // Iframe has 10px margin. Element in iframe is 800px by 800px. Second point is at 100px 50%
+  is(
+    await getClipPathPoint(highlightedNode, 1),
+    "100px 50%",
+    `Second point is at 100px 50%`
+  );
+
   await mouse.down(110, 410);
-  await mouse.move(120, 420);
+  await mouse.move(120, 510);
   await mouse.up();
   await reflowContentPage();
   await onRuleViewChanged;
 
-  computedStyle = await highlightedNode.inspectorFront.pageStyle.getComputed(
-    highlightedNode
+  // The point can't be moved out of the iframe boundary, so we can't really assert the
+  // y point here (as it depends on the horizontal scrollbar size + the shape control point size).
+  ok(
+    (await getClipPathPoint(highlightedNode, 1)).startsWith("110px"),
+    `Point moved to 110px`
   );
-  definition = computedStyle["clip-path"].value;
-  ok(definition.includes("110px 51.25%"), "Point moved to 110px 51.25%");
 
   info(`Turn off shapes highlighter for ${selector}`);
   await toggleShapesHighlighter(view, selector, property, false);
 }
+
+async function getClipPathPoint(node, pointIndex) {
+  const computedStyle = await node.inspectorFront.pageStyle.getComputed(node);
+  const definition = computedStyle["clip-path"].value;
+  const points = definition.replaceAll(/(^polygon\()|(\)$)/g, "").split(", ");
+  return points[pointIndex];
+}