Commit 807a90b0 authored by Nicolas Chevobbe's avatar Nicolas Chevobbe
Browse files

Bug 1732690 - [devtools] Fix GeometryHighlighter in iframes. r=jdescottes. 

The highlighter wasn't working on remote iframe as we were trying to retrieve it
from the top-level inspector front.

Differential Revision: https://phabricator.services.mozilla.com/D126807
parent 2a111dbf

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

+14 −6
Original line number Diff line number Diff line
@@ -1273,7 +1273,10 @@ class HighlightersOverlay { 
   *        THe NodeFront of the element to highlight.

   */

  async showGeometryEditor(node) {

    const highlighter = await this._getHighlighter("GeometryEditorHighlighter");

    const highlighter = await this._getHighlighterTypeForNode(

      "GeometryEditorHighlighter",

      node

    );

    if (!highlighter) {

      return;

    }
@@ -1291,14 +1294,19 @@ class HighlightersOverlay { 
   * Hide the geometry editor highlighter.

   */

  async hideGeometryEditor() {

    if (

      !this.geometryEditorHighlighterShown ||

      !this.highlighters.GeometryEditorHighlighter

    ) {

    if (!this.geometryEditorHighlighterShown) {

      return;

    }



    const highlighter = this.geometryEditorHighlighterShown.inspectorFront.getKnownHighlighter(

      "GeometryEditorHighlighter"

    );



    if (!highlighter) {

      return;

    }



    await this.highlighters.GeometryEditorHighlighter.hide();

    await highlighter.hide();



    this.emit("geometry-editor-highlighter-hidden");

    this.geometryEditorHighlighterShown = null;

devtools/client/inspector/test/browser.ini

+1 −0
Original line number Diff line number Diff line
@@ -135,6 +135,7 @@ skip-if = os == 'win' # bug 1413442 
[browser_inspector_highlighter-geometry_05.js]

[browser_inspector_highlighter-geometry_06.js]

[browser_inspector_highlighter-geometry_hide_on_interaction.js]

[browser_inspector_highlighter-geometry_iframe.js]

[browser_inspector_highlighter-hover_01.js]

[browser_inspector_highlighter-hover_02.js]

[browser_inspector_highlighter-hover_03.js]

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

0 → 100644
+48 −0
Original line number Diff line number Diff line 
/* 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";



// Test the creation of the geometry highlighter elements on remote frame.



const TEST_URL = `data:text/html;charset=utf-8,

  <iframe src="https://example.org/document-builder.sjs?html=${encodeURIComponent(`

    <div id='positioned' style='

      background:yellow;

      position:absolute;

      left:5rem;

      top:30px;'

    >

      Hello from iframe

    </div>`)}">

  </iframe>`;



add_task(async function() {

  const { inspector } = await openInspectorForURL(TEST_URL);



  info("Select the absolute positioned node in the iframe");

  await selectNodeInFrames(["iframe", "#positioned"], inspector);



  info("Click on the button enabling the highlighter");

  const onHighlighterShown = inspector.highlighters.once(

    "geometry-editor-highlighter-shown"

  );

  const boxModelPanel = inspector.getPanel("boxmodel");

  const button = await waitFor(() =>

    boxModelPanel.document.querySelector(".layout-geometry-editor")

  );

  button.click();



  await onHighlighterShown;

  ok(true, "Highlighter is displayed");



  info("Click on the button again to disable the highlighter");

  const onHighlighterHidden = inspector.highlighters.once(

    "geometry-editor-highlighter-hidden"

  );



  button.click();

  await onHighlighterHidden;

  ok("Highlighter is hidden");

});