Web Inspector: TimelineViews should be displayed in a ContentViewCont…

…ainer

https://bugs.webkit.org/show_bug.cgi?id=142290

Reviewed by Timothy Hatcher.

TimelineRecordingContentView has a bunch of logic to manage the currently visible TimelineView.
This could be delegated to a ContentViewContainer to simplify the logic. It also opens the possibility
for other views to be displayed beneath the timeline overview graphs when it makes sense to do so.

In order to be displayable in the container, TimelineView and its subclasses have been upgraded to
be ContentView subclasses. This also reduces some code duplication for basic view management.

* UserInterface/Views/ContentView.js:
(WebInspector.ContentView): Move base class instantiation pattern from TimelineView to here.
(WebInspector.ContentView.isViewable):
* UserInterface/Views/LayoutTimelineView.js: Use ContentView events and base methods.
(WebInspector.LayoutTimelineView.prototype.shown):
(WebInspector.LayoutTimelineView.prototype.hidden):
(WebInspector.LayoutTimelineView.prototype._dataGridNodeSelected):
* UserInterface/Views/NetworkTimelineView.js: Use ContentView events and base methods.
(WebInspector.NetworkTimelineView.prototype.shown):
(WebInspector.NetworkTimelineView.prototype.hidden):
(WebInspector.NetworkTimelineView.prototype._dataGridNodeSelected):
* UserInterface/Views/OverviewTimelineView.js: Use ContentView events and base methods.
(WebInspector.OverviewTimelineView.prototype.shown):
(WebInspector.OverviewTimelineView.prototype._dataGridNodeSelected):
(WebInspector.OverviewTimelineView.prototype._treeElementSelected):
* UserInterface/Views/ScriptTimelineView.js: Use ContentView events and base methods.
(WebInspector.ScriptTimelineView.prototype.shown):
(WebInspector.ScriptTimelineView.prototype.hidden):
(WebInspector.ScriptTimelineView.prototype._dataGridNodeSelected):
* UserInterface/Views/TimelineRecordingContentView.css: Use WebInspector.ContentViewContainer class.
(.content-view.timeline-recording > .content-view-container):
(.content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid td):
(.content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid table.data):
(.content-view.timeline-recording > .view-container): Deleted.
(.content-view.timeline-recording > .view-container > .timeline-view > .data-grid td): Deleted.
(.content-view.timeline-recording > .view-container > .timeline-view > .data-grid table.data): Deleted.

* UserInterface/Views/TimelineRecordingContentView.js:
Many of the changes here mirror the implementation of ClusterContentView. Searching is disabled since
none of the timeline views are currently searchable using ContentViewContainer's full-text search.

In cases where we update the current timeline view, the currentTimelineView accessor returns the
content view if a TimelineView is shown in the content view container, otherwise null.

(WebInspector.TimelineRecordingContentView):
(WebInspector.TimelineRecordingContentView.prototype.showOverviewTimelineView):
(WebInspector.TimelineRecordingContentView.prototype.showTimelineViewForTimeline):
(WebInspector.TimelineRecordingContentView.prototype.get supplementalRepresentedObjects):
(WebInspector.TimelineRecordingContentView.prototype.get handleCopyEvent):
(WebInspector.TimelineRecordingContentView.prototype.get supportsSave):
(WebInspector.TimelineRecordingContentView.prototype.get saveData):
(WebInspector.TimelineRecordingContentView.prototype.get currentTimelineView):
(WebInspector.TimelineRecordingContentView.prototype.shown):
(WebInspector.TimelineRecordingContentView.prototype.hidden):
(WebInspector.TimelineRecordingContentView.prototype.closed):
(WebInspector.TimelineRecordingContentView.prototype.canGoBack):
(WebInspector.TimelineRecordingContentView.prototype.canGoForward):
(WebInspector.TimelineRecordingContentView.prototype.goBack):
(WebInspector.TimelineRecordingContentView.prototype.goForward):
(WebInspector.TimelineRecordingContentView.prototype.updateLayout):
(WebInspector.TimelineRecordingContentView.prototype.saveToCookie):
(WebInspector.TimelineRecordingContentView.prototype.get filterDidChange):
(WebInspector.TimelineRecordingContentView.prototype._currentContentViewDidChange):
(WebInspector.TimelineRecordingContentView.prototype._contentViewSelectionPathComponentDidChange):
(WebInspector.TimelineRecordingContentView.prototype._contentViewSupplementalRepresentedObjectsDidChange):
(WebInspector.TimelineRecordingContentView.prototype._updateTimes):
(WebInspector.TimelineRecordingContentView.prototype._timelineRemoved):
(WebInspector.TimelineRecordingContentView.prototype._timelineCountChanged):
(WebInspector.TimelineRecordingContentView.prototype._timeRangeSelectionChanged):
(WebInspector.TimelineRecordingContentView.prototype.filterDidChange): Deleted.
(WebInspector.TimelineRecordingContentView.prototype._timelineViewSelectionPathComponentsDidChange): Deleted.
(WebInspector.TimelineRecordingContentView.prototype._showTimelineView): Deleted.
* UserInterface/Views/TimelineView.js: Remove duplicated functionality and use ContentView equivalents instead.
(WebInspector.TimelineView):
(WebInspector.TimelineView.prototype.filterUpdated):
(WebInspector.TimelineView.prototype.needsLayout):
(WebInspector.TimelineView.prototype.get representedObject): Deleted.
(WebInspector.TimelineView.prototype.get visible): Deleted.
(WebInspector.TimelineView.prototype.shown): Deleted.
(WebInspector.TimelineView.prototype.hidden): Deleted.


Canonical link: https://commits.webkit.org/160327@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@181011 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog

@@ -1,3 +1,88 @@
+2015-03-04  Brian J. Burg  <burg@cs.washington.edu>
+
+        Web Inspector: TimelineViews should be displayed in a ContentViewContainer
+        https://bugs.webkit.org/show_bug.cgi?id=142290
+
+        Reviewed by Timothy Hatcher.
+
+        TimelineRecordingContentView has a bunch of logic to manage the currently visible TimelineView.
+        This could be delegated to a ContentViewContainer to simplify the logic. It also opens the possibility
+        for other views to be displayed beneath the timeline overview graphs when it makes sense to do so.
+
+        In order to be displayable in the container, TimelineView and its subclasses have been upgraded to
+        be ContentView subclasses. This also reduces some code duplication for basic view management.
+
+        * UserInterface/Views/ContentView.js:
+        (WebInspector.ContentView): Move base class instantiation pattern from TimelineView to here.
+        (WebInspector.ContentView.isViewable):
+        * UserInterface/Views/LayoutTimelineView.js: Use ContentView events and base methods.
+        (WebInspector.LayoutTimelineView.prototype.shown):
+        (WebInspector.LayoutTimelineView.prototype.hidden):
+        (WebInspector.LayoutTimelineView.prototype._dataGridNodeSelected):
+        * UserInterface/Views/NetworkTimelineView.js: Use ContentView events and base methods.
+        (WebInspector.NetworkTimelineView.prototype.shown):
+        (WebInspector.NetworkTimelineView.prototype.hidden):
+        (WebInspector.NetworkTimelineView.prototype._dataGridNodeSelected):
+        * UserInterface/Views/OverviewTimelineView.js: Use ContentView events and base methods.
+        (WebInspector.OverviewTimelineView.prototype.shown):
+        (WebInspector.OverviewTimelineView.prototype._dataGridNodeSelected):
+        (WebInspector.OverviewTimelineView.prototype._treeElementSelected):
+        * UserInterface/Views/ScriptTimelineView.js: Use ContentView events and base methods.
+        (WebInspector.ScriptTimelineView.prototype.shown):
+        (WebInspector.ScriptTimelineView.prototype.hidden):
+        (WebInspector.ScriptTimelineView.prototype._dataGridNodeSelected):
+        * UserInterface/Views/TimelineRecordingContentView.css: Use WebInspector.ContentViewContainer class.
+        (.content-view.timeline-recording > .content-view-container):
+        (.content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid td):
+        (.content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid table.data):
+        (.content-view.timeline-recording > .view-container): Deleted.
+        (.content-view.timeline-recording > .view-container > .timeline-view > .data-grid td): Deleted.
+        (.content-view.timeline-recording > .view-container > .timeline-view > .data-grid table.data): Deleted.
+
+        * UserInterface/Views/TimelineRecordingContentView.js:
+        Many of the changes here mirror the implementation of ClusterContentView. Searching is disabled since
+        none of the timeline views are currently searchable using ContentViewContainer's full-text search.
+
+        In cases where we update the current timeline view, the currentTimelineView accessor returns the
+        content view if a TimelineView is shown in the content view container, otherwise null.
+
+        (WebInspector.TimelineRecordingContentView):
+        (WebInspector.TimelineRecordingContentView.prototype.showOverviewTimelineView):
+        (WebInspector.TimelineRecordingContentView.prototype.showTimelineViewForTimeline):
+        (WebInspector.TimelineRecordingContentView.prototype.get supplementalRepresentedObjects):
+        (WebInspector.TimelineRecordingContentView.prototype.get handleCopyEvent):
+        (WebInspector.TimelineRecordingContentView.prototype.get supportsSave):
+        (WebInspector.TimelineRecordingContentView.prototype.get saveData):
+        (WebInspector.TimelineRecordingContentView.prototype.get currentTimelineView):
+        (WebInspector.TimelineRecordingContentView.prototype.shown):
+        (WebInspector.TimelineRecordingContentView.prototype.hidden):
+        (WebInspector.TimelineRecordingContentView.prototype.closed):
+        (WebInspector.TimelineRecordingContentView.prototype.canGoBack):
+        (WebInspector.TimelineRecordingContentView.prototype.canGoForward):
+        (WebInspector.TimelineRecordingContentView.prototype.goBack):
+        (WebInspector.TimelineRecordingContentView.prototype.goForward):
+        (WebInspector.TimelineRecordingContentView.prototype.updateLayout):
+        (WebInspector.TimelineRecordingContentView.prototype.saveToCookie):
+        (WebInspector.TimelineRecordingContentView.prototype.get filterDidChange):
+        (WebInspector.TimelineRecordingContentView.prototype._currentContentViewDidChange):
+        (WebInspector.TimelineRecordingContentView.prototype._contentViewSelectionPathComponentDidChange):
+        (WebInspector.TimelineRecordingContentView.prototype._contentViewSupplementalRepresentedObjectsDidChange):
+        (WebInspector.TimelineRecordingContentView.prototype._updateTimes):
+        (WebInspector.TimelineRecordingContentView.prototype._timelineRemoved):
+        (WebInspector.TimelineRecordingContentView.prototype._timelineCountChanged):
+        (WebInspector.TimelineRecordingContentView.prototype._timeRangeSelectionChanged):
+        (WebInspector.TimelineRecordingContentView.prototype.filterDidChange): Deleted.
+        (WebInspector.TimelineRecordingContentView.prototype._timelineViewSelectionPathComponentsDidChange): Deleted.
+        (WebInspector.TimelineRecordingContentView.prototype._showTimelineView): Deleted.
+        * UserInterface/Views/TimelineView.js: Remove duplicated functionality and use ContentView equivalents instead.
+        (WebInspector.TimelineView):
+        (WebInspector.TimelineView.prototype.filterUpdated):
+        (WebInspector.TimelineView.prototype.needsLayout):
+        (WebInspector.TimelineView.prototype.get representedObject): Deleted.
+        (WebInspector.TimelineView.prototype.get visible): Deleted.
+        (WebInspector.TimelineView.prototype.shown): Deleted.
+        (WebInspector.TimelineView.prototype.hidden): Deleted.
+
 2015-03-03  Brian J. Burg  <burg@cs.washington.edu>
 
         Web Inspector: selecting overview timeline tree elements without source locations doesn't update selection components

Source/WebInspectorUI/UserInterface/Views/ContentView.js

@@ -42,6 +42,18 @@ WebInspector.ContentView = function(representedObject)
         if (representedObject instanceof WebInspector.TimelineRecording)
             return new WebInspector.TimelineRecordingContentView(representedObject);
 
+        if (representedObject instanceof WebInspector.Timeline) {
+            var timelineType = representedObject.type;
+            if (timelineType === WebInspector.TimelineRecord.Type.Network)
+                return new WebInspector.NetworkTimelineView(representedObject);
+
+            if (timelineType === WebInspector.TimelineRecord.Type.Layout)
+                return new WebInspector.LayoutTimelineView(representedObject);
+
+            if (timelineType === WebInspector.TimelineRecord.Type.Script)
+                return new WebInspector.ScriptTimelineView(representedObject);
+        }
+
         if (representedObject instanceof WebInspector.DOMStorageObject)
             return new WebInspector.DOMStorageContentView(representedObject);
 
@@ -106,6 +118,8 @@ WebInspector.ContentView.isViewable = function(representedObject)
         return true;
     if (representedObject instanceof WebInspector.TimelineRecording)
         return true;
+    if (representedObject instanceof WebInspector.Timeline)
+        return true;
     if (representedObject instanceof WebInspector.DOMStorageObject)
         return true;
     if (representedObject instanceof WebInspector.CookieStorageObject)

Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js

@@ -109,7 +109,7 @@ WebInspector.LayoutTimelineView.prototype = {
 
     shown: function()
     {
-        WebInspector.TimelineView.prototype.shown.call(this);
+        WebInspector.ContentView.prototype.shown.call(this);
 
         this._updateHighlight();
 
@@ -122,7 +122,7 @@ WebInspector.LayoutTimelineView.prototype = {
 
         this._dataGrid.hidden();
 
-        WebInspector.TimelineView.prototype.hidden.call(this);
+        WebInspector.ContentView.prototype.hidden.call(this);
     },
 
     filterDidChange: function()
@@ -199,7 +199,7 @@ WebInspector.LayoutTimelineView.prototype = {
 
     _dataGridNodeSelected: function(event)
     {
-        this.dispatchEventToListeners(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange);
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
     },
 
     _treeElementDeselected: function(treeElement)

Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js

@@ -115,7 +115,7 @@ WebInspector.NetworkTimelineView.prototype = {
 
     shown: function()
     {
-        WebInspector.TimelineView.prototype.shown.call(this);
+        WebInspector.ContentView.prototype.shown.call(this);
 
         this._dataGrid.shown();
     },
@@ -124,7 +124,7 @@ WebInspector.NetworkTimelineView.prototype = {
     {
         this._dataGrid.hidden();
 
-        WebInspector.TimelineView.prototype.hidden.call(this);
+        WebInspector.ContentView.prototype.hidden.call(this);
     },
 
     updateLayout: function()
@@ -197,7 +197,7 @@ WebInspector.NetworkTimelineView.prototype = {
 
     _dataGridNodeSelected: function(event)
     {
-        this.dispatchEventToListeners(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange);
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
     },
 
     _treeElementDeselected: function(treeElement)

Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.js

@@ -83,7 +83,7 @@ WebInspector.OverviewTimelineView.prototype = {
 
     shown: function()
     {
-        WebInspector.TimelineView.prototype.shown.call(this);
+        WebInspector.ContentView.prototype.shown.call(this);
 
         this._treeOutlineDataGridSynchronizer.synchronize();
     },
@@ -322,7 +322,7 @@ WebInspector.OverviewTimelineView.prototype = {
 
     _dataGridNodeSelected: function(event)
     {
-        this.dispatchEventToListeners(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange);
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
     },
 
     _treeElementDeselected: function(treeElement)
@@ -352,7 +352,7 @@ WebInspector.OverviewTimelineView.prototype = {
 
         if (!treeElement.sourceCodeTimeline.sourceCodeLocation) {
             WebInspector.timelineSidebarPanel.showTimelineOverview();
-            this.dispatchEventToListeners(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange);
+            this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
             return;
         }
 

Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.js

@@ -91,7 +91,7 @@ WebInspector.ScriptTimelineView.prototype = {
 
     shown: function()
     {
-        WebInspector.TimelineView.prototype.shown.call(this);
+        WebInspector.ContentView.prototype.shown.call(this);
 
         this._dataGrid.shown();
     },
@@ -100,7 +100,7 @@ WebInspector.ScriptTimelineView.prototype = {
     {
         this._dataGrid.hidden();
 
-        WebInspector.TimelineView.prototype.hidden.call(this);
+        WebInspector.ContentView.prototype.hidden.call(this);
     },
 
     updateLayout: function()
@@ -243,7 +243,7 @@ WebInspector.ScriptTimelineView.prototype = {
 
     _dataGridNodeSelected: function(event)
     {
-        this.dispatchEventToListeners(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange);
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
     },
 
     _treeElementDeselected: function(treeElement)

Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css

@@ -30,20 +30,20 @@
     right: 0;
 }
 
-.content-view.timeline-recording > .view-container {
+.content-view.timeline-recording > .content-view-container {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     overflow: hidden;
 }
 
-.content-view.timeline-recording > .view-container > .timeline-view > .data-grid td {
+.content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid td {
     height: 16px;
     line-height: 16px;
 }
 
-.content-view.timeline-recording > .view-container > .timeline-view > .data-grid table.data {
+.content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid table.data {
     background-image: linear-gradient(to bottom, white, white 50%, rgb(243, 243, 243) 50%, rgb(243, 243, 243));
     background-size: 100% 40px;
 }