DevTools: better visual feedback for hovered objects is Layers3DView

- rename WebInspector.Layers3DView.ActiveObject to ...Selection;
- introduce proper constructors and isEqual methods for Selection;
- generalize hover/selection handling logic for different objects;
- make hovered (but not selected) object bluish

Review URL: https://codereview.chromium.org/711423002

git-svn-id: svn://svn.chromium.org/blink/trunk@185203 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/LayoutTests/inspector/layers/layers-3d-view-hit-testing.html

@@ -5,6 +5,7 @@
 <script>
 function test()
 {
+    setTimeout(InspectorTest.completeTest.bind(InspectorTest), 4000);
     var contentRoot;
     var layers;
     var rootOffsetXInPixels, rootOffsetYInPixels, rootHeightInPixels, rootWidthInPixels;
@@ -53,7 +54,7 @@ function test()
         function checkLayer(layerInfo)
         {
             var l3dview = WebInspector.panels.layers._layers3DView;
-            if (l3dview._lastActiveObject[type] && layerInfo.layer.id() === l3dview._lastActiveObject[type].layer.id())
+            if (l3dview._lastSelection[type] && layerInfo.layer.id() === l3dview._lastSelection[type].layer.id())
                 outlined = layerInfo.name;
         }
 

third_party/WebKit/Source/devtools/front_end/layers/LayersPanel.js

@@ -163,8 +163,8 @@ WebInspector.LayersPanel.prototype = {
      */
     _onObjectSelected: function(event)
     {
-        var activeObject = /** @type {!WebInspector.Layers3DView.ActiveObject} */ (event.data);
-        this._selectObject(activeObject);
+        var selection = /** @type {!WebInspector.Layers3DView.Selection} */ (event.data);
+        this._selectObject(selection);
     },
 
     /**
@@ -172,8 +172,8 @@ WebInspector.LayersPanel.prototype = {
      */
     _onObjectHovered: function(event)
     {
-        var activeObject = /** @type {!WebInspector.Layers3DView.ActiveObject} */ (event.data);
-        this._hoverObject(activeObject);
+        var selection = /** @type {!WebInspector.Layers3DView.Selection} */ (event.data);
+        this._hoverObject(selection);
     },
 
     /**
@@ -187,40 +187,40 @@ WebInspector.LayersPanel.prototype = {
     },
 
     /**
-     * @param {?WebInspector.Layers3DView.ActiveObject} activeObject
+     * @param {?WebInspector.Layers3DView.Selection} selection
      */
-    _selectObject: function(activeObject)
+    _selectObject: function(selection)
     {
-        var layer = activeObject && activeObject.layer;
-        if (this._currentlySelectedLayer === activeObject)
+        var layer = selection && selection.layer;
+        if (this._currentlySelectedLayer === selection)
             return;
-        this._currentlySelectedLayer = activeObject;
+        this._currentlySelectedLayer = selection;
         var node = layer ? layer.nodeForSelfOrAncestor() : null;
         if (node)
             node.highlightForTwoSeconds();
         else if (this._target)
             this._target.domModel.hideDOMNodeHighlight();
         this._layerTreeOutline.selectLayer(layer);
-        this._layers3DView.selectObject(activeObject);
-        this._layerDetailsView.setObject(activeObject);
+        this._layers3DView.selectObject(selection);
+        this._layerDetailsView.setObject(selection);
     },
 
     /**
-     * @param {?WebInspector.Layers3DView.ActiveObject} activeObject
+     * @param {?WebInspector.Layers3DView.Selection} selection
      */
-    _hoverObject: function(activeObject)
+    _hoverObject: function(selection)
     {
-        var layer = activeObject && activeObject.layer;
-        if (this._currentlyHoveredLayer === activeObject)
+        var layer = selection && selection.layer;
+        if (this._currentlyHoveredLayer === selection)
             return;
-        this._currentlyHoveredLayer = activeObject;
+        this._currentlyHoveredLayer = selection;
         var node = layer ? layer.nodeForSelfOrAncestor() : null;
         if (node)
             node.highlight();
         else if (this._target)
             this._target.domModel.hideDOMNodeHighlight();
         this._layerTreeOutline.hoverLayer(layer);
-        this._layers3DView.hoverObject(activeObject);
+        this._layers3DView.hoverObject(selection);
     },
 
     __proto__: WebInspector.PanelWithSidebarTree.prototype

third_party/WebKit/Source/devtools/front_end/timeline/LayerDetailsView.js

@@ -88,12 +88,12 @@ WebInspector.LayerDetailsView.CompositingReasonDetail = {
 
 WebInspector.LayerDetailsView.prototype = {
     /**
-     * @param {?WebInspector.Layers3DView.ActiveObject} activeObject
+     * @param {?WebInspector.Layers3DView.Selection} selection
      */
-    setObject: function(activeObject)
+    setObject: function(selection)
     {
-        this._layer = activeObject ? activeObject.layer : null;
-        this._scrollRectIndex = activeObject ? activeObject.scrollRectIndex : null;
+        this._layer = selection ? selection.layer : null;
+        this._scrollRectIndex = selection ? selection.scrollRectIndex : null;
         if (this.isShowing())
             this.update();
     },
@@ -112,7 +112,7 @@ WebInspector.LayerDetailsView.prototype = {
     {
         if (event.which !== 1)
             return;
-        this.dispatchEventToListeners(WebInspector.LayerDetailsView.Events.ObjectSelected, {layer: this._layer, scrollRectIndex: index});
+        this.dispatchEventToListeners(WebInspector.LayerDetailsView.Events.ObjectSelected, new WebInspector.Layers3DView.ScrollRectSelection(this._layer, index));
     },
 
     /**

third_party/WebKit/Source/devtools/front_end/timeline/LayerTreeOutline.js

@@ -140,7 +140,8 @@ WebInspector.LayerTreeOutline.prototype = {
         var node = this._treeOutline.treeElementFromEvent(event);
         if (node === this._lastHoveredNode)
             return;
-        this.dispatchEventToListeners(WebInspector.LayerTreeOutline.Events.LayerHovered, node && node.representedObject ? {layer: node.representedObject} : null);
+        var selection = node && node.representedObject ? new WebInspector.Layers3DView.LayerSelection(node.representedObject) : null;
+        this.dispatchEventToListeners(WebInspector.LayerTreeOutline.Events.LayerHovered, selection);
     },
 
     /**
@@ -149,7 +150,8 @@ WebInspector.LayerTreeOutline.prototype = {
     _selectedNodeChanged: function(node)
     {
         var layer = /** @type {!WebInspector.Layer} */ (node.representedObject);
-        this.dispatchEventToListeners(WebInspector.LayerTreeOutline.Events.LayerSelected, {layer: layer});
+        var selection = node.representedObject ? new WebInspector.Layers3DView.LayerSelection(node.representedObject) : null;
+        this.dispatchEventToListeners(WebInspector.LayerTreeOutline.Events.LayerSelected, selection);
     },
 
     /**

third_party/WebKit/Source/devtools/front_end/timeline/TimelineLayersView.js

@@ -146,32 +146,32 @@ WebInspector.TimelineLayersView.prototype = {
     },
 
     /**
-     * @param {?WebInspector.Layers3DView.ActiveObject} activeObject
+     * @param {?WebInspector.Layers3DView.Selection} selection
      */
-    _selectObject: function(activeObject)
+    _selectObject: function(selection)
     {
-        var layer = activeObject && activeObject.layer;
-        if (this._currentlySelectedLayer === activeObject)
+        var layer = selection && selection.layer;
+        if (this._currentlySelectedLayer === selection)
             return;
-        this._currentlySelectedLayer = activeObject;
+        this._currentlySelectedLayer = selection;
         this._toggleNodeHighlight(layer ? layer.nodeForSelfOrAncestor() : null);
         this._layerTreeOutline.selectLayer(layer);
-        this._layers3DView.selectObject(activeObject);
-        this._layerDetailsView.setObject(activeObject);
+        this._layers3DView.selectObject(selection);
+        this._layerDetailsView.setObject(selection);
     },
 
     /**
-     * @param {?WebInspector.Layers3DView.ActiveObject} activeObject
+     * @param {?WebInspector.Layers3DView.Selection} selection
      */
-    _hoverObject: function(activeObject)
+    _hoverObject: function(selection)
     {
-        var layer = activeObject && activeObject.layer;
-        if (this._currentlyHoveredLayer === activeObject)
+        var layer = selection && selection.layer;
+        if (this._currentlyHoveredLayer === selection)
             return;
-        this._currentlyHoveredLayer = activeObject;
+        this._currentlyHoveredLayer = selection;
         this._toggleNodeHighlight(layer ? layer.nodeForSelfOrAncestor() : null);
         this._layerTreeOutline.hoverLayer(layer);
-        this._layers3DView.hoverObject(activeObject);
+        this._layers3DView.hoverObject(selection);
     },
 
     /**
@@ -193,8 +193,8 @@ WebInspector.TimelineLayersView.prototype = {
      */
     _onObjectSelected: function(event)
     {
-        var activeObject = /** @type {!WebInspector.Layers3DView.ActiveObject} */ (event.data);
-        this._selectObject(activeObject);
+        var selection = /** @type {!WebInspector.Layers3DView.Selection} */ (event.data);
+        this._selectObject(selection);
     },
 
     /**
@@ -202,8 +202,8 @@ WebInspector.TimelineLayersView.prototype = {
      */
     _onObjectHovered: function(event)
     {
-        var activeObject = /** @type {!WebInspector.Layers3DView.ActiveObject} */ (event.data);
-        this._hoverObject(activeObject);
+        var selection = /** @type {!WebInspector.Layers3DView.Selection} */ (event.data);
+        this._hoverObject(selection);
     },
 
     _disposeTiles: function()