Web Inspector: selecting Paint timeline records from sidebar does not trigger preview...
authorjoepeck@webkit.org <joepeck@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 16 Jan 2015 01:00:23 +0000 (01:00 +0000)
committerjoepeck@webkit.org <joepeck@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 16 Jan 2015 01:00:23 +0000 (01:00 +0000)
https://bugs.webkit.org/show_bug.cgi?id=139151

Reviewed by Brian Burg.

* UserInterface/Views/LayoutTimelineDataGrid.js:
(WebInspector.LayoutTimelineDataGrid):
(WebInspector.LayoutTimelineDataGrid.prototype.callFramePopoverAnchorElement):
(WebInspector.LayoutTimelineDataGrid.prototype.reset): Deleted.
(WebInspector.LayoutTimelineDataGrid.prototype.hidden): Deleted.
(WebInspector.LayoutTimelineDataGrid.prototype._layoutDataGridSelectedNodeChanged): Deleted.
(WebInspector.LayoutTimelineDataGrid.prototype._hideHighlightIfNeeded): Deleted.
Move the node highlight from the datagrid to the timeline view because
we want this to happen on both the Navigation sidebar and the datagrid.

* UserInterface/Views/LayoutTimelineView.js:
(WebInspector.LayoutTimelineView.prototype.shown):
(WebInspector.LayoutTimelineView.prototype.hidden):
(WebInspector.LayoutTimelineView.prototype.filterDidChange):
(WebInspector.LayoutTimelineView.prototype.reset):
(WebInspector.LayoutTimelineView.prototype._treeElementDeselected):
(WebInspector.LayoutTimelineView.prototype._treeElementSelected):
Update the highlight for major view updates.

(WebInspector.LayoutTimelineView.prototype._updateHighlight):
(WebInspector.LayoutTimelineView.prototype._showHighlightForRecord):
(WebInspector.LayoutTimelineView.prototype._hideHighlightIfNeeded):
(WebInspector.LayoutTimelineView.prototype._hoveredOrSelectedRecord):
Show a highlight for what we are hovering, or what is selected.
Note the selected node may not be visible due to filtering.

(WebInspector.LayoutTimelineView.prototype._mouseOverDataGrid):
(WebInspector.LayoutTimelineView.prototype._mouseLeaveDataGrid):
(WebInspector.LayoutTimelineView.prototype._mouseOverTreeOutline):
(WebInspector.LayoutTimelineView.prototype._mouseLeaveTreeOutline):
Update hovered information mousing over the datagrid and tree outline.

* UserInterface/Views/TimelineContentView.js:
(WebInspector.TimelineContentView.prototype.filterDidChange):
* UserInterface/Views/TimelineSidebarPanel.js:
(WebInspector.TimelineSidebarPanel.prototype.updateFilter):
* UserInterface/Views/TimelineView.js:
(WebInspector.TimelineView.prototype.filterDidChange):
Include a "filterDidChange" TimelineView method that gets called after
updateFilter (things like the filter bar or timeline range changes).

* UserInterface/Views/TreeOutline.js:
(TreeOutline.prototype.treeElementFromNode):
(TreeOutline.prototype.treeElementFromPoint):
Provide a helper to get a tree element from an event target.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@178544 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/LayoutTimelineDataGrid.js
Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js
Source/WebInspectorUI/UserInterface/Views/TimelineContentView.js
Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js
Source/WebInspectorUI/UserInterface/Views/TimelineView.js
Source/WebInspectorUI/UserInterface/Views/TreeOutline.js

index df96136..5a6198a 100644 (file)
@@ -1,3 +1,56 @@
+2015-01-15  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Web Inspector: selecting Paint timeline records from sidebar does not trigger preview of paint quad
+        https://bugs.webkit.org/show_bug.cgi?id=139151
+
+        Reviewed by Brian Burg.
+
+        * UserInterface/Views/LayoutTimelineDataGrid.js:
+        (WebInspector.LayoutTimelineDataGrid):
+        (WebInspector.LayoutTimelineDataGrid.prototype.callFramePopoverAnchorElement):
+        (WebInspector.LayoutTimelineDataGrid.prototype.reset): Deleted.
+        (WebInspector.LayoutTimelineDataGrid.prototype.hidden): Deleted.
+        (WebInspector.LayoutTimelineDataGrid.prototype._layoutDataGridSelectedNodeChanged): Deleted.
+        (WebInspector.LayoutTimelineDataGrid.prototype._hideHighlightIfNeeded): Deleted.
+        Move the node highlight from the datagrid to the timeline view because
+        we want this to happen on both the Navigation sidebar and the datagrid.
+
+        * UserInterface/Views/LayoutTimelineView.js:
+        (WebInspector.LayoutTimelineView.prototype.shown):
+        (WebInspector.LayoutTimelineView.prototype.hidden):
+        (WebInspector.LayoutTimelineView.prototype.filterDidChange):
+        (WebInspector.LayoutTimelineView.prototype.reset):
+        (WebInspector.LayoutTimelineView.prototype._treeElementDeselected):
+        (WebInspector.LayoutTimelineView.prototype._treeElementSelected):
+        Update the highlight for major view updates.
+
+        (WebInspector.LayoutTimelineView.prototype._updateHighlight):
+        (WebInspector.LayoutTimelineView.prototype._showHighlightForRecord):
+        (WebInspector.LayoutTimelineView.prototype._hideHighlightIfNeeded):
+        (WebInspector.LayoutTimelineView.prototype._hoveredOrSelectedRecord):
+        Show a highlight for what we are hovering, or what is selected.
+        Note the selected node may not be visible due to filtering.
+
+        (WebInspector.LayoutTimelineView.prototype._mouseOverDataGrid):
+        (WebInspector.LayoutTimelineView.prototype._mouseLeaveDataGrid):
+        (WebInspector.LayoutTimelineView.prototype._mouseOverTreeOutline):
+        (WebInspector.LayoutTimelineView.prototype._mouseLeaveTreeOutline):
+        Update hovered information mousing over the datagrid and tree outline.
+
+        * UserInterface/Views/TimelineContentView.js:
+        (WebInspector.TimelineContentView.prototype.filterDidChange):
+        * UserInterface/Views/TimelineSidebarPanel.js:
+        (WebInspector.TimelineSidebarPanel.prototype.updateFilter):
+        * UserInterface/Views/TimelineView.js:
+        (WebInspector.TimelineView.prototype.filterDidChange):
+        Include a "filterDidChange" TimelineView method that gets called after
+        updateFilter (things like the filter bar or timeline range changes).
+
+        * UserInterface/Views/TreeOutline.js:
+        (TreeOutline.prototype.treeElementFromNode):
+        (TreeOutline.prototype.treeElementFromPoint):
+        Provide a helper to get a tree element from an event target.
+
 2015-01-13  Joseph Pecoraro  <pecoraro@apple.com>
 
         Web Inspector: TextEditor doesn't update when resizing console, white space instead of content
index 35f8277..5fb0942 100644 (file)
 WebInspector.LayoutTimelineDataGrid = function(treeOutline, columns, delegate, editCallback, deleteCallback)
 {
     WebInspector.TimelineDataGrid.call(this, treeOutline, columns, delegate, editCallback, deleteCallback);
-
-    this._showingHighlight = false;
-
-    this.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._layoutDataGridSelectedNodeChanged, this);
 };
 
 WebInspector.LayoutTimelineDataGrid.prototype = {
@@ -37,60 +33,9 @@ WebInspector.LayoutTimelineDataGrid.prototype = {
 
     // Protected
 
-    reset: function()
-    {
-        WebInspector.TimelineDataGrid.prototype.reset.call(this);
-
-        this._hideHighlightIfNeeded();
-    },
-
     callFramePopoverAnchorElement: function()
     {
         return this.selectedNode.elementWithColumnIdentifier("initiatorCallFrame");
-    },
-
-    hidden: function()
-    {
-        WebInspector.TimelineDataGrid.prototype.hidden.call(this);
-
-        this._hideHighlightIfNeeded();
-    },
-
-    // Private
-
-    _layoutDataGridSelectedNodeChanged: function(event)
-    {
-        if (!this.selectedNode) {
-            this._hideHighlightIfNeeded();
-            return;
-        }
-
-        var record = this.selectedNode.record;
-        const contentColor = {r: 111, g: 168, b: 220, a: 0.66};
-        const outlineColor = {r: 255, g: 229, b: 153, a: 0.66};
-
-        var quad = record.quad;
-        if (quad && DOMAgent.highlightQuad) {
-            DOMAgent.highlightQuad(quad.toProtocol(), contentColor, outlineColor);
-            this._showingHighlight = true;
-            return;
-        }
-
-        // COMPATIBILITY (iOS 6): iOS 6 included Rect information instead of Quad information. Fallback to highlighting the rect.
-        var rect = record.rect;
-        if (rect) {
-            DOMAgent.highlightRect(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height, contentColor, outlineColor);
-            this._showingHighlight = true;
-            return;
-        }
-    },
-
-    _hideHighlightIfNeeded: function()
-    {
-        if (this._showingHighlight) {
-            DOMAgent.hideHighlight();
-            this._showingHighlight = false;
-        }
     }
 };
 
index d48635a..5de64d8 100644 (file)
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2014 Apple Inc. All rights reserved.
+ * Copyright (C) 2014, 2015 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
@@ -75,6 +75,16 @@ WebInspector.LayoutTimelineView = function(timeline)
     this._dataGrid.sortColumnIdentifier = "startTime";
     this._dataGrid.sortOrder = WebInspector.DataGrid.SortOrder.Ascending;
 
+    this._hoveredTreeElement = null;
+    this._hoveredDataGridNode = null;
+    this._showingHighlight = false;
+    this._showingHighlightForRecord = null;
+
+    this._dataGrid.element.addEventListener("mouseover", this._mouseOverDataGrid.bind(this));
+    this._dataGrid.element.addEventListener("mouseleave", this._mouseLeaveDataGrid.bind(this));
+    this.navigationSidebarTreeOutline.element.addEventListener("mouseover", this._mouseOverTreeOutline.bind(this));
+    this.navigationSidebarTreeOutline.element.addEventListener("mouseleave", this._mouseLeaveTreeOutline.bind(this));
+
     this.element.classList.add(WebInspector.LayoutTimelineView.StyleClassName);
     this.element.appendChild(this._dataGrid.element);
 
@@ -101,16 +111,27 @@ WebInspector.LayoutTimelineView.prototype = {
     {
         WebInspector.TimelineView.prototype.shown.call(this);
 
+        this._updateHighlight();
+
         this._dataGrid.shown();
     },
 
     hidden: function()
     {
+        this._hideHighlightIfNeeded();
+
         this._dataGrid.hidden();
 
         WebInspector.TimelineView.prototype.hidden.call(this);
     },
 
+    filterDidChange: function()
+    {
+        WebInspector.TimelineView.prototype.filterDidChange.call(this);
+
+        this._updateHighlight();
+    },
+
     updateLayout: function()
     {
         WebInspector.TimelineView.prototype.updateLayout.call(this);
@@ -129,6 +150,8 @@ WebInspector.LayoutTimelineView.prototype = {
     {
         WebInspector.TimelineView.prototype.reset.call(this);
 
+        this._hideHighlightIfNeeded();
+
         this._dataGrid.reset();
     },
 
@@ -183,6 +206,8 @@ WebInspector.LayoutTimelineView.prototype = {
     {
         if (treeElement.status)
             treeElement.status = "";
+
+        this._updateHighlight();
     },
 
     _treeElementSelected: function(treeElement, selectedByUser)
@@ -201,6 +226,8 @@ WebInspector.LayoutTimelineView.prototype = {
             return;
         }
 
+        this._updateHighlight();
+
         if (!treeElement.record.sourceCodeLocation) {
             WebInspector.timelineSidebarPanel.showTimelineViewForType(WebInspector.TimelineRecord.Type.Layout);
             return;
@@ -229,5 +256,107 @@ WebInspector.LayoutTimelineView.prototype = {
     {
         this.navigationSidebarTreeOutline.selectedTreeElement.deselect();
         WebInspector.timelineSidebarPanel.showTimelineViewForType(WebInspector.TimelineRecord.Type.Layout);
+    },
+
+    _updateHighlight: function()
+    {
+        var record = this._hoveredOrSelectedRecord();
+        if (!record) {
+            this._hideHighlightIfNeeded();
+            return;
+        }
+
+        this._showHighlightForRecord(record);
+    },
+
+    _showHighlightForRecord: function(record)
+    {
+        if (this._showingHighlightForRecord === record)
+            return;
+
+        this._showingHighlightForRecord = record;
+
+        const contentColor = {r: 111, g: 168, b: 220, a: 0.66};
+        const outlineColor = {r: 255, g: 229, b: 153, a: 0.66};
+
+        var quad = record.quad;
+        if (quad && DOMAgent.highlightQuad) {
+            DOMAgent.highlightQuad(quad.toProtocol(), contentColor, outlineColor);
+            this._showingHighlight = true;
+            return;
+        }
+
+        // COMPATIBILITY (iOS 6): iOS 6 included Rect information instead of Quad information. Fallback to highlighting the rect.
+        var rect = record.rect;
+        if (rect) {
+            DOMAgent.highlightRect(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height, contentColor, outlineColor);
+            this._showingHighlight = true;
+            return;
+        }
+
+        // This record doesn't have a highlight, so hide any existing highlight.
+        if (this._showingHighlight) {
+            this._showingHighlight = false;
+            DOMAgent.hideHighlight();
+        }
+    },
+
+    _hideHighlightIfNeeded: function()
+    {
+        this._showingHighlightForRecord = null;
+
+        if (this._showingHighlight) {
+            this._showingHighlight = false;
+            DOMAgent.hideHighlight();
+        }
+    },
+
+    _hoveredOrSelectedRecord: function()
+    {
+        if (this._hoveredDataGridNode)
+            return this._hoveredDataGridNode.record;
+
+        if (this._hoveredTreeElement)
+            return this._hoveredTreeElement.record;
+
+        if (this._dataGrid.selectedNode) {
+            var treeElement = this._dataGrid.treeElementForDataGridNode(this._dataGrid.selectedNode);
+            if (treeElement.revealed())
+                return this._dataGrid.selectedNode.record;
+        }
+
+        return null;
+    },
+
+    _mouseOverDataGrid: function(event)
+    {
+        var hoveredDataGridNode = this._dataGrid.dataGridNodeFromNode(event.target);
+        if (!hoveredDataGridNode)
+            return;
+
+        this._hoveredDataGridNode = hoveredDataGridNode;
+        this._updateHighlight();
+    },
+
+    _mouseLeaveDataGrid: function(event)
+    {
+        this._hoveredDataGridNode = null;
+        this._updateHighlight();
+    },
+
+    _mouseOverTreeOutline: function(event)
+    {
+        var hoveredTreeElement = this.navigationSidebarTreeOutline.treeElementFromNode(event.target);
+        if (!hoveredTreeElement)
+            return;
+
+        this._hoveredTreeElement = hoveredTreeElement;
+        this._updateHighlight();
+    },
+
+    _mouseLeaveTreeOutline: function(event)
+    {
+        this._hoveredTreeElement = null;
+        this._updateHighlight();
     }
 };
index 37f3e02..0d4a2ed 100644 (file)
@@ -179,6 +179,14 @@ WebInspector.TimelineContentView.prototype = {
         this._currentTimelineView.hidden();
     },
 
+    filterDidChange: function()
+    {
+        if (!this._currentTimelineView)
+            return;
+
+        this._currentTimelineView.filterDidChange();
+    },
+
     updateLayout: function()
     {
         this._timelineOverview.updateLayoutForResize();
index c57add6..4c70f7b 100644 (file)
@@ -283,6 +283,13 @@ WebInspector.TimelineSidebarPanel.prototype = {
 
     // Protected
 
+    updateFilter: function()
+    {
+        WebInspector.NavigationSidebarPanel.prototype.updateFilter.call(this);
+
+        this._activeContentView.filterDidChange();
+    },
+
     hasCustomFilters: function()
     {
         return true;
index 79feb17..e799592 100644 (file)
@@ -194,6 +194,11 @@ WebInspector.TimelineView.prototype = {
         this._visible = false;
     },
 
+    filterDidChange: function()
+    {
+        // Implemented by sub-classes if needed.
+    },
+
     matchTreeElementAgainstCustomFilters: function(treeElement)
     {
         // Implemented by sub-classes if needed.
index 595ee83..f54e3ab 100644 (file)
@@ -364,16 +364,21 @@ TreeOutline.prototype._treeElementDidChange = function(treeElement)
         this.onchange(treeElement);
 };
 
+TreeOutline.prototype.treeElementFromNode = function(node)
+{
+    var listNode = node.enclosingNodeOrSelfWithNodeNameInArray(["ol", "li"]);
+    if (listNode)
+        return listNode.parentTreeElement || listNode.treeElement;
+    return null;
+};
+
 TreeOutline.prototype.treeElementFromPoint = function(x, y)
 {
     var node = this._childrenListNode.ownerDocument.elementFromPoint(x, y);
     if (!node)
         return null;
 
-    var listNode = node.enclosingNodeOrSelfWithNodeNameInArray(["ol", "li"]);
-    if (listNode)
-        return listNode.parentTreeElement || listNode.treeElement;
-    return null;
+    return this.treeElementFromNode(node);
 };
 
 TreeOutline.prototype._treeKeyDown = function(event)