Start fleshing out the new TimelineSidebarPanel and TimelineContentView.

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

Reviewed by Joseph Pecoraro.

* UserInterface/ContentView.js:
(WebInspector.ContentView):
(WebInspector.ContentView.isViewable):
* UserInterface/FrameContentView.js:
* UserInterface/Images/CloseTimeline.png: Added.
* UserInterface/Images/CloseTimeline@2x.png: Added.
* UserInterface/Images/ColorsLarge.png: Added.
* UserInterface/Images/ColorsLarge@2x.png: Added.
* UserInterface/Images/NetworkLarge.png: Added.
* UserInterface/Images/NetworkLarge@2x.png: Added.
* UserInterface/Images/ScriptLarge.png: Added.
* UserInterface/Images/ScriptLarge@2x.png: Added.
* UserInterface/Main.html:
* UserInterface/Main.js:
(WebInspector.sidebarPanelForRepresentedObject):
(WebInspector._revealAndSelectRepresentedObjectInNavigationSidebar):
* UserInterface/NavigationSidebarPanel.js:
(WebInspector.NavigationSidebarPanel.prototype.showDefaultContentView):
* UserInterface/ResourceClusterContentView.js:
* UserInterface/TimelineContentView.css: Added.
(.content-view.timeline > .view-container):
* UserInterface/TimelineContentView.js: Added.
(WebInspector.TimelineContentView):
* UserInterface/TimelineIcons.css: Renamed from Source/WebInspectorUI/UserInterface/InstrumentIcons.css.
(.network-icon.large .icon): Added.
(.colors-icon.large .icon): Added.
(.script-icon.large .icon): Added.
* UserInterface/TimelineSidebarPanel.css:
(.sidebar > .panel.timeline > .navigation-bar):
(.sidebar > .panel.timeline > .title-bar):
(.sidebar > .panel.timeline > .title-bar.timelines):
(.sidebar > .panel.timeline > .title-bar.timeline-events):
(.sidebar > .panel.timeline > .timelines-content):
(.sidebar > .panel.timeline > .timelines-content .close-button):
(.sidebar > .panel.timeline > .timelines-content li.item.selected .close-button):
(.sidebar > .panel.timeline > .timelines-content .close-button:active):
(.sidebar > .panel.timeline > .content):
* UserInterface/TimelineSidebarPanel.js:
(WebInspector.TimelineSidebarPanel.createTimelineTreeElement):
(WebInspector.TimelineSidebarPanel):
(WebInspector.TimelineSidebarPanel.prototype.showDefaultContentView):
(WebInspector.TimelineSidebarPanel.prototype.treeElementForRepresentedObject):
(WebInspector.TimelineSidebarPanel.prototype.get contentTreeOutlineLabel):
(WebInspector.TimelineSidebarPanel.prototype.set contentTreeOutlineLabel):
(WebInspector.TimelineSidebarPanel.prototype.showTimelineOverview):
(WebInspector.TimelineSidebarPanel.prototype.showTimelineView):
(WebInspector.TimelineSidebarPanel.prototype._timelinesTreeElementSelected):

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

Source/WebInspectorUI/ChangeLog

+2013-11-07  Timothy Hatcher  <timothy@apple.com>
+
+        Start fleshing out the new TimelineSidebarPanel and TimelineContentView.
+
+        https://bugs.webkit.org/show_bug.cgi?id=124003
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/ContentView.js:
+        (WebInspector.ContentView):
+        (WebInspector.ContentView.isViewable):
+        * UserInterface/FrameContentView.js:
+        * UserInterface/Images/CloseTimeline.png: Added.
+        * UserInterface/Images/CloseTimeline@2x.png: Added.
+        * UserInterface/Images/ColorsLarge.png: Added.
+        * UserInterface/Images/ColorsLarge@2x.png: Added.
+        * UserInterface/Images/NetworkLarge.png: Added.
+        * UserInterface/Images/NetworkLarge@2x.png: Added.
+        * UserInterface/Images/ScriptLarge.png: Added.
+        * UserInterface/Images/ScriptLarge@2x.png: Added.
+        * UserInterface/Main.html:
+        * UserInterface/Main.js:
+        (WebInspector.sidebarPanelForRepresentedObject):
+        (WebInspector._revealAndSelectRepresentedObjectInNavigationSidebar):
+        * UserInterface/NavigationSidebarPanel.js:
+        (WebInspector.NavigationSidebarPanel.prototype.showDefaultContentView):
+        * UserInterface/ResourceClusterContentView.js:
+        * UserInterface/TimelineContentView.css: Added.
+        (.content-view.timeline > .view-container):
+        * UserInterface/TimelineContentView.js: Added.
+        (WebInspector.TimelineContentView):
+        * UserInterface/TimelineIcons.css: Renamed from Source/WebInspectorUI/UserInterface/InstrumentIcons.css.
+        (.network-icon.large .icon): Added.
+        (.colors-icon.large .icon): Added.
+        (.script-icon.large .icon): Added.
+        * UserInterface/TimelineSidebarPanel.css:
+        (.sidebar > .panel.timeline > .navigation-bar):
+        (.sidebar > .panel.timeline > .title-bar):
+        (.sidebar > .panel.timeline > .title-bar.timelines):
+        (.sidebar > .panel.timeline > .title-bar.timeline-events):
+        (.sidebar > .panel.timeline > .timelines-content):
+        (.sidebar > .panel.timeline > .timelines-content .close-button):
+        (.sidebar > .panel.timeline > .timelines-content li.item.selected .close-button):
+        (.sidebar > .panel.timeline > .timelines-content .close-button:active):
+        (.sidebar > .panel.timeline > .content):
+        * UserInterface/TimelineSidebarPanel.js:
+        (WebInspector.TimelineSidebarPanel.createTimelineTreeElement):
+        (WebInspector.TimelineSidebarPanel):
+        (WebInspector.TimelineSidebarPanel.prototype.showDefaultContentView):
+        (WebInspector.TimelineSidebarPanel.prototype.treeElementForRepresentedObject):
+        (WebInspector.TimelineSidebarPanel.prototype.get contentTreeOutlineLabel):
+        (WebInspector.TimelineSidebarPanel.prototype.set contentTreeOutlineLabel):
+        (WebInspector.TimelineSidebarPanel.prototype.showTimelineOverview):
+        (WebInspector.TimelineSidebarPanel.prototype.showTimelineView):
+        (WebInspector.TimelineSidebarPanel.prototype._timelinesTreeElementSelected):
+
 2014-01-08  Timothy Hatcher  <timothy@apple.com>
 
         Correctly track time bounds of WebInspector.Timeline and WebInspector.TimelineRecording.

Source/WebInspectorUI/UserInterface/ContentView.js

@@ -39,6 +39,9 @@ WebInspector.ContentView = function(representedObject)
         if (representedObject instanceof WebInspector.Script)
             return new WebInspector.ScriptContentView(representedObject);
 
+        if (representedObject instanceof WebInspector.TimelineRecording)
+            return new WebInspector.TimelineContentView(representedObject);
+
         if (representedObject instanceof WebInspector.DOMStorageObject)
             return new WebInspector.DOMStorageContentView(representedObject);
 
@@ -101,6 +104,8 @@ WebInspector.ContentView.isViewable = function(representedObject)
         return true;
     if (representedObject instanceof WebInspector.Script)
         return true;
+    if (representedObject instanceof WebInspector.TimelineRecording)
+        return true;
     if (representedObject instanceof WebInspector.DOMStorageObject)
         return true;
     if (representedObject instanceof WebInspector.CookieStorageObject)

Source/WebInspectorUI/UserInterface/FrameContentView.js

@@ -63,11 +63,6 @@ WebInspector.FrameContentView.prototype = {
         return this._frame;
     },
 
-    get allowedNavigationSidebarPanels()
-    {
-        return ["resource", "debugger"];
-    },
-
     get selectionPathComponents()
     {
         if (!this._contentViewContainer.currentContentView)

Source/WebInspectorUI/UserInterface/Main.html

@@ -82,7 +82,8 @@
     <link rel="stylesheet" href="ResourceTreeElement.css">
     <link rel="stylesheet" href="TreeElementStatusButton.css">
     <link rel="stylesheet" href="TimelineSidebarPanel.css">
-    <link rel="stylesheet" href="InstrumentIcons.css">
+    <link rel="stylesheet" href="TimelineContentView.css">
+    <link rel="stylesheet" href="TimelineIcons.css">
     <link rel="stylesheet" href="TimelineDecorations.css">
     <link rel="stylesheet" href="TimelineDataGrid.css">
     <link rel="stylesheet" href="TimelineOverview.css">
@@ -269,6 +270,7 @@
     <script src="DatabaseContentView.js"></script>
     <script src="ApplicationCacheFrameContentView.js"></script>
     <script src="TextContentView.js"></script>
+    <script src="TimelineContentView.js"></script>
     <script src="ApplicationCacheDetailsSidebarPanel.js"></script>
     <script src="DOMTreeManager.js"></script>
     <script src="DOMNode.js"></script>

Source/WebInspectorUI/UserInterface/Main.js

@@ -319,6 +319,9 @@ WebInspector.sidebarPanelForRepresentedObject = function(representedObject)
         representedObject instanceof WebInspector.ApplicationCacheFrame)
         return this.resourceSidebarPanel;
 
+    if (representedObject instanceof WebInspector.TimelineRecording)
+        return this.timelineSidebarPanel;
+
     // The console does not have a sidebar.
     if (representedObject instanceof WebInspector.LogObject)
         return null;
@@ -855,6 +858,9 @@ WebInspector._revealAndSelectRepresentedObjectInNavigationSidebar = function(rep
         treeElement.revealAndSelect(true, false, true, true);
     else if (selectedSidebarPanel.contentTreeOutline.selectedTreeElement)
         selectedSidebarPanel.contentTreeOutline.selectedTreeElement.deselect(true);
+
+    if (!selectedSidebarPanel.contentTreeOutline.selectedTreeElement)
+        selectedSidebarPanel.showDefaultContentView();
 }
 
 WebInspector._updateNavigationSidebarForCurrentContentView = function()

Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.js

@@ -94,7 +94,6 @@ WebInspector.NavigationSidebarPanel.StyleClassName = "navigation";
 WebInspector.NavigationSidebarPanel.OverflowShadowElementStyleClassName = "overflow-shadow";
 WebInspector.NavigationSidebarPanel.TopOverflowShadowElementStyleClassName = "top";
 WebInspector.NavigationSidebarPanel.ContentElementStyleClassName = "content";
-WebInspector.NavigationSidebarPanel.ContentElementHiddenStyleClassName = "hidden";
 WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementHiddenStyleClassName = "hidden";
 WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName = "navigation-sidebar-panel-content-tree-outline";
 WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName = "hide-disclosure-buttons";
@@ -153,7 +152,7 @@ WebInspector.NavigationSidebarPanel.prototype = {
         return this._filterBar;
     },
 
-    createContentTreeOutline: function(dontHideByDefault)
+    createContentTreeOutline: function(dontHideByDefault, suppressFiltering)
     {
         var contentTreeOutlineElement = document.createElement("ol");
         contentTreeOutlineElement.className = WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName;
@@ -162,12 +161,15 @@ WebInspector.NavigationSidebarPanel.prototype = {
         this._contentElement.appendChild(contentTreeOutlineElement);
 
         var contentTreeOutline = new TreeOutline(contentTreeOutlineElement);
-        contentTreeOutline.onadd = this._treeElementAddedOrChanged.bind(this);
-        contentTreeOutline.onchange = this._treeElementAddedOrChanged.bind(this);
-        contentTreeOutline.onexpand = this._treeElementExpandedOrCollapsed.bind(this);
-        contentTreeOutline.oncollapse = this._treeElementExpandedOrCollapsed.bind(this);
         contentTreeOutline.allowsRepeatSelection = true;
 
+        if (!suppressFiltering) {
+            contentTreeOutline.onadd = this._treeElementAddedOrChanged.bind(this);
+            contentTreeOutline.onchange = this._treeElementAddedOrChanged.bind(this);
+            contentTreeOutline.onexpand = this._treeElementExpandedOrCollapsed.bind(this);
+            contentTreeOutline.oncollapse = this._treeElementExpandedOrCollapsed.bind(this);
+        }
+
         if (dontHideByDefault)
             this._visibleContentTreeOutlines.add(contentTreeOutline);
 
@@ -179,6 +181,11 @@ WebInspector.NavigationSidebarPanel.prototype = {
         return this._contentTreeOutline.getCachedTreeElement(representedObject);
     },
 
+    showDefaultContentView: function()
+    {
+        // Implemneted by subclasses if needed to show a content view when no existing tree element is selected.
+    },
+
     showContentViewForCurrentSelection: function()
     {
         // Reselect the selected tree element to cause the content view to be shown as well. <rdar://problem/10854727>
@@ -238,7 +245,6 @@ WebInspector.NavigationSidebarPanel.prototype = {
     {
         console.assert(message);
 
-        this._contentElement.classList.add(WebInspector.NavigationSidebarPanel.ContentElementHiddenStyleClassName);
         this._emptyContentPlaceholderMessageElement.textContent = message;
         this.element.appendChild(this._emptyContentPlaceholderElement);
 
@@ -249,7 +255,6 @@ WebInspector.NavigationSidebarPanel.prototype = {
 
     hideEmptyContentPlaceholder: function()
     {
-        this._contentElement.classList.remove(WebInspector.NavigationSidebarPanel.ContentElementHiddenStyleClassName);
         if (this._emptyContentPlaceholderElement.parentNode)
             this._emptyContentPlaceholderElement.parentNode.removeChild(this._emptyContentPlaceholderElement);
 
@@ -271,6 +276,11 @@ WebInspector.NavigationSidebarPanel.prototype = {
         }
     },
 
+    updateCustomContentOverflow: function()
+    {
+        // Implemented by subclasses if needed.
+    },
+
     applyFiltersToTreeElement: function(treeElement)
     {
         if (!this._filterBar.hasActiveFilters()) {
@@ -374,6 +384,8 @@ WebInspector.NavigationSidebarPanel.prototype = {
 
     _updateContentOverflowShadowVisibility: function()
     {
+        this.updateCustomContentOverflow();
+
         var scrollHeight = this._contentElement.scrollHeight;
         var offsetHeight = this._contentElement.offsetHeight;
 

Source/WebInspectorUI/UserInterface/ResourceClusterContentView.js

@@ -64,11 +64,6 @@ WebInspector.ResourceClusterContentView.prototype = {
         return this._resource;
     },
 
-    get allowedNavigationSidebarPanels()
-    {
-        return ["resource", "debugger"];
-    },
-
     get responseContentView()
     {
         if (this._responseContentView)

Source/WebInspectorUI/UserInterface/TimelineContentView.css

+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.timeline > .view-container {
+    position: absolute;
+    top: 130px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+}

Source/WebInspectorUI/UserInterface/TimelineContentView.js

+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineContentView = function(recording)
+{
+    WebInspector.ContentView.call(this, recording);
+
+    this.element.classList.add(WebInspector.TimelineContentView.StyleClassName);
+};
+
+WebInspector.TimelineContentView.StyleClassName = "timeline";
+WebInspector.TimelineContentView.ViewContainerStyleClassName = "view-container";
+
+WebInspector.TimelineContentView.prototype = {
+    constructor: WebInspector.TimelineContentView,
+    __proto__: WebInspector.ContentView.prototype,
+
+    // Public
+
+    showOverviewTimelineView: function()
+    {
+        // FIXME: Implement.
+    },
+
+    showTimelineView: function(identifier)
+    {
+        // FIXME: Implement.
+    },
+
+    get allowedNavigationSidebarPanels()
+    {
+        return ["timeline"];
+    },
+
+    get supportsSplitContentBrowser()
+    {
+        // The layout of the overview and split content browser don't work well.
+        return false;
+    }
+};

Source/WebInspectorUI/UserInterface/InstrumentIcons.css → Source/WebInspectorUI/UserInterface/TimelineIcons.css

@@ -27,14 +27,26 @@
     content: -webkit-image-set(url(Images/Network.png) 1x, url(Images/Network@2x.png) 2x);
 }
 
+.network-icon.large .icon {
+    content: -webkit-image-set(url(Images/NetworkLarge.png) 1x, url(Images/NetworkLarge@2x.png) 2x);
+}
+
 .colors-icon .icon {
     content: -webkit-image-set(url(Images/Colors.png) 1x, url(Images/Colors@2x.png) 2x);
 }
 
+.colors-icon.large .icon {
+    content: -webkit-image-set(url(Images/ColorsLarge.png) 1x, url(Images/ColorsLarge@2x.png) 2x);
+}
+
 .script-icon .icon {
     content: -webkit-image-set(url(Images/Script.png) 1x, url(Images/Script@2x.png) 2x);
 }
 
+.script-icon.large .icon {
+    content: -webkit-image-set(url(Images/ScriptLarge.png) 1x, url(Images/ScriptLarge@2x.png) 2x);
+}
+
 .stopwatch-icon .icon {
     content: -webkit-image-set(url(Images/Stopwatch.png) 1x, url(Images/Stopwatch@2x.png) 2x);
 }

Source/WebInspectorUI/UserInterface/TimelineSidebarPanel.css

@@ -23,5 +23,119 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-.sidebar > .panel.timeline {
+.sidebar > .panel.timeline > .navigation-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+}
+
+.sidebar > .panel.timeline > .title-bar {
+    position: absolute;
+    left: 0;
+    right: 0;
+
+    height: 22px;
+
+    border-bottom: 1px solid rgb(179, 179, 179);
+    background-image: -webkit-linear-gradient(top, rgb(238, 240, 244), rgb(224, 226, 230));
+
+    color: rgb(57, 57, 57);
+    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    font-size: 10px;
+    font-family: "Lucida Grande", sans-serif;
+    font-weight: bold;
+
+    padding: 4px 6px;
+
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.sidebar > .panel.timeline > .title-bar.timelines {
+    top: 22px;
+}
+
+.sidebar > .panel.timeline > .title-bar.timeline-events {
+    height: 23px;
+    border-top: 1px solid rgb(179, 179, 179);
+    top: 152px;
+}
+
+.sidebar > .panel.timeline > .timelines-content {
+    position: absolute;
+    top: 44px;
+    height: 108px;
+    left: 0;
+    right: 0;
+
+    overflow: hidden;
+}
+
+.sidebar > .panel.timeline > .timelines-content .close-button {
+    margin-top: 2px;
+    width: 12px;
+    height: 12px;
+
+    content: -webkit-image-set(url(Images/CloseTimeline.png) 1x, url(Images/CloseTimeline@2x.png) 2x);
+
+    visibility: hidden;
+}
+
+.sidebar > .panel.timeline > .timelines-content li.item .icon {
+    width: 24px;
+    height: 24px;
+    margin-top: 5px;
+}
+
+.sidebar > .panel.timeline > .timelines-content li.item.selected .close-button {
+    visibility: visible;
+}
+
+.sidebar > .panel.timeline > .timelines-content li.item:not(.selected):nth-child(even) {
+    background-color: rgba(0, 0, 0, 0.03);
+    background-clip: padding-box;
+}
+
+.sidebar > .panel.timeline > .timelines-content li.item:not(.selected):not(:first-child) {
+    border-top: 1px solid rgba(0, 0, 0, 0.09);
+}
+
+.sidebar > .panel.timeline > .timelines-content li.item.selected + li.item {
+    border-top-color: rgb(120, 139, 168);
+}
+
+.sidebar > .panel.timeline > .timelines-content :focus li.item.selected + li.item {
+    border-top-color: rgb(107, 130, 164);
+}
+
+.sidebar > .panel.timeline > .timelines-content .close-button:active {
+    opacity: 0.8;
+}
+
+.sidebar > .panel.timeline > .content {
+    top: 175px;
+}
+
+.sidebar > .panel.timeline > .content > .stripe-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    min-height: 100%;
+
+    background-image: -webkit-linear-gradient(top, transparent, transparent 50%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.03));
+    background-size: 100% 40px;
+
+    pointer-events: none;
+    display: none;
+}
+
+.sidebar > .panel.timeline.timeline-content-view-showing > .content > .stripe-background {
+    display: block;
 }

Source/WebInspectorUI/UserInterface/TimelineSidebarPanel.js

@@ -27,10 +27,158 @@ WebInspector.TimelineSidebarPanel = function()
 {
     WebInspector.NavigationSidebarPanel.call(this, "timeline", WebInspector.UIString("Timelines"), "Images/NavigationItemStopwatch.svg", "2");
 
-    this.filterBar.placeholder = WebInspector.UIString("Filter Timeline List");
+    this._timelineEventsTitleBarElement = document.createElement("div");
+    this._timelineEventsTitleBarElement.classList.add(WebInspector.TimelineSidebarPanel.TitleBarStyleClass);
+    this._timelineEventsTitleBarElement.classList.add(WebInspector.TimelineSidebarPanel.TimelineEventsTitleBarStyleClass);
+    this.element.insertBefore(this._timelineEventsTitleBarElement, this.element.firstChild);
+
+    this.contentTreeOutlineLabel = "";
+
+    this._timelinesContentContainer = document.createElement("div");
+    this._timelinesContentContainer.classList.add(WebInspector.TimelineSidebarPanel.TimelinesContentContainerStyleClass);
+    this.element.insertBefore(this._timelinesContentContainer, this.element.firstChild);
+
+    this._timelinesTreeOutline = this.createContentTreeOutline(true, true);
+    this._timelinesTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
+    this._timelinesTreeOutline.onselect = this._timelinesTreeElementSelected.bind(this);
+    this._timelinesContentContainer.appendChild(this._timelinesTreeOutline.element);
+
+    var timelinesTitleBarElement = document.createElement("div");
+    timelinesTitleBarElement.textContent = WebInspector.UIString("Timelines");
+    timelinesTitleBarElement.classList.add(WebInspector.TimelineSidebarPanel.TitleBarStyleClass);
+    timelinesTitleBarElement.classList.add(WebInspector.TimelineSidebarPanel.TimelinesTitleBarStyleClass);
+    this.element.insertBefore(timelinesTitleBarElement, this.element.firstChild);
+
+    this._navigationBar = new WebInspector.NavigationBar;
+    this.element.insertBefore(this._navigationBar.element, this.element.firstChild);
+
+    function createTimelineTreeElement(label, iconClass, identifier)
+    {
+        var treeElement = new WebInspector.GeneralTreeElement([iconClass, WebInspector.TimelineSidebarPanel.LargeIconStyleClass], label, null, identifier);
+        var closeButton = document.createElement("img");
+        closeButton.classList.add(WebInspector.TimelineSidebarPanel.CloseButtonStyleClass);
+        closeButton.addEventListener("click", this.showTimelineOverview.bind(this));
+        treeElement.status = closeButton;
+        return treeElement;
+    }
+
+    var networkTimelineTreeElement = createTimelineTreeElement.call(this, WebInspector.UIString("Network Requests"), WebInspector.TimelineSidebarPanel.NetworkIconStyleClass, WebInspector.TimelineRecord.Type.Network);
+    var layoutTimelineTreeElement = createTimelineTreeElement.call(this, WebInspector.UIString("Layout & Rendering"), WebInspector.TimelineSidebarPanel.ColorsIconStyleClass, WebInspector.TimelineRecord.Type.Layout);
+    var scriptTimelineTreeElement = createTimelineTreeElement.call(this, WebInspector.UIString("JavaScript & Events"), WebInspector.TimelineSidebarPanel.ScriptIconStyleClass, WebInspector.TimelineRecord.Type.Script);
+
+    this._timelinesTreeOutline.appendChild(networkTimelineTreeElement);
+    this._timelinesTreeOutline.appendChild(layoutTimelineTreeElement);
+    this._timelinesTreeOutline.appendChild(scriptTimelineTreeElement);
+
+    this._timelineTreeElementMap = {
+        [WebInspector.TimelineRecord.Type.Network]: networkTimelineTreeElement,
+        [WebInspector.TimelineRecord.Type.Layout]: layoutTimelineTreeElement,
+        [WebInspector.TimelineRecord.Type.Script]: scriptTimelineTreeElement
+    };
+
+    this._timelineOverviewTreeElement = new WebInspector.GeneralTreeElement(WebInspector.TimelineSidebarPanel.StopwatchIconStyleClass, WebInspector.UIString("Timelines"), null, WebInspector.timelineManager.recording);
+    this._timelineOverviewTreeElement.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this.showTimelineOverview, this);
+
+    this._stripeBackgroundElement = document.createElement("div");
+    this._stripeBackgroundElement.className = WebInspector.TimelineSidebarPanel.StripeBackgroundStyleClass;
+    this.contentElement.insertBefore(this._stripeBackgroundElement, this.contentElement.firstChild);
+
+    function delayedWork()
+    {
+        // Prime the creation of the singleton TimelineContentCiew since it needs to listen for events.
+        // It needs to be delayed since TimelineContentView depends on WebInspector.timelineSidebarPanel existing.
+        this._timelineContentView = WebInspector.contentBrowser.contentViewForRepresentedObject(WebInspector.timelineManager.recording);
+    }
+
+    setTimeout(delayedWork.bind(this), 0);
 };
 
+WebInspector.TimelineSidebarPanel.TitleBarStyleClass = "title-bar";
+WebInspector.TimelineSidebarPanel.TimelinesTitleBarStyleClass = "timelines";
+WebInspector.TimelineSidebarPanel.TimelineEventsTitleBarStyleClass = "timeline-events";
+WebInspector.TimelineSidebarPanel.TimelinesContentContainerStyleClass = "timelines-content";
+WebInspector.TimelineSidebarPanel.StripeBackgroundStyleClass = "stripe-background";
+WebInspector.TimelineSidebarPanel.CloseButtonStyleClass = "close-button";
+WebInspector.TimelineSidebarPanel.LargeIconStyleClass = "large";
+WebInspector.TimelineSidebarPanel.StopwatchIconStyleClass = "stopwatch-icon";
+WebInspector.TimelineSidebarPanel.NetworkIconStyleClass = "network-icon";
+WebInspector.TimelineSidebarPanel.ColorsIconStyleClass = "colors-icon";
+WebInspector.TimelineSidebarPanel.ScriptIconStyleClass = "script-icon";
+
 WebInspector.TimelineSidebarPanel.prototype = {
     constructor: WebInspector.TimelineSidebarPanel,
     __proto__: WebInspector.NavigationSidebarPanel.prototype,
+
+    // Public
+
+    showDefaultContentView: function()
+    {
+        WebInspector.contentBrowser.showContentView(this._timelineContentView);
+    },
+
+    treeElementForRepresentedObject: function(representedObject)
+    {
+        if (representedObject instanceof WebInspector.TimelineRecording)
+            return this._timelineOverviewTreeElement;
+
+        // The main resource is used as the representedObject instead of Frame in our tree.
+        if (representedObject instanceof WebInspector.Frame)
+            representedObject = representedObject.mainResource;
+
+        return this.contentTreeOutline.getCachedTreeElement(representedObject);
+    },
+
+    get contentTreeOutlineLabel()
+    {
+        return this._timelineEventsTitleBarElement.textContent;
+    },
+
+    set contentTreeOutlineLabel(label)
+    {
+        label = label || WebInspector.UIString("Timeline Events");
+
+        this._timelineEventsTitleBarElement.textContent = label;
+        this.filterBar.placeholder = WebInspector.UIString("Filter %s").format(label);
+    },
+
+    showTimelineOverview: function()
+    {
+        if (this._timelinesTreeOutline.selectedTreeElement)
+            this._timelinesTreeOutline.selectedTreeElement.deselect();
+
+        this._timelineContentView.showOverviewTimelineView();
+        WebInspector.contentBrowser.showContentView(this._timelineContentView);
+    },
+
+    showTimelineView: function(identifier)
+    {
+        if (!this._timelineTreeElementMap[identifier])
+            return;
+
+        this._timelineTreeElementMap[identifier].select(true, false, true, true);
+
+        this._timelineContentView.showTimelineView(identifier);
+        WebInspector.contentBrowser.showContentView(this._timelineContentView);
+    },
+
+    // Protected
+
+    updateCustomContentOverflow: function()
+    {
+        if (!this._stripeBackgroundElement)
+            return;
+
+        var contentHeight = this.contentTreeOutline.element.offsetHeight;
+        var currentHeight = parseInt(this._stripeBackgroundElement.style.height);
+        if (currentHeight !== contentHeight)
+            this._stripeBackgroundElement.style.height = contentHeight + "px";
+    },
+
+    // Private
+
+    _timelinesTreeElementSelected: function(treeElement