Commit fe816eba authored by timothy@apple.com's avatar 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):

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@162403 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent de77591f
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.
......
......@@ -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)
......
......@@ -63,11 +63,6 @@ WebInspector.FrameContentView.prototype = {
return this._frame;
},
get allowedNavigationSidebarPanels()
{
return ["resource", "debugger"];
},
get selectionPathComponents()
{
if (!this._contentViewContainer.currentContentView)
......
......@@ -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>
......
......@@ -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()
......
......@@ -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;
......
......@@ -64,11 +64,6 @@ WebInspector.ResourceClusterContentView.prototype = {
return this._resource;
},
get allowedNavigationSidebarPanels()
{
return ["resource", "debugger"];
},
get responseContentView()
{
if (this._responseContentView)
......
/*
* 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;
}
/*
* 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;
}
};
......@@ -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);
}
......
......@@ -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;
}
......@@ -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, selectedByUser)