Changeset 197488 in webkit


Ignore:
Timestamp:
Mar 2, 2016 7:50:37 PM (8 years ago)
Author:
Matt Baker
Message:

Web Inspector: Timelines UI redesign: replace content view container with a content browser
​https://bugs.webkit.org/show_bug.cgi?id=153033
<rdar://problem/24195565>

Reviewed by Timothy Hatcher.

This patch replaces the ContentViewContainer in the Timelines tab with a ContentBrowser,
moves filtering controls from the sidebar to the new browser's navigation bar, and adds
a new leaf path component for the current ruler selection to the main content browser's
navigation bar.

  • Localizations/en.lproj/localizedStrings.js:

New UI strings.

  • UserInterface/Base/Utilities.js:

Added global en dash string.

  • UserInterface/Main.html:
  • UserInterface/Test.html:

New files.

  • UserInterface/Models/TimelineRange.js:

(WebInspector.TimelineRange):
(WebInspector.TimelineRange.prototype.get startValue):
(WebInspector.TimelineRange.prototype.set startValue):
(WebInspector.TimelineRange.prototype.get endValue):
(WebInspector.TimelineRange.prototype.set endValue):
New represented object used by ruler selection path components.

  • UserInterface/Views/FilterBarNavigationItem.js:

(WebInspector.FilterBarNavigationItem):
(WebInspector.FilterBarNavigationItem.prototype.get filterBar):
Adapter class for using a FilterBar as a NavigationItem.

  • UserInterface/Views/TimelineIcons.css:

(.time-icon .icon):
Icon class used by ruler selection path component.

  • UserInterface/Views/TimelineRecordingContentView.css:

(.content-view.timeline-recording > .content-browser):
(.content-view.timeline-recording > .content-browser > .navigation-bar):
(.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple):
(.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple .arrows):
(.content-view.timeline-recording > .content-browser > .content-view-container > .timeline-view > .data-grid td):
(.content-view.timeline-recording > .content-browser > .content-view-container > .timeline-view > .data-grid table.data):
(.content-view.timeline-recording > .content-view-container): Deleted.
(.content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid td): Deleted.
(.content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid table.data): Deleted.
New styles for the ContentBrowser that replaces the ContentViewContainer.

  • UserInterface/Views/TimelineRecordingContentView.js:

(WebInspector.TimelineRecordingContentView):
Create the ContentBrowser, ruler selection path components, and the browser's filter bar.

(WebInspector.TimelineRecordingContentView.prototype.showOverviewTimelineView):
(WebInspector.TimelineRecordingContentView.prototype.showTimelineViewForTimeline):
Implemented by the content browser instead of the view container.

(WebInspector.TimelineRecordingContentView.prototype.get selectionPathComponents):
Add timeline and selection path components. Components for the current TimelineView
are now located in the lower content browser's navigation bar.

(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.saveToCookie):
Implemented by the content browser instead of the view container.

(WebInspector.TimelineRecordingContentView.prototype.contentBrowserTreeElementForRepresentedObject):
Create the root tree element for the lower content browser's navigation bar.

(WebInspector.TimelineRecordingContentView.prototype._timeRangePathComponentSelected):
Update the ruler selection based on the new path component.

(WebInspector.TimelineRecordingContentView.prototype._contentViewSelectionPathComponentDidChange):
(WebInspector.TimelineRecordingContentView.prototype._contentViewSupplementalRepresentedObjectsDidChange):
(WebInspector.TimelineRecordingContentView.prototype._updateTimes):
(WebInspector.TimelineRecordingContentView.prototype._updateTimelineOverviewHeight):
Implemented by the content browser instead of the view container.

(WebInspector.TimelineRecordingContentView.prototype._timeRangeSelectionChanged):
Update the currently selected path component when the ruler selection changes.
If the entire range is selected, show the "Entire Recording" path component,
otherwise update the TimelineRange of the path component for the user-defined
selection and refresh all timeline range path components.

(WebInspector.TimelineRecordingContentView.prototype._updateTimeRangePathComponents):
Update title text and sibling relationships for ruler selection path components.

(WebInspector.TimelineRecordingContentView.prototype._createTimelineRangePathComponent):
Helper function for creating TimelineRange path components.

(WebInspector.TimelineRecordingContentView.prototype._currentContentViewDidChange):
The TimelineView scope bar is no longer added to the sidebar. The UI has been moved
to the lower content browser navigation bar.

(WebInspector.TimelineRecordingContentView.prototype._updateFrameSelection): Deleted.
No longer needed since the selected range is shown in the navigation bar.

  • UserInterface/Views/TimelineView.js:

(WebInspector.TimelineView.prototype.get navigationItems):
Adds the TimelineView's scope bar (if any) to the lower content browser's navigation
bar. Items are inserted before the filter bar, which is always the right-most item.

Location:
trunk/Source/WebInspectorUI
Files:
9 edited
2 copied

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r197487 r197488  
     12016-03-02  Matt Baker  <mattbaker@apple.com>
     2
     3        Web Inspector: Timelines UI redesign: replace content view container with a content browser
     4        https://bugs.webkit.org/show_bug.cgi?id=153033
     5        <rdar://problem/24195565>
     6
     7        Reviewed by Timothy Hatcher.
     8
     9        This patch replaces the ContentViewContainer in the Timelines tab with a ContentBrowser,
     10        moves filtering controls from the sidebar to the new browser's navigation bar, and adds
     11        a new leaf path component for the current ruler selection to the main content browser's
     12        navigation bar.
     13
     14        * Localizations/en.lproj/localizedStrings.js:
     15        New UI strings.
     16
     17        * UserInterface/Base/Utilities.js:
     18        Added global en dash string.
     19
     20        * UserInterface/Main.html:
     21        * UserInterface/Test.html:
     22        New files.
     23
     24        * UserInterface/Models/TimelineRange.js:
     25        (WebInspector.TimelineRange):
     26        (WebInspector.TimelineRange.prototype.get startValue):
     27        (WebInspector.TimelineRange.prototype.set startValue):
     28        (WebInspector.TimelineRange.prototype.get endValue):
     29        (WebInspector.TimelineRange.prototype.set endValue):
     30        New represented object used by ruler selection path components.
     31
     32        * UserInterface/Views/FilterBarNavigationItem.js:
     33        (WebInspector.FilterBarNavigationItem):
     34        (WebInspector.FilterBarNavigationItem.prototype.get filterBar):
     35        Adapter class for using a FilterBar as a NavigationItem.
     36
     37        * UserInterface/Views/TimelineIcons.css:
     38        (.time-icon .icon):
     39        Icon class used by ruler selection path component.
     40
     41        * UserInterface/Views/TimelineRecordingContentView.css:
     42        (.content-view.timeline-recording > .content-browser):
     43        (.content-view.timeline-recording > .content-browser > .navigation-bar):
     44        (.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple):
     45        (.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple .arrows):
     46        (.content-view.timeline-recording > .content-browser > .content-view-container > .timeline-view > .data-grid td):
     47        (.content-view.timeline-recording > .content-browser > .content-view-container > .timeline-view > .data-grid table.data):
     48        (.content-view.timeline-recording > .content-view-container): Deleted.
     49        (.content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid td): Deleted.
     50        (.content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid table.data): Deleted.
     51        New styles for the ContentBrowser that replaces the ContentViewContainer.
     52
     53        * UserInterface/Views/TimelineRecordingContentView.js:
     54        (WebInspector.TimelineRecordingContentView):
     55        Create the ContentBrowser, ruler selection path components, and the browser's filter bar.
     56
     57        (WebInspector.TimelineRecordingContentView.prototype.showOverviewTimelineView):
     58        (WebInspector.TimelineRecordingContentView.prototype.showTimelineViewForTimeline):
     59        Implemented by the content browser instead of the view container.
     60
     61        (WebInspector.TimelineRecordingContentView.prototype.get selectionPathComponents):
     62        Add timeline and selection path components. Components for the current TimelineView
     63        are now located in the lower content browser's navigation bar.
     64
     65        (WebInspector.TimelineRecordingContentView.prototype.get supplementalRepresentedObjects):
     66        (WebInspector.TimelineRecordingContentView.prototype.get handleCopyEvent):
     67        (WebInspector.TimelineRecordingContentView.prototype.get supportsSave):
     68        (WebInspector.TimelineRecordingContentView.prototype.get saveData):
     69        (WebInspector.TimelineRecordingContentView.prototype.get currentTimelineView):
     70        (WebInspector.TimelineRecordingContentView.prototype.shown):
     71        (WebInspector.TimelineRecordingContentView.prototype.hidden):
     72        (WebInspector.TimelineRecordingContentView.prototype.closed):
     73        (WebInspector.TimelineRecordingContentView.prototype.canGoBack):
     74        (WebInspector.TimelineRecordingContentView.prototype.canGoForward):
     75        (WebInspector.TimelineRecordingContentView.prototype.goBack):
     76        (WebInspector.TimelineRecordingContentView.prototype.goForward):
     77        (WebInspector.TimelineRecordingContentView.prototype.saveToCookie):
     78        Implemented by the content browser instead of the view container.
     79
     80        (WebInspector.TimelineRecordingContentView.prototype.contentBrowserTreeElementForRepresentedObject):
     81        Create the root tree element for the lower content browser's navigation bar.
     82
     83        (WebInspector.TimelineRecordingContentView.prototype._timeRangePathComponentSelected):
     84        Update the ruler selection based on the new path component.
     85
     86        (WebInspector.TimelineRecordingContentView.prototype._contentViewSelectionPathComponentDidChange):
     87        (WebInspector.TimelineRecordingContentView.prototype._contentViewSupplementalRepresentedObjectsDidChange):
     88        (WebInspector.TimelineRecordingContentView.prototype._updateTimes):
     89        (WebInspector.TimelineRecordingContentView.prototype._updateTimelineOverviewHeight):
     90        Implemented by the content browser instead of the view container.
     91
     92        (WebInspector.TimelineRecordingContentView.prototype._timeRangeSelectionChanged):
     93        Update the currently selected path component when the ruler selection changes.
     94        If the entire range is selected, show the "Entire Recording" path component,
     95        otherwise update the TimelineRange of the path component for the user-defined
     96        selection and refresh all timeline range path components.
     97
     98        (WebInspector.TimelineRecordingContentView.prototype._updateTimeRangePathComponents):
     99        Update title text and sibling relationships for ruler selection path components.
     100
     101        (WebInspector.TimelineRecordingContentView.prototype._createTimelineRangePathComponent):
     102        Helper function for creating TimelineRange path components.
     103
     104        (WebInspector.TimelineRecordingContentView.prototype._currentContentViewDidChange):
     105        The TimelineView scope bar is no longer added to the sidebar. The UI has been moved
     106        to the lower content browser navigation bar.
     107
     108        (WebInspector.TimelineRecordingContentView.prototype._updateFrameSelection): Deleted.
     109        No longer needed since the selected range is shown in the navigation bar.
     110
     111        * UserInterface/Views/TimelineView.js:
     112        (WebInspector.TimelineView.prototype.get navigationItems):
     113        Adds the TimelineView's scope bar (if any) to the lower content browser's navigation
     114        bar. Items are inserted before the filter bar, which is always the right-most item.
     115
    11162016-03-02  Matt Baker  <mattbaker@apple.com>
    2117

  • trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

    r197479 r197488  
    3232localizedStrings["%s Event Dispatched"] = "%s Event Dispatched";
    3333localizedStrings["%s Prototype"] = "%s Prototype";
     34localizedStrings["%s \u2013 %s"] = "%s \u2013 %s";
    3435localizedStrings["%s \u2014 %s"] = "%s \u2014 %s";
    3536localizedStrings["%s delay"] = "%s delay";
    … …  
    286287localizedStrings["Enter a value"] = "Enter a value";
    287288localizedStrings["Enter the name of a Keyframe"] = "Enter the name of a Keyframe";
     289localizedStrings["Entire Recording"] = "Entire Recording";
    288290localizedStrings["Error: "] = "Error: ";
    289291localizedStrings["Errors"] = "Errors";
    … …  
    308310localizedStrings["Filter Breakpoint List"] = "Filter Breakpoint List";
    309311localizedStrings["Filter Console Log"] = "Filter Console Log";
     312localizedStrings["Filter Records"] = "Filter Records";
    310313localizedStrings["Filter Resource List"] = "Filter Resource List";
    311314localizedStrings["Filter Search Results"] = "Filter Search Results";
    … …  
    337340localizedStrings["Frame: %d (%s \u2013 %s)"] = "Frame: %d (%s \u2013 %s)";
    338341localizedStrings["Frames"] = "Frames";
     342localizedStrings["Frames %d \u2013 %d"] = "Frames %d \u2013 %d";
    339343localizedStrings["Frames: %d \u2013 %d (%s \u2013 %s)"] = "Frames: %d \u2013 %d (%s \u2013 %s)";
    340344localizedStrings["Frames: None Selected"] = "Frames: None Selected";
    … …  
    498502localizedStrings["Over 15 ms"] = "Over 15 ms";
    499503localizedStrings["Overflow"] = "Overflow";
     504localizedStrings["Overview"] = "Overview";
    500505localizedStrings["Owns"] = "Owns";
    501506localizedStrings["Padding"] = "Padding";

  • trunk/Source/WebInspectorUI/UserInterface/Base/Utilities.js

    r196867 r197488  
    2525
    2626var emDash = "\u2014";
     27var enDash = "\u2013";
    2728var ellipsis = "\u2026";
    2829

  • trunk/Source/WebInspectorUI/UserInterface/Main.html

    r197479 r197488  
    267267    <script src="Models/SourceCodeLocation.js"></script>
    268268    <script src="Models/Timeline.js"></script>
     269    <script src="Models/TimelineRange.js"></script>
    269270    <script src="Models/TimelineRecord.js"></script>
    270271
    … …  
    490491    <script src="Views/FilterBar.js"></script>
    491492    <script src="Views/FilterBarButton.js"></script>
     493    <script src="Views/FilterBarNavigationItem.js"></script>
    492494    <script src="Views/FindBanner.js"></script>
    493495    <script src="Views/FlexibleSpaceNavigationItem.js"></script>

  • trunk/Source/WebInspectorUI/UserInterface/Models/TimelineRange.js

    r197487 r197488  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2016 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 .content-view.timeline-recording > .timeline-overview {
    27     position: absolute;
    28     top: 0;
    29     left: 0;
    30     right: 0;
    31 }
     26WebInspector.TimelineRange = class TimelineRange extends WebInspector.Object
     27{
     28    constructor(startValue, endValue)
     29    {
     30        super();
    3231
    33 .content-view.timeline-recording > .content-view-container {
    34     position: absolute;
    35     left: 0;
    36     right: 0;
    37     bottom: 0;
    38     overflow: hidden;
    39 }
     32        this._startValue = startValue;
     33        this._endValue = endValue;
     34    }
    4035
    41 .content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid td {
    42     height: 16px;
    43     line-height: 16px;
    44 }
     36    get startValue() { return this._startValue; }
     37    set startValue(x) { this._startValue = x; }
    4538
    46 .content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid table.data {
    47     background-image: linear-gradient(to bottom, white, white 50%, hsl(0, 0%, 95%) 50%, hsl(0, 0%, 95%));
    48     background-size: 100% 40px;
    49 }
     39    get endValue() { return this._endValue; }
     40    set endValue(x) { this._endValue = x; }
     41};

  • trunk/Source/WebInspectorUI/UserInterface/Test.html

    r195305 r197488  
    8383    <script src="Models/SourceCodeLocation.js"></script>
    8484    <script src="Models/Timeline.js"></script>
     85    <script src="Models/TimelineRange.js"></script>
    8586    <script src="Models/TimelineRecord.js"></script>
    8687

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

    r197487 r197488  
    11/*
    2  * Copyright (C) 2013 Apple Inc. All rights reserved.
     2 * Copyright (C) 2016 Apple Inc. All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    2424 */
    2525
    26 .content-view.timeline-recording > .timeline-overview {
    27     position: absolute;
    28     top: 0;
    29     left: 0;
    30     right: 0;
    31 }
     26WebInspector.FilterBarNavigationItem = class FilterBarNavigationItem extends WebInspector.NavigationItem
     27{
     28    constructor()
     29    {
     30        super();
    3231
    33 .content-view.timeline-recording > .content-view-container {
    34     position: absolute;
    35     left: 0;
    36     right: 0;
    37     bottom: 0;
    38     overflow: hidden;
    39 }
     32        this._filterBar = new WebInspector.FilterBar(this.element);
     33    }
    4034
    41 .content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid td {
    42     height: 16px;
    43     line-height: 16px;
    44 }
     35    // Public
    4536
    46 .content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid table.data {
    47     background-image: linear-gradient(to bottom, white, white 50%, hsl(0, 0%, 95%) 50%, hsl(0, 0%, 95%));
    48     background-size: 100% 40px;
    49 }
     37    get filterBar()
     38    {
     39        return this._filterBar;
     40    }
     41};

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

    r197046 r197488  
    8282}
    8383
     84.time-icon .icon {
     85    content: url(../Images/Timeline.svg);
     86    width: 13px;
     87    opacity: 0.6;
     88}
     89
    8490.style-record .icon {
    8591    content: url(../Images/TimelineRecordStyle.svg);

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

    r187105 r197488  
    3131}
    3232
    33 .content-view.timeline-recording > .content-view-container {
     33.content-view.timeline-recording > .content-browser {
    3434    position: absolute;
    3535    left: 0;
    … …  
    3737    bottom: 0;
    3838    overflow: hidden;
     39
     40    border-top: 1px solid var(--border-color);
    3941}
    4042
    41 .content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid td {
     43.content-view.timeline-recording > .content-browser > .navigation-bar {
     44    background-color: var(--panel-background-color);
     45    border-bottom: none;
     46}
     47
     48.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple {
     49    background-color: transparent;
     50    color: black;
     51}
     52
     53.content-view.timeline-recording > .content-browser > .navigation-bar > .item.scope-bar.default-item-selected > .multiple .arrows {
     54    color: black;
     55}
     56
     57.content-view.timeline-recording > .content-browser > .content-view-container > .timeline-view > .data-grid td {
    4258    height: 16px;
    4359    line-height: 16px;
    4460}
    4561
    46 .content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid table.data {
     62.content-view.timeline-recording > .content-browser > .content-view-container > .timeline-view > .data-grid table.data {
    4763    background-image: linear-gradient(to bottom, white, white 50%, hsl(0, 0%, 95%) 50%, hsl(0, 0%, 95%));
    4864    background-size: 100% 40px;

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

    r197473 r197488  
    4545        this.addSubview(this._timelineOverview);
    4646
    47         this._contentViewContainer = new WebInspector.ContentViewContainer;
    48         this._contentViewContainer.addEventListener(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange, this._currentContentViewDidChange, this);
    49         this.addSubview(this._contentViewContainer);
     47        const disableBackForward = true;
     48        this._timelineContentBrowser = new WebInspector.ContentBrowser(null, this, disableBackForward);
     49        this._timelineContentBrowser.addEventListener(WebInspector.ContentBrowser.Event.CurrentContentViewDidChange, this._currentContentViewDidChange, this);
     50
     51        this._entireRecordingPathComponent = this._createTimelineRangePathComponent(WebInspector.UIString("Entire Recording"));
     52        this._timelineSelectionPathComponent = this._createTimelineRangePathComponent();
     53        this._timelineSelectionPathComponent.previousSibling = this._entireRecordingPathComponent;
     54        this._selectedTimeRangePathComponent = this._entireRecordingPathComponent;
     55
     56        this._filterBarNavigationItem = new WebInspector.FilterBarNavigationItem;
     57        this._filterBarNavigationItem.filterBar.placeholder = WebInspector.UIString("Filter Records");
     58        this._timelineContentBrowser.navigationBar.addNavigationItem(this._filterBarNavigationItem);
     59        this.addSubview(this._timelineContentBrowser);
    5060
    5161        this._clearTimelineNavigationItem = new WebInspector.ButtonNavigationItem("clear-timeline", WebInspector.UIString("Clear Timeline"), "Images/NavigationItemTrash.svg", 15, 15);
    … …  
    8898    showOverviewTimelineView()
    8999    {
    90         this._contentViewContainer.showContentView(this._overviewTimelineView);
     100        this._timelineContentBrowser.showContentView(this._overviewTimelineView);
    91101    }
    92102
    … …  
    98108            return;
    99109
    100         this._contentViewContainer.showContentView(this._timelineViewMap.get(timeline));
     110        this._timelineContentBrowser.showContentView(this._timelineViewMap.get(timeline));
    101111    }
    102112
    … …  
    109119    get selectionPathComponents()
    110120    {
    111         if (!this._contentViewContainer.currentContentView)
     121        if (!this._timelineContentBrowser.currentContentView)
    112122            return [];
    113123
    114         var pathComponents = this._contentViewContainer.currentContentView.selectionPathComponents || [];
    115         var representedObject = this._contentViewContainer.currentContentView.representedObject;
     124        let pathComponents = [];
     125        let representedObject = this._timelineContentBrowser.currentContentView.representedObject;
    116126        if (representedObject instanceof WebInspector.Timeline)
    117             pathComponents.unshift(this._pathComponentMap.get(representedObject));
     127            pathComponents.push(this._pathComponentMap.get(representedObject));
     128
     129        pathComponents.push(this._selectedTimeRangePathComponent);
    118130        return pathComponents;
    119131    }
    … …  
    121133    get supplementalRepresentedObjects()
    122134    {
    123         if (!this._contentViewContainer.currentContentView)
     135        if (!this._timelineContentBrowser.currentContentView)
    124136            return [];
    125         return this._contentViewContainer.currentContentView.supplementalRepresentedObjects;
     137        return this._timelineContentBrowser.currentContentView.supplementalRepresentedObjects;
    126138    }
    127139
    … …  
    133145    get handleCopyEvent()
    134146    {
    135         var currentContentView = this._contentViewContainer.currentContentView;
     147        let currentContentView = this._timelineContentBrowser.currentContentView;
    136148        return currentContentView && typeof currentContentView.handleCopyEvent === "function" ? currentContentView.handleCopyEvent.bind(currentContentView) : null;
    137149    }
    … …  
    139151    get supportsSave()
    140152    {
    141         var currentContentView = this._contentViewContainer.currentContentView;
     153        let currentContentView = this._timelineContentBrowser.currentContentView;
    142154        return currentContentView && currentContentView.supportsSave;
    143155    }
    … …  
    145157    get saveData()
    146158    {
    147         var currentContentView = this._contentViewContainer.currentContentView;
     159        let currentContentView = this._timelineContentBrowser.currentContentView;
    148160        return currentContentView && currentContentView.saveData || null;
    149161    }
    … …  
    151163    get currentTimelineView()
    152164    {
    153         var contentView = this._contentViewContainer.currentContentView;
     165        let contentView = this._timelineContentBrowser.currentContentView;
    154166        return (contentView instanceof WebInspector.TimelineView) ? contentView : null;
    155167    }
    … …  
    163175    {
    164176        this._timelineOverview.shown();
    165         this._contentViewContainer.shown();
     177        this._timelineContentBrowser.shown();
    166178        this._clearTimelineNavigationItem.enabled = !this._recording.readonly && !isNaN(this._recording.startTime);
    167179
    … …  
    175187    {
    176188        this._timelineOverview.hidden();
    177         this._contentViewContainer.hidden();
     189        this._timelineContentBrowser.hidden();
    178190
    179191        if (this._updating)
    … …  
    183195    closed()
    184196    {
    185         this._contentViewContainer.closeAllContentViews();
     197        this._timelinContentBrowser.contentViewContainer.closeAllContentViews();
    186198
    187199        this._recording.removeEventListener(null, null, this);
    … …  
    194206    canGoBack()
    195207    {
    196         return this._contentViewContainer.canGoBack();
     208        return this._timelineContentBrowser.canGoBack();
    197209    }
    198210
    199211    canGoForward()
    200212    {
    201         return this._contentViewContainer.canGoForward();
     213        return this._timelineContentBrowser.canGoForward();
    202214    }
    203215
    204216    goBack()
    205217    {
    206         this._contentViewContainer.goBack();
     218        this._timelineContentBrowser.goBack();
    207219    }
    208220
    209221    goForward()
    210222    {
    211         this._contentViewContainer.goForward();
     223        this._timelineContentBrowser.goForward();
    212224    }
    213225
    … …  
    216228        cookie.type = WebInspector.ContentViewCookieType.Timelines;
    217229
    218         var currentContentView = this._contentViewContainer.currentContentView;
     230        let currentContentView = this._timelineContentBrowser.currentContentView;
    219231        if (!currentContentView || currentContentView === this._overviewTimelineView)
    220232            cookie[WebInspector.TimelineRecordingContentView.SelectedTimelineTypeCookieKey] = WebInspector.TimelineRecordingContentView.OverviewTimelineViewCookieValue;
    … …  
    318330        console.error("Unknown TreeElement, can't filter by time.");
    319331        return true;
     332    }
     333
     334    // ContentBrowser delegate
     335
     336    contentBrowserTreeElementForRepresentedObject(contentBrowser, representedObject)
     337    {
     338        if (!(representedObject instanceof WebInspector.Timeline) && !(representedObject instanceof WebInspector.TimelineRecording))
     339            return null;
     340
     341        let iconClassName;
     342        let title;
     343        if (representedObject instanceof WebInspector.Timeline) {
     344            iconClassName = WebInspector.TimelineTabContentView.iconClassNameForTimeline(representedObject);
     345            title = WebInspector.UIString("Details");
     346        } else {
     347            iconClassName = "stopwatch-icon";
     348            title = WebInspector.UIString("Overview");
     349        }
     350
     351        const hasChildren = false;
     352        return new WebInspector.GeneralTreeElement(iconClassName, title, representedObject, hasChildren);
    320353    }
    321354
    … …  
    336369            this._timelineSidebarPanel.contentTreeOutline = timelineView.navigationSidebarTreeOutline;
    337370            this._timelineSidebarPanel.contentTreeOutlineLabel = timelineView.navigationSidebarTreeOutlineLabel;
    338             this._timelineSidebarPanel.contentTreeOutlineScopeBar = timelineView.navigationSidebarTreeOutlineScopeBar;
    339371
    340372            this._updateTimelineViewSelection(timelineView);
    … …  
    357389    }
    358390
     391    _timeRangePathComponentSelected(event)
     392    {
     393        let selectedPathComponent = event.data.pathComponent;
     394        if (selectedPathComponent === this._selectedTimeRangePathComponent)
     395            return;
     396
     397        let timelineRuler = this._timelineOverview.timelineRuler
     398        if (selectedPathComponent === this._entireRecordingPathComponent)
     399            timelineRuler.selectEntireRange();
     400        else {
     401            let timelineRange = selectedPathComponent.representedObject;
     402            timelineRuler.selectionStartTime = timelineRuler.zeroTime + timelineRange.startValue;
     403            timelineRuler.selectionEndTime = timelineRuler.zeroTime + timelineRange.endValue;
     404        }
     405    }
     406
    359407    _contentViewSelectionPathComponentDidChange(event)
    360408    {
    361         if (event.target !== this._contentViewContainer.currentContentView)
     409        if (event.target !== this._timelineContentBrowser.currentContentView)
    362410            return;
    363411
    … …  
    374422    _contentViewSupplementalRepresentedObjectsDidChange(event)
    375423    {
    376         if (event.target !== this._contentViewContainer.currentContentView)
     424        if (event.target !== this._timelineContentBrowser.currentContentView)
    377425            return;
    378426        this.dispatchEventToListeners(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange);
    … …  
    413461            this._timelineOverview.startTime = startTime;
    414462            this._overviewTimelineView.zeroTime = startTime;
    415             for (var timelineView of this._timelineViewMap.values())
     463            for (var timelineView of this._timelineViewMap.values()) {
     464                if (timelineView.representedObject.type === WebInspector.TimelineRecord.Type.RenderingFrame)
     465                    continue;
     466
    416467                timelineView.zeroTime = startTime;
     468            }
    417469
    418470            this._startTimeNeedsReset = false;
    … …  
    540592        let styleValue = (rulerHeight + this.timelineOverviewHeight) + "px";
    541593        this._timelineOverview.element.style.height = styleValue;
    542         this._contentViewContainer.element.style.top = styleValue;
     594        this._timelineContentBrowser.element.style.top = styleValue;
    543595    }
    544596
    … …  
    631683    _timeRangeSelectionChanged(event)
    632684    {
    633         if (this.currentTimelineView) {
    634             this._updateTimelineViewSelection(this.currentTimelineView);
    635 
    636             if (this.currentTimelineView.representedObject.type === WebInspector.TimelineRecord.Type.RenderingFrame)
    637                 this._updateFrameSelection();
     685        console.assert(this.currentTimelineView);
     686        if (!this.currentTimelineView)
     687            return;
     688
     689        this._updateTimelineViewSelection(this.currentTimelineView);
     690
     691        let selectedPathComponent;
     692        if (this._timelineOverview.timelineRuler.entireRangeSelected)
     693            selectedPathComponent = this._entireRecordingPathComponent;
     694        else {
     695            let timelineRange = this._timelineSelectionPathComponent.representedObject;
     696            timelineRange.startValue = this.currentTimelineView.startTime;
     697            timelineRange.endValue = this.currentTimelineView.endTime;
     698
     699            this._updateTimeRangePathComponents();
     700            selectedPathComponent = this._timelineSelectionPathComponent;
     701        }
     702
     703        if (this._selectedTimeRangePathComponent !== selectedPathComponent) {
     704            this._selectedTimeRangePathComponent = selectedPathComponent;
     705            this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
    638706        }
    639707
    … …  
    685753    }
    686754
    687     _updateFrameSelection()
    688     {
    689         console.assert(this._renderingFrameTimeline);
    690         if (!this._renderingFrameTimeline)
    691             return;
    692 
    693         let startIndex = this._timelineOverview.selectionStartTime;
    694         let endIndex = startIndex + this._timelineOverview.selectionDuration - 1;
    695         this._timelineSidebarPanel.updateFrameSelection(startIndex, endIndex);
     755    _updateTimeRangePathComponents()
     756    {
     757        let timelineRange = this._timelineSelectionPathComponent.representedObject;
     758        let startValue = timelineRange.startValue;
     759        let endValue = timelineRange.endValue;
     760        if (isNaN(startValue) || isNaN(endValue)) {
     761            this._entireRecordingPathComponent.nextSibling = null;
     762            return;
     763        }
     764
     765        this._entireRecordingPathComponent.nextSibling = this._timelineSelectionPathComponent;
     766
     767        let displayName;
     768        if (this._timelineOverview.viewMode === WebInspector.TimelineOverview.ViewMode.Timelines) {
     769            let selectionStart = Number.secondsToString(startValue, true);
     770            let selectionEnd = Number.secondsToString(endValue, true);
     771            displayName = WebInspector.UIString("%s \u2013 %s").format(selectionStart, selectionEnd);
     772        } else {
     773            startValue += 1; // Convert index to frame number.
     774            if (startValue === endValue)
     775                displayName = WebInspector.UIString("Frame %d").format(startValue);
     776            else
     777                displayName = WebInspector.UIString("Frames %d \u2013 %d").format(startValue, endValue);
     778        }
     779
     780        this._timelineSelectionPathComponent.displayName = displayName;
     781        this._timelineSelectionPathComponent.title = displayName;
     782    }
     783
     784    _createTimelineRangePathComponent(title)
     785    {
     786        let range = new WebInspector.TimelineRange(NaN, NaN);
     787        let pathComponent = new WebInspector.HierarchicalPathComponent(title || enDash, "time-icon", range);
     788        pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._timeRangePathComponentSelected, this);
     789
     790        return pathComponent;
    696791    }
    697792

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

    r193612 r197488  
    5353    // Public
    5454
     55    get navigationItems()
     56    {
     57        return this._scopeBar ? [this._scopeBar] : [];
     58    }
     59
    5560    get navigationSidebarTreeOutline()
    5661    {
Note: See TracChangeset for help on using the changeset viewer.