Bug 1650094 - making the box model highlighter work in the browser toolbox. r=rcaliman

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

devtools/client/inspector/animation/test/browser_animation_inspector_exists.js

@@ -6,6 +6,7 @@
 // Test whether AnimationInspector and base pane exists.
 
 add_task(async function() {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
   const { animationInspector, panel } = await openAnimationInspector();
   ok(animationInspector, "AnimationInspector should exist");
   ok(panel, "Main animation-inspector panel should exist");

devtools/server/actors/highlighters.js

@@ -20,12 +20,6 @@ loader.lazyRequireGetter(
   "devtools/server/actors/highlighters/utils/markup",
   true
 );
-loader.lazyRequireGetter(
-  this,
-  "SimpleOutlineHighlighter",
-  "devtools/server/actors/highlighters/simple-outline",
-  true
-);
 loader.lazyRequireGetter(
   this,
   "BoxModelHighlighter",
@@ -102,14 +96,6 @@ exports.HighlighterActor = protocol.ActorClassWithSpec(highlighterSpec, {
     this._highlighterEnv.initFromTargetActor(this._targetActor);
 
     this._onNavigate = this._onNavigate.bind(this);
-
-    const doc = this._targetActor.window.document;
-    // Only try to create the highlighter when the document is loaded,
-    // otherwise, wait for the navigate event to fire.
-    if (doc.documentElement && doc.readyState != "uninitialized") {
-      this._createHighlighter();
-    }
-
     // Listen to navigation events to switch from the BoxModelHighlighter to the
     // SimpleOutlineHighlighter, and back, if the top level window changes.
     this._targetActor.on("navigate", this._onNavigate);
@@ -132,17 +118,28 @@ exports.HighlighterActor = protocol.ActorClassWithSpec(highlighterSpec, {
     };
   },
 
-  _createHighlighter: function() {
-    this._isPreviousWindowXUL = isXUL(this._targetActor.window);
-
-    if (!this._isPreviousWindowXUL) {
-      this._highlighter = new BoxModelHighlighter(
-        this._highlighterEnv,
-        this._inspector
-      );
-    } else {
-      this._highlighter = new SimpleOutlineHighlighter(this._highlighterEnv);
+  initializeInstance() {
+    // _createHighlighter will resolve this promise once the highlighter
+    // instance is created.
+    const onInitialized = new Promise(resolve => {
+      this._initialized = resolve;
+    });
+    // Only try to create the highlighter isntance when the document is loaded,
+    // otherwise, wait for the navigate event to fire.
+    const doc = this._targetActor.window.document;
+    if (doc.documentElement && doc.readyState != "uninitialized") {
+      this._createHighlighter();
     }
+
+    return onInitialized;
+  },
+
+  _createHighlighter: function() {
+    this._highlighter = new BoxModelHighlighter(
+      this._highlighterEnv,
+      this._inspector
+    );
+    this._initialized();
   },
 
   _destroyHighlighter: function() {
@@ -159,11 +156,8 @@ exports.HighlighterActor = protocol.ActorClassWithSpec(highlighterSpec, {
       return;
     }
 
-    // Only rebuild the highlighter if the window type changed.
-    if (isXUL(this._targetActor.window) !== this._isPreviousWindowXUL) {
-      this._destroyHighlighter();
-      this._createHighlighter();
-    }
+    this._destroyHighlighter();
+    this._createHighlighter();
   },
 
   destroy: function() {

devtools/server/actors/highlighters/moz.build

@@ -24,5 +24,4 @@ DevToolsModules(
     'rulers.js',
     'selector.js',
     'shapes.js',
-    'simple-outline.js'
 )

devtools/server/actors/highlighters/simple-outline.js

@@ -1,72 +0,0 @@
-/* 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 {
-  isNodeValid,
-  addPseudoClassLock,
-  removePseudoClassLock,
-} = require("devtools/server/actors/highlighters/utils/markup");
-
-const { loadSheet } = require("devtools/shared/layout/utils");
-
-// SimpleOutlineHighlighter's stylesheet
-const HIGHLIGHTED_PSEUDO_CLASS = ":-moz-devtools-highlighted";
-const SIMPLE_OUTLINE_SHEET =
-  "data:text/css;charset=utf-8," +
-  encodeURIComponent(`
-  .__fx-devtools-hide-shortcut__ {
-    visibility: hidden !important
-  }
-  ${HIGHLIGHTED_PSEUDO_CLASS} {
-    outline: 2px dashed #F06!important;
-    outline-offset: -2px!important
-  }`);
-
-/**
- * The SimpleOutlineHighlighter is a class that has the same API than the
- * BoxModelHighlighter, but adds a pseudo-class on the target element itself
- * to draw a simple css outline around the element.
- * It is used by the HighlighterActor when canvasframe-based highlighters can't
- * be used. This is the case for XUL windows.
- */
-function SimpleOutlineHighlighter(highlighterEnv) {
-  this.chromeDoc = highlighterEnv.document;
-}
-
-SimpleOutlineHighlighter.prototype = {
-  /**
-   * Destroy the nodes. Remove listeners.
-   */
-  destroy: function() {
-    this.hide();
-    this.chromeDoc = null;
-  },
-
-  /**
-   * Show the highlighter on a given node
-   * @param {DOMNode} node
-   */
-  show: function(node) {
-    if (isNodeValid(node) && (!this.currentNode || node !== this.currentNode)) {
-      this.hide();
-      this.currentNode = node;
-      loadSheet(node.ownerGlobal, SIMPLE_OUTLINE_SHEET);
-      addPseudoClassLock(node, HIGHLIGHTED_PSEUDO_CLASS);
-    }
-    return true;
-  },
-
-  /**
-   * Hide the highlighter, the outline and the infobar.
-   */
-  hide: function() {
-    if (this.currentNode) {
-      removePseudoClassLock(this.currentNode, HIGHLIGHTED_PSEUDO_CLASS);
-      this.currentNode = null;
-    }
-  },
-};
-exports.SimpleOutlineHighlighter = SimpleOutlineHighlighter;

devtools/server/actors/inspector/inspector.js

@@ -218,6 +218,7 @@ exports.InspectorActor = protocol.ActorClassWithSpec(inspectorSpec, {
 
     this._highlighterPromise = this.getWalker().then(async walker => {
       const highlighter = HighlighterActor(this, autohide);
+      await highlighter.initializeInstance();
       await highlighter.instance.isReady;
       this.manage(highlighter);
       return highlighter;