Changeset 181011 in webkit


Ignore:
Timestamp:
Mar 4, 2015 12:24:03 PM (9 years ago)
Author:
Brian Burg
Message:

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.

Location:
trunk/Source/WebInspectorUI
Files:
9 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r180977 r181011  
     12015-03-04  Brian J. Burg  <burg@cs.washington.edu>
     2
     3        Web Inspector: TimelineViews should be displayed in a ContentViewContainer
     4        https://bugs.webkit.org/show_bug.cgi?id=142290
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        TimelineRecordingContentView has a bunch of logic to manage the currently visible TimelineView.
     9        This could be delegated to a ContentViewContainer to simplify the logic. It also opens the possibility
     10        for other views to be displayed beneath the timeline overview graphs when it makes sense to do so.
     11
     12        In order to be displayable in the container, TimelineView and its subclasses have been upgraded to
     13        be ContentView subclasses. This also reduces some code duplication for basic view management.
     14
     15        * UserInterface/Views/ContentView.js:
     16        (WebInspector.ContentView): Move base class instantiation pattern from TimelineView to here.
     17        (WebInspector.ContentView.isViewable):
     18        * UserInterface/Views/LayoutTimelineView.js: Use ContentView events and base methods.
     19        (WebInspector.LayoutTimelineView.prototype.shown):
     20        (WebInspector.LayoutTimelineView.prototype.hidden):
     21        (WebInspector.LayoutTimelineView.prototype._dataGridNodeSelected):
     22        * UserInterface/Views/NetworkTimelineView.js: Use ContentView events and base methods.
     23        (WebInspector.NetworkTimelineView.prototype.shown):
     24        (WebInspector.NetworkTimelineView.prototype.hidden):
     25        (WebInspector.NetworkTimelineView.prototype._dataGridNodeSelected):
     26        * UserInterface/Views/OverviewTimelineView.js: Use ContentView events and base methods.
     27        (WebInspector.OverviewTimelineView.prototype.shown):
     28        (WebInspector.OverviewTimelineView.prototype._dataGridNodeSelected):
     29        (WebInspector.OverviewTimelineView.prototype._treeElementSelected):
     30        * UserInterface/Views/ScriptTimelineView.js: Use ContentView events and base methods.
     31        (WebInspector.ScriptTimelineView.prototype.shown):
     32        (WebInspector.ScriptTimelineView.prototype.hidden):
     33        (WebInspector.ScriptTimelineView.prototype._dataGridNodeSelected):
     34        * UserInterface/Views/TimelineRecordingContentView.css: Use WebInspector.ContentViewContainer class.
     35        (.content-view.timeline-recording > .content-view-container):
     36        (.content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid td):
     37        (.content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid table.data):
     38        (.content-view.timeline-recording > .view-container): Deleted.
     39        (.content-view.timeline-recording > .view-container > .timeline-view > .data-grid td): Deleted.
     40        (.content-view.timeline-recording > .view-container > .timeline-view > .data-grid table.data): Deleted.
     41
     42        * UserInterface/Views/TimelineRecordingContentView.js:
     43        Many of the changes here mirror the implementation of ClusterContentView. Searching is disabled since
     44        none of the timeline views are currently searchable using ContentViewContainer's full-text search.
     45
     46        In cases where we update the current timeline view, the currentTimelineView accessor returns the
     47        content view if a TimelineView is shown in the content view container, otherwise null.
     48
     49        (WebInspector.TimelineRecordingContentView):
     50        (WebInspector.TimelineRecordingContentView.prototype.showOverviewTimelineView):
     51        (WebInspector.TimelineRecordingContentView.prototype.showTimelineViewForTimeline):
     52        (WebInspector.TimelineRecordingContentView.prototype.get supplementalRepresentedObjects):
     53        (WebInspector.TimelineRecordingContentView.prototype.get handleCopyEvent):
     54        (WebInspector.TimelineRecordingContentView.prototype.get supportsSave):
     55        (WebInspector.TimelineRecordingContentView.prototype.get saveData):
     56        (WebInspector.TimelineRecordingContentView.prototype.get currentTimelineView):
     57        (WebInspector.TimelineRecordingContentView.prototype.shown):
     58        (WebInspector.TimelineRecordingContentView.prototype.hidden):
     59        (WebInspector.TimelineRecordingContentView.prototype.closed):
     60        (WebInspector.TimelineRecordingContentView.prototype.canGoBack):
     61        (WebInspector.TimelineRecordingContentView.prototype.canGoForward):
     62        (WebInspector.TimelineRecordingContentView.prototype.goBack):
     63        (WebInspector.TimelineRecordingContentView.prototype.goForward):
     64        (WebInspector.TimelineRecordingContentView.prototype.updateLayout):
     65        (WebInspector.TimelineRecordingContentView.prototype.saveToCookie):
     66        (WebInspector.TimelineRecordingContentView.prototype.get filterDidChange):
     67        (WebInspector.TimelineRecordingContentView.prototype._currentContentViewDidChange):
     68        (WebInspector.TimelineRecordingContentView.prototype._contentViewSelectionPathComponentDidChange):
     69        (WebInspector.TimelineRecordingContentView.prototype._contentViewSupplementalRepresentedObjectsDidChange):
     70        (WebInspector.TimelineRecordingContentView.prototype._updateTimes):
     71        (WebInspector.TimelineRecordingContentView.prototype._timelineRemoved):
     72        (WebInspector.TimelineRecordingContentView.prototype._timelineCountChanged):
     73        (WebInspector.TimelineRecordingContentView.prototype._timeRangeSelectionChanged):
     74        (WebInspector.TimelineRecordingContentView.prototype.filterDidChange): Deleted.
     75        (WebInspector.TimelineRecordingContentView.prototype._timelineViewSelectionPathComponentsDidChange): Deleted.
     76        (WebInspector.TimelineRecordingContentView.prototype._showTimelineView): Deleted.
     77        * UserInterface/Views/TimelineView.js: Remove duplicated functionality and use ContentView equivalents instead.
     78        (WebInspector.TimelineView):
     79        (WebInspector.TimelineView.prototype.filterUpdated):
     80        (WebInspector.TimelineView.prototype.needsLayout):
     81        (WebInspector.TimelineView.prototype.get representedObject): Deleted.
     82        (WebInspector.TimelineView.prototype.get visible): Deleted.
     83        (WebInspector.TimelineView.prototype.shown): Deleted.
     84        (WebInspector.TimelineView.prototype.hidden): Deleted.
     85
    1862015-03-03  Brian J. Burg  <burg@cs.washington.edu>
    287

  • trunk/Source/WebInspectorUI/UserInterface/Views/ContentView.js

    r180001 r181011  
    4343            return new WebInspector.TimelineRecordingContentView(representedObject);
    4444
     45        if (representedObject instanceof WebInspector.Timeline) {
     46            var timelineType = representedObject.type;
     47            if (timelineType === WebInspector.TimelineRecord.Type.Network)
     48                return new WebInspector.NetworkTimelineView(representedObject);
     49
     50            if (timelineType === WebInspector.TimelineRecord.Type.Layout)
     51                return new WebInspector.LayoutTimelineView(representedObject);
     52
     53            if (timelineType === WebInspector.TimelineRecord.Type.Script)
     54                return new WebInspector.ScriptTimelineView(representedObject);
     55        }
     56
    4557        if (representedObject instanceof WebInspector.DOMStorageObject)
    4658            return new WebInspector.DOMStorageContentView(representedObject);
    … …  
    106118        return true;
    107119    if (representedObject instanceof WebInspector.TimelineRecording)
     120        return true;
     121    if (representedObject instanceof WebInspector.Timeline)
    108122        return true;
    109123    if (representedObject instanceof WebInspector.DOMStorageObject)

  • trunk/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js

    r180001 r181011  
    110110    shown: function()
    111111    {
    112         WebInspector.TimelineView.prototype.shown.call(this);
     112        WebInspector.ContentView.prototype.shown.call(this);
    113113
    114114        this._updateHighlight();
    … …  
    123123        this._dataGrid.hidden();
    124124
    125         WebInspector.TimelineView.prototype.hidden.call(this);
     125        WebInspector.ContentView.prototype.hidden.call(this);
    126126    },
    127127
    … …  
    200200    _dataGridNodeSelected: function(event)
    201201    {
    202         this.dispatchEventToListeners(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange);
     202        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
    203203    },
    204204

  • trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js

    r180001 r181011  
    116116    shown: function()
    117117    {
    118         WebInspector.TimelineView.prototype.shown.call(this);
     118        WebInspector.ContentView.prototype.shown.call(this);
    119119
    120120        this._dataGrid.shown();
    … …  
    125125        this._dataGrid.hidden();
    126126
    127         WebInspector.TimelineView.prototype.hidden.call(this);
     127        WebInspector.ContentView.prototype.hidden.call(this);
    128128    },
    129129
    … …  
    198198    _dataGridNodeSelected: function(event)
    199199    {
    200         this.dispatchEventToListeners(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange);
     200        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
    201201    },
    202202

  • trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.js

    r180977 r181011  
    8484    shown: function()
    8585    {
    86         WebInspector.TimelineView.prototype.shown.call(this);
     86        WebInspector.ContentView.prototype.shown.call(this);
    8787
    8888        this._treeOutlineDataGridSynchronizer.synchronize();
    … …  
    323323    _dataGridNodeSelected: function(event)
    324324    {
    325         this.dispatchEventToListeners(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange);
     325        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
    326326    },
    327327
    … …  
    353353        if (!treeElement.sourceCodeTimeline.sourceCodeLocation) {
    354354            WebInspector.timelineSidebarPanel.showTimelineOverview();
    355             this.dispatchEventToListeners(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange);
     355            this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
    356356            return;
    357357        }

  • trunk/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.js

    r180001 r181011  
    9292    shown: function()
    9393    {
    94         WebInspector.TimelineView.prototype.shown.call(this);
     94        WebInspector.ContentView.prototype.shown.call(this);
    9595
    9696        this._dataGrid.shown();
    … …  
    101101        this._dataGrid.hidden();
    102102
    103         WebInspector.TimelineView.prototype.hidden.call(this);
     103        WebInspector.ContentView.prototype.hidden.call(this);
    104104    },
    105105
    … …  
    244244    _dataGridNodeSelected: function(event)
    245245    {
    246         this.dispatchEventToListeners(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange);
     246        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
    247247    },
    248248

  • trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css

    r180001 r181011  
    3131}
    3232
    33 .content-view.timeline-recording > .view-container {
     33.content-view.timeline-recording > .content-view-container {
    3434    position: absolute;
    3535    left: 0;
    … …  
    3939}
    4040
    41 .content-view.timeline-recording > .view-container > .timeline-view > .data-grid td {
     41.content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid td {
    4242    height: 16px;
    4343    line-height: 16px;
    4444}
    4545
    46 .content-view.timeline-recording > .view-container > .timeline-view > .data-grid table.data {
     46.content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid table.data {
    4747    background-image: linear-gradient(to bottom, white, white 50%, rgb(243, 243, 243) 50%, rgb(243, 243, 243));
    4848    background-size: 100% 40px;

  • trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js

    r180001 r181011  
    11/*
    22 * Copyright (C) 2013 Apple Inc. All rights reserved.
     3 * Copyright (C) 2015 University of Washington.
    34 *
    45 * Redistribution and use in source and binary forms, with or without
    … …  
    3637    this.element.appendChild(this._timelineOverview.element);
    3738
    38     this._viewContainerElement = document.createElement("div");
    39     this._viewContainerElement.classList.add(WebInspector.TimelineRecordingContentView.ViewContainerStyleClassName);
    40     this.element.appendChild(this._viewContainerElement);
     39    this._contentViewContainer = new WebInspector.ContentViewContainer();
     40    this._contentViewContainer.addEventListener(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange, this._currentContentViewDidChange, this);
     41    this.element.appendChild(this._contentViewContainer.element);
    4142
    4243    var trashImage;
    … …  
    5556    this._pathComponentMap = new Map;
    5657
    57     this._currentTimelineView = null;
    58     this._currentTimelineViewIdentifier = null;
    59 
    6058    this._updating = false;
    6159    this._currentTime = NaN;
    … …  
    7472    WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Resumed, this._debuggerResumed, this);
    7573
     74    WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.SelectionPathComponentsDidChange, this._contentViewSelectionPathComponentDidChange, this);
     75    WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange, this._contentViewSupplementalRepresentedObjectsDidChange, this);
     76
    7677    for (var timeline of this._recording.timelines.values())
    7778        this._timelineAdded(timeline);
    … …  
    8182
    8283WebInspector.TimelineRecordingContentView.StyleClassName = "timeline-recording";
    83 WebInspector.TimelineRecordingContentView.ViewContainerStyleClassName = "view-container";
    8484
    8585WebInspector.TimelineRecordingContentView.SelectedTimelineTypeCookieKey = "timeline-recording-content-view-selected-timeline-type";
    … …  
    9494    showOverviewTimelineView: function()
    9595    {
    96         this._showTimelineView(this._overviewTimelineView);
     96        this._contentViewContainer.showContentView(this._overviewTimelineView);
    9797    },
    9898
    … …  
    104104            return;
    105105
    106         this._showTimelineView(this._timelineViewMap.get(timeline));
     106        this._contentViewContainer.showContentView(this._timelineViewMap.get(timeline));
    107107    },
    108108
    … …  
    120120    get selectionPathComponents()
    121121    {
    122         var pathComponents = [];
    123         if (this._currentTimelineView.representedObject instanceof WebInspector.Timeline)
    124             pathComponents.push(this._pathComponentMap.get(this._currentTimelineView.representedObject));
    125         pathComponents = pathComponents.concat(this._currentTimelineView.selectionPathComponents || []);
     122        if (!this._contentViewContainer.currentContentView)
     123            return [];
     124
     125        var pathComponents = this._contentViewContainer.currentContentView.selectionPathComponents || [];
     126        var representedObject = this._contentViewContainer.currentContentView.representedObject;
     127        if (representedObject instanceof WebInspector.Timeline)
     128            pathComponents.unshift(this._pathComponentMap.get(representedObject));
    126129        return pathComponents;
    127130    },
    128131
     132    get supplementalRepresentedObjects()
     133    {
     134        if (!this._contentViewContainer.currentContentView)
     135            return [];
     136        return this._contentViewContainer.currentContentView.supplementalRepresentedObjects;
     137    },
     138
    129139    get navigationItems()
    130140    {
    … …  
    132142    },
    133143
     144    get handleCopyEvent()
     145    {
     146        var currentContentView = this._contentViewContainer.currentContentView;
     147        return currentContentView && typeof currentContentView.handleCopyEvent === "function" ? currentContentView.handleCopyEvent.bind(currentContentView) : null;
     148    },
     149
     150    get supportsSave()
     151    {
     152        var currentContentView = this._contentViewContainer.currentContentView;
     153        return currentContentView && currentContentView.supportsSave;
     154    },
     155
     156    get saveData()
     157    {
     158        var currentContentView = this._contentViewContainer.currentContentView;
     159        return currentContentView && currentContentView.saveData || null;
     160    },
     161
    134162    get currentTimelineView()
    135163    {
    136         return this._currentTimelineView;
     164        var contentView = this._contentViewContainer.currentContentView;
     165        return (contentView instanceof WebInspector.TimelineView) ? contentView : null;
    137166    },
    138167
    139168    shown: function()
    140169    {
    141         if (!this._currentTimelineView)
    142             return;
    143 
    144170        this._timelineOverview.shown();
    145         this._currentTimelineView.shown();
     171        this._contentViewContainer.shown();
    146172        this._clearTimelineNavigationItem.enabled = this._recording.isWritable();
    147173
    … …  
    152178    hidden: function()
    153179    {
    154         if (!this._currentTimelineView)
    155             return;
    156 
    157180        this._timelineOverview.hidden();
    158         this._currentTimelineView.hidden();
     181        this._contentViewContainer.hidden();
    159182
    160183        if (this._updating)
    … …  
    162185    },
    163186
    164     filterDidChange: function()
    165     {
    166         if (!this._currentTimelineView)
    167             return;
    168 
    169         this._currentTimelineView.filterDidChange();
     187    closed: function()
     188    {
     189        this._contentViewContainer.closeAllContentViews();
     190
     191        WebInspector.ContentView.removeEventListener(WebInspector.ContentView.Event.SelectionPathComponentsDidChange, this._contentViewSelectionPathComponentDidChange, this);
     192        WebInspector.ContentView.removeEventListener(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange, this._contentViewSupplementalRepresentedObjectsDidChange, this);
     193    },
     194
     195    canGoBack: function()
     196    {
     197        return this._contentViewContainer.canGoBack();
     198    },
     199
     200    canGoForward: function()
     201    {
     202        return this._contentViewContainer.canGoForward();
     203    },
     204
     205    goBack: function()
     206    {
     207        this._contentViewContainer.goBack();
     208    },
     209
     210    goForward: function()
     211    {
     212        this._contentViewContainer.goForward();
    170213    },
    171214
    … …  
    174217        this._timelineOverview.updateLayoutForResize();
    175218
    176         if (!this._currentTimelineView)
    177             return;
    178 
    179         this._currentTimelineView.updateLayout();
     219        var currentContentView = this._contentViewContainer.currentContentView;
     220        if (currentContentView)
     221            currentContentView.updateLayout();
    180222    },
    181223
    … …  
    184226        cookie.type = WebInspector.ContentViewCookieType.Timelines;
    185227
    186         if (!this._currentTimelineView || this._currentTimelineView === this._overviewTimelineView)
     228        var currentContentView = this._contentViewContainer.currentContentView;
     229        if (!currentContentView || currentContentView === this._overviewTimelineView)
    187230            cookie[WebInspector.TimelineRecordingContentView.SelectedTimelineTypeCookieKey] = WebInspector.TimelineRecordingContentView.OverviewTimelineViewCookieValue;
    188         else
    189             cookie[WebInspector.TimelineRecordingContentView.SelectedTimelineTypeCookieKey] = this._currentTimelineView.representedObject.type;
     231        else if (currentContentView.representedObject instanceof WebInspector.Timeline)
     232            cookie[WebInspector.TimelineRecordingContentView.SelectedTimelineTypeCookieKey] = this.currentTimelineView.representedObject.type;
    190233    },
    191234
    … …  
    200243    },
    201244
     245    filterDidChange: function()
     246    {
     247        if (!this.currentTimelineView)
     248            return;
     249
     250        this.currentTimelineView.filterDidChange();
     251    },
     252
    202253    matchTreeElementAgainstCustomFilters: function(treeElement)
    203254    {
    204         if (this._currentTimelineView && !this._currentTimelineView.matchTreeElementAgainstCustomFilters(treeElement))
     255        if (this.currentTimelineView && !this.currentTimelineView.matchTreeElementAgainstCustomFilters(treeElement))
    205256            return false;
    206257
    … …  
    258309    // Private
    259310
     311    _currentContentViewDidChange: function(event)
     312    {
     313        var timelineView = this.currentTimelineView;
     314        if (timelineView) {
     315            WebInspector.timelineSidebarPanel.contentTreeOutline = timelineView.navigationSidebarTreeOutline;
     316            WebInspector.timelineSidebarPanel.contentTreeOutlineLabel = timelineView.navigationSidebarTreeOutlineLabel;
     317
     318            timelineView.startTime = this._timelineOverview.selectionStartTime;
     319            timelineView.endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
     320            timelineView.currentTime = this._currentTime;
     321        }
     322
     323        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
     324        this.dispatchEventToListeners(WebInspector.ContentView.Event.NavigationItemsDidChange);
     325    },
     326
    260327    _pathComponentSelected: function(event)
    261328    {
    … …  
    263330    },
    264331
    265     _timelineViewSelectionPathComponentsDidChange: function()
    266     {
     332    _contentViewSelectionPathComponentDidChange: function(event)
     333    {
     334        if (event.target !== this._contentViewContainer.currentContentView)
     335            return;
    267336        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
    268337    },
    269338
    270     _showTimelineView: function(timelineView)
    271     {
    272         console.assert(timelineView instanceof WebInspector.TimelineView);
    273         console.assert(timelineView.representedObject === this._recording || this._recording.timelines.has(timelineView.representedObject.type));
    274 
    275         // If the content view is shown and then hidden, we must reattach the content tree outline and timeline view.
    276         if (timelineView.visible && timelineView === this._currentTimelineView)
    277             return;
    278 
    279         if (this._currentTimelineView) {
    280             this._currentTimelineView.removeEventListener(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange, this._timelineViewSelectionPathComponentsDidChange, this);
    281 
    282             this._currentTimelineView.hidden();
    283             this._currentTimelineView.element.remove();
    284         }
    285 
    286         this._currentTimelineView = timelineView;
    287 
    288         WebInspector.timelineSidebarPanel.contentTreeOutline = timelineView && timelineView.navigationSidebarTreeOutline;
    289         WebInspector.timelineSidebarPanel.contentTreeOutlineLabel = timelineView && timelineView.navigationSidebarTreeOutlineLabel;
    290 
    291         if (this._currentTimelineView) {
    292             this._currentTimelineView.addEventListener(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange, this._timelineViewSelectionPathComponentsDidChange, this);
    293 
    294             this._viewContainerElement.appendChild(this._currentTimelineView.element);
    295 
    296             this._currentTimelineView.startTime = this._timelineOverview.selectionStartTime;
    297             this._currentTimelineView.endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
    298             this._currentTimelineView.currentTime = this._currentTime;
    299 
    300             this._currentTimelineView.shown();
    301             this._currentTimelineView.updateLayout();
    302         }
    303 
    304         this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
     339    _contentViewSupplementalRepresentedObjectsDidChange: function(event)
     340    {
     341        if (event.target !== this._contentViewContainer.currentContentView)
     342            return;
     343        this.dispatchEventToListeners(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange);
    305344    },
    306345
    … …  
    351390        this._currentTime = currentTime;
    352391        this._timelineOverview.currentTime = currentTime;
    353         this._currentTimelineView.currentTime = currentTime;
     392        if (this.currentTimelineView)
     393            this.currentTimelineView.currentTime = currentTime;
    354394
    355395        WebInspector.timelineSidebarPanel.updateFilter();
    … …  
    357397        // Force a layout now since we are already in an animation frame and don't need to delay it until the next.
    358398        this._timelineOverview.updateLayoutIfNeeded();
    359         this._currentTimelineView.updateLayoutIfNeeded();
     399        if (this.currentTimelineView)
     400            this.currentTimelineView.updateLayoutIfNeeded();
    360401    },
    361402
    … …  
    456497        console.assert(!this._timelineViewMap.has(timeline), timeline);
    457498
    458         this._timelineViewMap.set(timeline, new WebInspector.TimelineView(timeline));
     499        this._timelineViewMap.set(timeline, new WebInspector.ContentView(timeline));
    459500
    460501        var pathComponent = new WebInspector.HierarchicalPathComponent(timeline.displayName, timeline.iconClassName, timeline);
    … …  
    472513
    473514        var timelineView = this._timelineViewMap.take(timeline);
    474         if (this._currentTimelineView === timelineView)
     515        if (this.currentTimelineView === timelineView)
    475516            this.showOverviewTimelineView();
    476517
    … …  
    496537        const extraOffset = 22;
    497538        this._timelineOverview.element.style.height = (timelineCount * timelineHeight + extraOffset) + "px";
    498         this._viewContainerElement.style.top = (timelineCount * timelineHeight + extraOffset) + "px";
     539        this._contentViewContainer.element.style.top = (timelineCount * timelineHeight + extraOffset) + "px";
    499540    },
    500541
    … …  
    531572    _timeRangeSelectionChanged: function(event)
    532573    {
    533         this._currentTimelineView.startTime = this._timelineOverview.selectionStartTime;
    534         this._currentTimelineView.endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
     574        if (this.currentTimelineView) {
     575            this.currentTimelineView.startTime = this._timelineOverview.selectionStartTime;
     576            this.currentTimelineView.endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
     577        }
    535578
    536579        // Delay until the next frame to stay in sync with the current timeline view's time-based layout changes.
    537580        requestAnimationFrame(function() {
    538             var selectedTreeElement = this._currentTimelineView && this._currentTimelineView.navigationSidebarTreeOutline ? this._currentTimelineView.navigationSidebarTreeOutline.selectedTreeElement : null;
     581            var selectedTreeElement = this.currentTimelineView && this.currentTimelineView.navigationSidebarTreeOutline ? this.currentTimelineView.navigationSidebarTreeOutline.selectedTreeElement : null;
    539582            var selectionWasHidden = selectedTreeElement && selectedTreeElement.hidden;
    540583

  • trunk/Source/WebInspectorUI/UserInterface/Views/TimelineView.js

    r178544 r181011  
    11/*
    22 * Copyright (C) 2013 Apple Inc. All rights reserved.
     3 * Copyright (C) 2015 University of Washington.
    34 *
    45 * Redistribution and use in source and binary forms, with or without
    … …  
    2627WebInspector.TimelineView = function(representedObject)
    2728{
    28     if (this.constructor === WebInspector.TimelineView) {
    29         // When instantiated directly return an instance of a type-based concrete subclass.
    30 
    31         console.assert(representedObject && representedObject instanceof WebInspector.Timeline);
    32 
    33         var timelineType = representedObject.type;
    34         if (timelineType === WebInspector.TimelineRecord.Type.Network)
    35             return new WebInspector.NetworkTimelineView(representedObject);
    36 
    37         if (timelineType === WebInspector.TimelineRecord.Type.Layout)
    38             return new WebInspector.LayoutTimelineView(representedObject);
    39 
    40         if (timelineType === WebInspector.TimelineRecord.Type.Script)
    41             return new WebInspector.ScriptTimelineView(representedObject);
    42 
    43         throw Error("Can't make a Timeline for an unknown representedObject.");
    44     }
    45 
    46     // Concrete object instantiation.
     29    // This class should not be instantiated directly. Create a concrete subclass instead.
    4730    console.assert(this.constructor !== WebInspector.TimelineView && this instanceof WebInspector.TimelineView);
    4831
    49     WebInspector.Object.call(this);
    50 
    51     console.assert(representedObject instanceof WebInspector.Timeline || representedObject instanceof WebInspector.TimelineRecording);
    52     this._representedObject = representedObject;
     32    WebInspector.ContentView.call(this, representedObject);
    5333
    5434    this._contentTreeOutline = WebInspector.timelineSidebarPanel.createContentTreeOutline();
    55 
    56     this.element = document.createElement("div");
    5735    this.element.classList.add(WebInspector.TimelineView.StyleClassName);
    5836
    … …  
    6543WebInspector.TimelineView.StyleClassName = "timeline-view";
    6644
    67 WebInspector.TimelineView.Event = {
    68     SelectionPathComponentsDidChange: "timeline-view-selection-path-components-did-change"
    69 };
    70 
    7145WebInspector.TimelineView.prototype = {
    7246    constructor: WebInspector.TimelineView,
    73     __proto__: WebInspector.Object.prototype,
     47    __proto__: WebInspector.ContentView.prototype,
    7448
    7549    // Public
    76 
    77     get representedObject()
    78     {
    79         return this._representedObject;
    80     },
    8150
    8251    get navigationSidebarTreeOutline()
    … …  
    171140    },
    172141
    173     get visible()
    174     {
    175         return this._visible;
    176     },
    177 
    178142    reset: function()
    179143    {
    … …  
    181145    },
    182146
    183     shown: function()
    184     {
    185         this._visible = true;
    186 
    187         // Implemented by sub-classes if needed.
    188     },
    189 
    190     hidden: function()
    191     {
    192         // Implemented by sub-classes if needed.
    193 
    194         this._visible = false;
    195     },
    196147
    197148    filterDidChange: function()
    … …  
    225176    filterUpdated: function()
    226177    {
    227         this.dispatchEventToListeners(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange);
     178        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
    228179    },
    229180
    … …  
    237188    needsLayout: function()
    238189    {
    239         if (!this._visible)
     190        if (!this.visible)
    240191            return;
    241192
Note: See TracChangeset for help on using the changeset viewer.