Bug 1053898 - Update MarkupView to track the hovered container rather than the hovered nodeFront;r=gl
authorJulian Descottes <jdescottes@mozilla.com>
Tue, 06 Mar 2018 18:47:26 +0100
changeset 410639 08b587f900031e88a2e7615bf6956bc47717aa13
parent 410638 8866c09a10e6a1d10f5a639914235eb40f0f66e9
child 410640 57661b7187ebd400492b45bc2224c98cd8386856
push id33733
push useraciure@mozilla.com
push dateThu, 29 Mar 2018 22:05:29 +0000
treeherdermozilla-central@7ca58ce09779 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1053898
milestone61.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1053898 - Update MarkupView to track the hovered container rather than the hovered nodeFront;r=gl With shadowdom support, a single node-front can be represented by several containers. Keeping track of the hovered container rather than the hovered nodeFront will make the transition easier. MozReview-Commit-ID: 2uiMRhp5ly1
devtools/client/inspector/markup/markup.js
--- a/devtools/client/inspector/markup/markup.js
+++ b/devtools/client/inspector/markup/markup.js
@@ -177,17 +177,17 @@ MarkupView.prototype = {
   },
 
   _disableImagePreviewTooltip: function() {
     this.imagePreviewTooltip.stopTogglingOnHover();
   },
 
   _onToolboxPickerHover: function(nodeFront) {
     this.showNode(nodeFront).then(() => {
-      this._showContainerAsHovered(nodeFront);
+      this._showNodeAsHovered(nodeFront);
     }, console.error);
   },
 
   /**
    * If the element picker gets canceled, make sure and re-center the view on the
    * current selected element.
    */
   _onToolboxPickerCanceled: function() {
@@ -217,20 +217,20 @@ MarkupView.prototype = {
     while (!target.container) {
       if (target.tagName.toLowerCase() === "body") {
         return;
       }
       target = target.parentNode;
     }
 
     let container = target.container;
-    if (this._hoveredNode !== container.node) {
+    if (this._hoveredContainer !== container) {
       this._showBoxModel(container.node);
     }
-    this._showContainerAsHovered(container.node);
+    this._showContainerAsHovered(container);
 
     this.emit("node-hover");
   },
 
   /**
    * If focus is moved outside of the markup view document and there is a
    * selected container, make its contents not focusable by a keyboard.
    */
@@ -366,35 +366,40 @@ MarkupView.prototype = {
 
     this.indicateDropTarget(null);
     this.indicateDragTarget(null);
     if (this._autoScrollAnimationFrame) {
       this.win.cancelAnimationFrame(this._autoScrollAnimationFrame);
     }
   },
 
-  _hoveredNode: null,
+  _hoveredContainer: null,
 
   /**
    * Show a NodeFront's container as being hovered
    *
    * @param  {NodeFront} nodeFront
    *         The node to show as hovered
    */
-  _showContainerAsHovered: function(nodeFront) {
-    if (this._hoveredNode === nodeFront) {
+  _showNodeAsHovered: function(nodeFront) {
+    let container = this.getContainer(nodeFront);
+    this._showContainerAsHovered(container);
+  },
+
+  _showContainerAsHovered: function(container) {
+    if (this._hoveredContainer === container) {
       return;
     }
 
-    if (this._hoveredNode) {
-      this.getContainer(this._hoveredNode).hovered = false;
+    if (this._hoveredContainer) {
+      this._hoveredContainer.hovered = false;
     }
 
-    this.getContainer(nodeFront).hovered = true;
-    this._hoveredNode = nodeFront;
+    container.hovered = true;
+    this._hoveredContainer = container;
     // Emit an event that the container view is actually hovered now, as this function
     // can be called by an asynchronous caller.
     this.emit("showcontainerhovered");
   },
 
   _onMouseOut: function(event) {
     // Emulate mouseleave by skipping any relatedTarget inside the markup-view.
     if (this._elt.contains(event.relatedTarget)) {
@@ -404,20 +409,20 @@ MarkupView.prototype = {
     if (this._autoScrollAnimationFrame) {
       this.win.cancelAnimationFrame(this._autoScrollAnimationFrame);
     }
     if (this.isDragging) {
       return;
     }
 
     this._hideBoxModel(true);
-    if (this._hoveredNode) {
-      this.getContainer(this._hoveredNode).hovered = false;
+    if (this._hoveredContainer) {
+      this._hoveredContainer.hovered = false;
     }
-    this._hoveredNode = null;
+    this._hoveredContainer = null;
 
     this.emit("leave");
   },
 
   /**
    * Show the box model highlighter on a given node front
    *
    * @param  {NodeFront} nodeFront
@@ -553,34 +558,36 @@ MarkupView.prototype = {
   _shouldNewSelectionBeHighlighted: function() {
     let reason = this.inspector.selection.reason;
     let unwantedReasons = [
       "inspector-open",
       "navigateaway",
       "nodeselected",
       "test"
     ];
-    let isHighlight = this._hoveredNode === this.inspector.selection.nodeFront;
+
+    let isHighlight = this._hoveredContainer &&
+      (this._hoveredContainer.node === this.inspector.selection.nodeFront);
     return !isHighlight && reason && !unwantedReasons.includes(reason);
   },
 
   /**
    * React to new-node-front selection events.
    * Highlights the node if needed, and make sure it is shown and selected in
    * the view.
    */
   _onNewSelection: function() {
     let selection = this.inspector.selection;
 
     if (this.htmlEditor) {
       this.htmlEditor.hide();
     }
-    if (this._hoveredNode && this._hoveredNode !== selection.nodeFront) {
-      this.getContainer(this._hoveredNode).hovered = false;
-      this._hoveredNode = null;
+    if (this._hoveredContainer && this._hoveredContainer.node !== selection.nodeFront) {
+      this._hoveredContainer.hovered = false;
+      this._hoveredContainer = null;
     }
 
     if (!selection.isNode()) {
       this.unmarkSelectedNode();
       return;
     }
 
     let done = this.inspector.updating("markup-view");
@@ -1772,17 +1779,17 @@ MarkupView.prototype = {
     if (this._destroyer) {
       return this._destroyer;
     }
 
     this._destroyer = promise.resolve();
 
     this._clearBriefBoxModelTimer();
 
-    this._hoveredNode = null;
+    this._hoveredContainer = null;
 
     if (this.htmlEditor) {
       this.htmlEditor.destroy();
       this.htmlEditor = null;
     }
 
     this.undo.destroy();
     this.undo = null;