- Revision
- 197473
- Author
- [email protected]
- Date
- 2016-03-02 16:21:00 -0800 (Wed, 02 Mar 2016)
Log Message
Web Inspector: Timelines UI redesign: add the timelines tree outline to the TimelineOverview
https://bugs.webkit.org/show_bug.cgi?id=153034
<rdar://problem/24195628>
Reviewed by Timothy Hatcher.
Move the Timelines tree outline to the overview, in preparation for <https://webkit.org/b/153036>.
* UserInterface/Views/OverviewTimelineView.css:
(.timeline-view.overview > .timeline-ruler > .header): Deleted.
(.timeline-view.overview > .timeline-ruler > .event-markers): Deleted.
These are now part of the default ruler style.
* UserInterface/Views/TimelineOverview.css:
(.timeline-overview > .tree-outline.timelines):
(.timeline-overview > .tree-outline.timelines::before):
(body.window-inactive .timeline-overview > .tree-outline.timelines):
(.timeline-overview.frames > .tree-outline.timelines):
(.timeline-overview > .tree-outline.timelines .close-button):
(.timeline-overview > .tree-outline.timelines .item.selected .close-button):
(.timeline-overview > .tree-outline.timelines .item:not(.selected):nth-child(even)):
(.timeline-overview > .tree-outline.timelines .item:not(.selected):not(:first-child)):
(.timeline-overview > .tree-outline.timelines .item.selected + .item):
(body.window-inactive .timeline-overview > .tree-outline.timelines .item.selected + .item):
(.timeline-overview > .tree-outline.timelines :focus .item.selected + .item):
(.timeline-overview > .scroll-container):
(.timeline-overview.frames > .scroll-container):
(.timeline-overview > .timeline-ruler):
(.timeline-overview.frames > .timeline-ruler):
(.timeline-overview > .timeline-ruler > .markers):
(.timeline-overview > .graphs-container):
(.timeline-overview.frames > .graphs-container):
Styles for the timelines tree outline. A content element is inserted before the
tree to fill the gap created by the timeline ruler. For now the tree has a fixed
width of 185px, and is hidden when displaying the FPS instrument.
* UserInterface/Views/TimelineOverview.js:
(WebInspector.TimelineOverview):
(WebInspector.TimelineOverview.prototype.get selectedTimeline):
(WebInspector.TimelineOverview.prototype.set selectedTimeline):
Make the selected timeline accessible to the parent view, since the overview doesn't
have a "represented object", or receive ContentView change notifications.
(WebInspector.TimelineOverview.prototype._instrumentAdded):
(WebInspector.TimelineOverview.prototype._instrumentRemoved):
(WebInspector.TimelineOverview.prototype._viewModeDidChange):
Add and remove instrument tree elements. Each tree element is created with a height
equal to it's overview graph, and is shown/hidden based on the current view mode.
(WebInspector.TimelineOverview.prototype._timelinesTreeSelectionDidChange):
Update the selected timeline and dispatch change event.
* UserInterface/Views/TimelineRecordingContentView.js:
(WebInspector.TimelineRecordingContentView):
(WebInspector.TimelineRecordingContentView.prototype._currentContentViewDidChange):
(WebInspector.TimelineRecordingContentView.prototype._updateTimelineOverviewHeight):
(WebInspector.TimelineRecordingContentView.prototype._timelineSelected):
Sync the overview's timeline selection with the current ContentView's represented object.
* UserInterface/Views/TimelineRuler.css:
(.timeline-ruler > .header):
(.timeline-ruler > .header > .divider > .label):
(.timeline-ruler > .selection-drag):
(.timeline-ruler > .selection-handle):
Ruler height changed to 23px, to be consistent with the DataGrid header.
* UserInterface/Views/TreeOutline.css:
(.tree-outline.large .item .icon):
Large icon style updated to match TimelineSidebarPanel.css. The 32px
size is outdated and no longer used.
* UserInterface/Views/Variables.css:
(:root):
New color variables, used by TimelineOverview.css.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (197472 => 197473)
--- trunk/Source/WebInspectorUI/ChangeLog 2016-03-03 00:19:05 UTC (rev 197472)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-03-03 00:21:00 UTC (rev 197473)
@@ -1,3 +1,80 @@
+2016-03-02 Matt Baker <[email protected]>
+
+ Web Inspector: Timelines UI redesign: add the timelines tree outline to the TimelineOverview
+ https://bugs.webkit.org/show_bug.cgi?id=153034
+ <rdar://problem/24195628>
+
+ Reviewed by Timothy Hatcher.
+
+ Move the Timelines tree outline to the overview, in preparation for <https://webkit.org/b/153036>.
+
+ * UserInterface/Views/OverviewTimelineView.css:
+ (.timeline-view.overview > .timeline-ruler > .header): Deleted.
+ (.timeline-view.overview > .timeline-ruler > .event-markers): Deleted.
+ These are now part of the default ruler style.
+
+ * UserInterface/Views/TimelineOverview.css:
+ (.timeline-overview > .tree-outline.timelines):
+ (.timeline-overview > .tree-outline.timelines::before):
+ (body.window-inactive .timeline-overview > .tree-outline.timelines):
+ (.timeline-overview.frames > .tree-outline.timelines):
+ (.timeline-overview > .tree-outline.timelines .close-button):
+ (.timeline-overview > .tree-outline.timelines .item.selected .close-button):
+ (.timeline-overview > .tree-outline.timelines .item:not(.selected):nth-child(even)):
+ (.timeline-overview > .tree-outline.timelines .item:not(.selected):not(:first-child)):
+ (.timeline-overview > .tree-outline.timelines .item.selected + .item):
+ (body.window-inactive .timeline-overview > .tree-outline.timelines .item.selected + .item):
+ (.timeline-overview > .tree-outline.timelines :focus .item.selected + .item):
+ (.timeline-overview > .scroll-container):
+ (.timeline-overview.frames > .scroll-container):
+ (.timeline-overview > .timeline-ruler):
+ (.timeline-overview.frames > .timeline-ruler):
+ (.timeline-overview > .timeline-ruler > .markers):
+ (.timeline-overview > .graphs-container):
+ (.timeline-overview.frames > .graphs-container):
+ Styles for the timelines tree outline. A content element is inserted before the
+ tree to fill the gap created by the timeline ruler. For now the tree has a fixed
+ width of 185px, and is hidden when displaying the FPS instrument.
+
+ * UserInterface/Views/TimelineOverview.js:
+ (WebInspector.TimelineOverview):
+ (WebInspector.TimelineOverview.prototype.get selectedTimeline):
+ (WebInspector.TimelineOverview.prototype.set selectedTimeline):
+ Make the selected timeline accessible to the parent view, since the overview doesn't
+ have a "represented object", or receive ContentView change notifications.
+
+ (WebInspector.TimelineOverview.prototype._instrumentAdded):
+ (WebInspector.TimelineOverview.prototype._instrumentRemoved):
+ (WebInspector.TimelineOverview.prototype._viewModeDidChange):
+ Add and remove instrument tree elements. Each tree element is created with a height
+ equal to it's overview graph, and is shown/hidden based on the current view mode.
+
+ (WebInspector.TimelineOverview.prototype._timelinesTreeSelectionDidChange):
+ Update the selected timeline and dispatch change event.
+
+ * UserInterface/Views/TimelineRecordingContentView.js:
+ (WebInspector.TimelineRecordingContentView):
+ (WebInspector.TimelineRecordingContentView.prototype._currentContentViewDidChange):
+ (WebInspector.TimelineRecordingContentView.prototype._updateTimelineOverviewHeight):
+ (WebInspector.TimelineRecordingContentView.prototype._timelineSelected):
+ Sync the overview's timeline selection with the current ContentView's represented object.
+
+ * UserInterface/Views/TimelineRuler.css:
+ (.timeline-ruler > .header):
+ (.timeline-ruler > .header > .divider > .label):
+ (.timeline-ruler > .selection-drag):
+ (.timeline-ruler > .selection-handle):
+ Ruler height changed to 23px, to be consistent with the DataGrid header.
+
+ * UserInterface/Views/TreeOutline.css:
+ (.tree-outline.large .item .icon):
+ Large icon style updated to match TimelineSidebarPanel.css. The 32px
+ size is outdated and no longer used.
+
+ * UserInterface/Views/Variables.css:
+ (:root):
+ New color variables, used by TimelineOverview.css.
+
2016-02-29 Devin Rousso <[email protected]>
Web Inspector: Add direct number inputs to Bezier editor
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.css (197472 => 197473)
--- trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.css 2016-03-03 00:19:05 UTC (rev 197472)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.css 2016-03-03 00:21:00 UTC (rev 197473)
@@ -38,6 +38,7 @@
.timeline-view.overview > .timeline-ruler > .event-markers {
top: 23px;
+ border-top: 1px solid var(--border-color);
}
.timeline-view.overview > .data-grid {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css (197472 => 197473)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css 2016-03-03 00:19:05 UTC (rev 197472)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css 2016-03-03 00:21:00 UTC (rev 197473)
@@ -1,5 +1,5 @@
/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2013, 2016 Apple Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
@@ -23,9 +23,67 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
+.timeline-overview > .tree-outline.timelines {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 185px;
+ z-index: var(--z-index-header);
+ background-color: var(--panel-background-color);
+ border-right: 1px solid var(--border-color);
+}
+
+.timeline-overview > .tree-outline.timelines::before {
+ display: block;
+ content: "";
+ left: 0;
+ top: 0;
+ width: 185px;
+ height: 23px;
+ box-sizing: border-box;
+ background-color: white;
+ border-right: 1px solid var(--border-color);
+ border-bottom: 1px solid var(--border-color);
+}
+
+.timeline-overview.frames > .tree-outline.timelines {
+ display: none;
+}
+
+.timeline-overview > .tree-outline.timelines .close-button {
+ width: 14px;
+
+ visibility: hidden;
+}
+
+.timeline-overview > .tree-outline.timelines .item.selected .close-button {
+ visibility: visible;
+}
+
+.timeline-overview > .tree-outline.timelines .item:not(.selected):nth-child(even) {
+ background-color: hsla(0, 0%, 0%, 0.03);
+ background-clip: padding-box;
+}
+
+.timeline-overview > .tree-outline.timelines .item:not(.selected):not(:first-child) {
+ border-top: 1px solid hsla(0, 0%, 0%, 0.09);
+}
+
+.timeline-overview > .tree-outline.timelines .item.selected + .item {
+ border-top-color: hsl(0, 0%, 83%);
+}
+
+body.window-inactive .timeline-overview > .tree-outline.timelines .item.selected + .item {
+ border-top-color: hsl(0, 0%, 83%);
+}
+
+.timeline-overview > .tree-outline.timelines :focus .item.selected + .item {
+ border-top-color: hsl(209, 100%, 49%);
+}
+
.timeline-overview > .scroll-container {
position: absolute;
- left: 0;
+ left: 185px;
right: 0;
bottom: 0;
height: 16px;
@@ -37,6 +95,10 @@
z-index: calc(var(--z-index-resizer) + 1);
}
+.timeline-overview.frames > .scroll-container {
+ left: 0;
+}
+
.timeline-overview:hover > .scroll-container {
opacity: 0.75;
}
@@ -48,13 +110,17 @@
.timeline-overview > .timeline-ruler {
position: absolute;
top: 0;
- left: 0;
+ left: 185px;
bottom: 0;
right: 0;
}
+.timeline-overview.frames > .timeline-ruler {
+ left: 0;
+}
+
.timeline-overview > .timeline-ruler > .markers {
- top: 28px;
+ top: 23px;
}
.timeline-overview.frames > .timeline-ruler > .markers > .marker:not(.current-time) {
@@ -76,12 +142,16 @@
.timeline-overview > .graphs-container {
position: absolute;
- top: 29px;
- left: 0;
+ top: 23px;
+ left: 185px;
bottom: 0;
right: 0;
}
+.timeline-overview.frames > .graphs-container {
+ left: 0;
+}
+
body.mac-platform.legacy .timeline-overview > .graphs-container {
top: 22px;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js (197472 => 197473)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js 2016-03-03 00:19:05 UTC (rev 197472)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js 2016-03-03 00:21:00 UTC (rev 197473)
@@ -1,5 +1,5 @@
/*
- * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2013, 2015-2016 Apple Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
@@ -57,6 +57,15 @@
this._overviewGraphsByTypeMap = new Map;
+ this._timelinesTreeOutline = new WebInspector.TreeOutline;
+ this._timelinesTreeOutline.element.classList.add("timelines");
+ this._timelinesTreeOutline.disclosureButtons = false;
+ this._timelinesTreeOutline.large = true;
+ this._timelinesTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._timelinesTreeSelectionDidChange, this);
+ this.element.appendChild(this._timelinesTreeOutline.element);
+
+ this._treeElementsByTypeMap = new Map;
+
this._timelineRuler = new WebInspector.TimelineRuler;
this._timelineRuler.allowsClippedLabels = true;
this._timelineRuler.allowsTimeRangeSelection = true;
@@ -86,6 +95,7 @@
this._cachedScrollContainerWidth = NaN;
this._timelineRulerSelectionChanged = false;
this._viewMode = WebInspector.TimelineOverview.ViewMode.Timelines;
+ this._selectedTimeline = null;;
for (let instrument of this._recording.instruments)
this._instrumentAdded(instrument);
@@ -98,6 +108,28 @@
// Public
+ get selectedTimeline()
+ {
+ return this._selectedTimeline;
+ }
+
+ set selectedTimeline(x)
+ {
+ if (this._selectedTimeline === x)
+ return;
+
+ this._selectedTimeline = x;
+ if (this._selectedTimeline) {
+ let treeElement = this._treeElementsByTypeMap.get(this._selectedTimeline.type);
+ console.assert(treeElement, "Missing tree element for timeline", this._selectedTimeline);
+
+ let omitFocus = true;
+ let wasSelectedByUser = false;
+ treeElement.select(omitFocus, wasSelectedByUser);
+ } else if (this._timelinesTreeOutline.selectedTreeElement)
+ this._timelinesTreeOutline.selectedTreeElement.deselect();
+ }
+
get viewMode()
{
return this._viewMode;
@@ -546,6 +578,7 @@
let timeline = this._recording.timelineForInstrument(instrument);
console.assert(!this._overviewGraphsByTypeMap.has(timeline.type), timeline);
+ console.assert(!this._treeElementsByTypeMap.has(timeline.type), timeline);
let overviewGraph = WebInspector.TimelineOverviewGraph.createForTimeline(timeline, this);
overviewGraph.addEventListener(WebInspector.TimelineOverviewGraph.Event.RecordSelected, this._recordSelected, this);
@@ -553,8 +586,24 @@
this._graphsContainerView.addSubview(overviewGraph);
- if (!this._canShowTimelineType(timeline.type))
+ let displayName = WebInspector.TimelineTabContentView.displayNameForTimeline(timeline);
+ let iconClassName = WebInspector.TimelineTabContentView.iconClassNameForTimeline(timeline);
+ let genericClassName = WebInspector.TimelineTabContentView.genericClassNameForTimeline(timeline);
+ let treeElement = new WebInspector.GeneralTreeElement([iconClassName, genericClassName], displayName, null, timeline);
+ let tooltip = WebInspector.UIString("Close %s timeline view").format(displayName);
+ let button = new WebInspector.TreeElementStatusButton(useSVGSymbol("Images/CloseLarge.svg", "close-button", tooltip));
+ button.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, () => { treeElement.deselect(); });
+ treeElement.status = button.element;
+
+ this._timelinesTreeOutline.appendChild(treeElement);
+ treeElement.element.style.height = overviewGraph.height + "px";
+
+ this._treeElementsByTypeMap.set(timeline.type, treeElement);
+
+ if (!this._canShowTimelineType(timeline.type)) {
overviewGraph.hidden();
+ treeElement.hidden = true;
+ }
}
_instrumentRemoved(event)
@@ -568,6 +617,11 @@
let overviewGraph = this._overviewGraphsByTypeMap.take(timeline.type);
overviewGraph.removeEventListener(WebInspector.TimelineOverviewGraph.Event.RecordSelected, this._recordSelected, this);
this._graphsContainerView.removeSubview(overviewGraph);
+
+ let treeElement = this._treeElementsByTypeMap.take(timeline.type);
+ let shouldSuppressOnDeselect = false;
+ let shouldSuppressSelectSibling = true;
+ this._timelinesTreeOutline.removeChild(treeElement, shouldSuppressOnDeselect, shouldSuppressSelectSibling);
}
_markerAdded(event)
@@ -675,10 +729,14 @@
this.selectionDuration = this._currentSettings.selectionDurationSetting.value;
for (let [type, overviewGraph] of this._overviewGraphsByTypeMap) {
- if (this._canShowTimelineType(type))
+ let treeElement = this._treeElementsByTypeMap.get(type);
+ console.assert(treeElement, "Missing tree element for timeline type", type)
+
+ treeElement.hidden = !this._canShowTimelineType(type);
+ if (treeElement.hidden)
+ overviewGraph.hidden();
+ else
overviewGraph.shown();
- else
- overviewGraph.hidden();
}
this.element.classList.toggle("frames", isRenderingFramesMode);
@@ -706,6 +764,20 @@
{
return this._viewMode === WebInspector.TimelineOverview.ViewMode.Timelines ? this._timelinesViewModeSettings : this._renderingFramesViewModeSettings;
}
+
+ _timelinesTreeSelectionDidChange()
+ {
+ let treeElement = this._timelinesTreeOutline.selectedTreeElement;
+ let timeline = null;
+ if (treeElement) {
+ timeline = treeElement.representedObject;
+ console.assert(timeline instanceof WebInspector.Timeline, timeline);
+ console.assert(this._recording.timelines.get(timeline.type) === timeline, timeline);
+ }
+
+ this._selectedTimeline = timeline;
+ this.dispatchEventToListeners(WebInspector.TimelineOverview.Event.TimelineSelected);
+ }
};
WebInspector.TimelineOverview.ScrollDeltaDenominator = 500;
@@ -717,5 +789,6 @@
WebInspector.TimelineOverview.Event = {
RecordSelected: "timeline-overview-record-selected",
+ TimelineSelected: "timeline-overview-timeline-selected",
TimeRangeSelectionChanged: "timeline-overview-time-range-selection-changed"
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js (197472 => 197473)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js 2016-03-03 00:19:05 UTC (rev 197472)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js 2016-03-03 00:21:00 UTC (rev 197473)
@@ -41,6 +41,7 @@
this._timelineOverview = new WebInspector.TimelineOverview(this._recording);
this._timelineOverview.addEventListener(WebInspector.TimelineOverview.Event.TimeRangeSelectionChanged, this._timeRangeSelectionChanged, this);
this._timelineOverview.addEventListener(WebInspector.TimelineOverview.Event.RecordSelected, this._recordSelected, this);
+ this._timelineOverview.addEventListener(WebInspector.TimelineOverview.Event.TimelineSelected, this._timelineSelected, this);
this.addSubview(this._timelineOverview);
this._contentViewContainer = new WebInspector.ContentViewContainer;
@@ -338,6 +339,12 @@
this._updateTimelineViewSelection(timelineView);
timelineView.currentTime = this._currentTime;
+
+ let timeline = null;
+ if (timelineView.representedObject instanceof WebInspector.Timeline)
+ timeline = timelineView.representedObject;
+
+ this._timelineOverview.selectedTimeline = timeline;
}
this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
@@ -528,7 +535,7 @@
_updateTimelineOverviewHeight()
{
- const rulerHeight = 29;
+ const rulerHeight = 23;
let styleValue = (rulerHeight + this.timelineOverviewHeight) + "px";
this._timelineOverview.element.style.height = styleValue;
@@ -668,6 +675,15 @@
treeElement.revealAndSelect(false, false, false, true);
}
+ _timelineSelected()
+ {
+ let timeline = this._timelineOverview.selectedTimeline;
+ if (timeline)
+ this.showTimelineViewForTimeline(timeline);
+ else
+ this.showOverviewTimelineView();
+ }
+
_updateFrameSelection()
{
console.assert(this._renderingFrameTimeline);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css (197472 => 197473)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css 2016-03-03 00:19:05 UTC (rev 197472)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css 2016-03-03 00:21:00 UTC (rev 197473)
@@ -49,7 +49,7 @@
top: 0;
left: 0;
right: 0;
- height: 29px;
+ height: 23px;
}
.timeline-ruler > .header > .divider {
@@ -67,7 +67,7 @@
.timeline-ruler > .header > .divider > .label {
position: absolute;
- top: 8px;
+ top: 6px;
right: 5px;
font-size: 9px;
color: hsl(0, 0%, 50%);
@@ -156,7 +156,7 @@
.timeline-ruler > .selection-drag {
position: absolute;
top: 0;
- height: 29px;
+ height: 23px;
cursor: -webkit-grab;
pointer-events: all;
}
@@ -169,7 +169,7 @@
position: absolute;
top: 0;
width: 8px;
- height: 28px;
+ height: 22px;
border-radius: 5px;
background-color: hsl(0, 0%, 64%);
border: 1px solid white;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css (197472 => 197473)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css 2016-03-03 00:19:05 UTC (rev 197472)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css 2016-03-03 00:21:00 UTC (rev 197473)
@@ -127,8 +127,11 @@
}
.tree-outline.large .item .icon {
- width: 32px;
+ margin-top: 5px;
margin-right: 6px;
+
+ width: 24px;
+ height: 24px;
}
.tree-outline .item .status {
