Commit 8b8175d8 authored by timothy@apple.com's avatar timothy@apple.com

Clean up and refactor TimelineDecorations into TimelineRuler.

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

Reviewed by Joseph Pecoraro.

* UserInterface/Main.html:
* UserInterface/OverviewTimelineView.css:
(.timeline-view.overview > .timeline-ruler):
(.timeline-view.overview > .timeline-ruler > .header):
(.timeline-view.overview > .timeline-ruler > .event-markers):
Updated class names and border sides.

* UserInterface/OverviewTimelineView.js:
(WebInspector.OverviewTimelineView):
(WebInspector.OverviewTimelineView.prototype.updateLayout):
Call updateLayout on the TimelineRuler.

* UserInterface/TimelineRuler.css: Renamed from Source/WebInspectorUI/UserInterface/TimelineDecorations.css.
(.timeline-ruler):
(.timeline-ruler > .header):
(.timeline-ruler > .header > .divider):
(.timeline-ruler > .header > .divider > .label):
(.timeline-ruler > .event-markers):
(.timeline-ruler > .event-markers > .event-marker-tooltip):
(.timeline-ruler > .event-markers > .event-marker):
(.timeline-ruler > .event-markers > .event-marker.load-event):
(.timeline-ruler > .event-markers > .event-marker.dom-content-event):
(.timeline-ruler > .event-markers > .event-marker.timestamp):
Updated class names and border sides.

* UserInterface/TimelineRuler.js: Renamed from Source/WebInspectorUI/UserInterface/TimelineDecorations.js.
(WebInspector.TimelineRuler):
(WebInspector.TimelineRuler.prototype.get element):
(WebInspector.TimelineRuler.prototype.get headerElement):
(WebInspector.TimelineRuler.prototype.get allowsClippedLabels):
(WebInspector.TimelineRuler.prototype.set allowsClippedLabels):
(WebInspector.TimelineRuler.prototype.get zeroTime):
(WebInspector.TimelineRuler.prototype.set zeroTime):
(WebInspector.TimelineRuler.prototype.get startTime):
(WebInspector.TimelineRuler.prototype.set startTime):
(WebInspector.TimelineRuler.prototype.get duration):
(WebInspector.TimelineRuler.prototype.set duration):
(WebInspector.TimelineRuler.prototype.get endTime):
(WebInspector.TimelineRuler.prototype.set endTime):
(WebInspector.TimelineRuler.prototype.get secondsPerPixel):
(WebInspector.TimelineRuler.prototype.set secondsPerPixel):
(WebInspector.TimelineRuler.prototype.updateLayout.removeDividerAndSelectNext):
(WebInspector.TimelineRuler.prototype.updateLayout):
(WebInspector.TimelineRuler.prototype._needsLayout):
(WebInspector.TimelineRuler.prototype._recalculate):
Refactor so the times are stored on TimelineRuler and not passed in each time an update is needed.
Support dividers that don't always start at the zero position, allowing a sliding time ruler.
Support for a non-pinned ruler where the end time is not fixed and the scale is specified in
seconds-per-pixel.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@162407 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 50cb8c9a
2013-12-13 Timothy Hatcher <timothy@apple.com>
Clean up and refactor TimelineDecorations into TimelineRuler.
https://bugs.webkit.org/show_bug.cgi?id=125709
Reviewed by Joseph Pecoraro.
* UserInterface/Main.html:
* UserInterface/OverviewTimelineView.css:
(.timeline-view.overview > .timeline-ruler):
(.timeline-view.overview > .timeline-ruler > .header):
(.timeline-view.overview > .timeline-ruler > .event-markers):
Updated class names and border sides.
* UserInterface/OverviewTimelineView.js:
(WebInspector.OverviewTimelineView):
(WebInspector.OverviewTimelineView.prototype.updateLayout):
Call updateLayout on the TimelineRuler.
* UserInterface/TimelineRuler.css: Renamed from Source/WebInspectorUI/UserInterface/TimelineDecorations.css.
(.timeline-ruler):
(.timeline-ruler > .header):
(.timeline-ruler > .header > .divider):
(.timeline-ruler > .header > .divider > .label):
(.timeline-ruler > .event-markers):
(.timeline-ruler > .event-markers > .event-marker-tooltip):
(.timeline-ruler > .event-markers > .event-marker):
(.timeline-ruler > .event-markers > .event-marker.load-event):
(.timeline-ruler > .event-markers > .event-marker.dom-content-event):
(.timeline-ruler > .event-markers > .event-marker.timestamp):
Updated class names and border sides.
* UserInterface/TimelineRuler.js: Renamed from Source/WebInspectorUI/UserInterface/TimelineDecorations.js.
(WebInspector.TimelineRuler):
(WebInspector.TimelineRuler.prototype.get element):
(WebInspector.TimelineRuler.prototype.get headerElement):
(WebInspector.TimelineRuler.prototype.get allowsClippedLabels):
(WebInspector.TimelineRuler.prototype.set allowsClippedLabels):
(WebInspector.TimelineRuler.prototype.get zeroTime):
(WebInspector.TimelineRuler.prototype.set zeroTime):
(WebInspector.TimelineRuler.prototype.get startTime):
(WebInspector.TimelineRuler.prototype.set startTime):
(WebInspector.TimelineRuler.prototype.get duration):
(WebInspector.TimelineRuler.prototype.set duration):
(WebInspector.TimelineRuler.prototype.get endTime):
(WebInspector.TimelineRuler.prototype.set endTime):
(WebInspector.TimelineRuler.prototype.get secondsPerPixel):
(WebInspector.TimelineRuler.prototype.set secondsPerPixel):
(WebInspector.TimelineRuler.prototype.updateLayout.removeDividerAndSelectNext):
(WebInspector.TimelineRuler.prototype.updateLayout):
(WebInspector.TimelineRuler.prototype._needsLayout):
(WebInspector.TimelineRuler.prototype._recalculate):
Refactor so the times are stored on TimelineRuler and not passed in each time an update is needed.
Support dividers that don't always start at the zero position, allowing a sliding time ruler.
Support for a non-pinned ruler where the end time is not fixed and the scale is specified in
seconds-per-pixel.
2014-01-08 Timothy Hatcher <timothy@apple.com> 2014-01-08 Timothy Hatcher <timothy@apple.com>
Improve scroll performance of WebInspector.TreeOutlineDataGridSynchronizer. Improve scroll performance of WebInspector.TreeOutlineDataGridSynchronizer.
......
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
<link rel="stylesheet" href="TimelineContentView.css"> <link rel="stylesheet" href="TimelineContentView.css">
<link rel="stylesheet" href="OverviewTimelineView.css"> <link rel="stylesheet" href="OverviewTimelineView.css">
<link rel="stylesheet" href="TimelineIcons.css"> <link rel="stylesheet" href="TimelineIcons.css">
<link rel="stylesheet" href="TimelineDecorations.css"> <link rel="stylesheet" href="TimelineRuler.css">
<link rel="stylesheet" href="TimelineDataGrid.css"> <link rel="stylesheet" href="TimelineDataGrid.css">
<link rel="stylesheet" href="TimelineOverview.css"> <link rel="stylesheet" href="TimelineOverview.css">
<link rel="stylesheet" href="ProfileView.css"> <link rel="stylesheet" href="ProfileView.css">
...@@ -343,7 +343,7 @@ ...@@ -343,7 +343,7 @@
<script src="IndeterminateProgressSpinner.js"></script> <script src="IndeterminateProgressSpinner.js"></script>
<script src="TimelineSidebarPanel.js"></script> <script src="TimelineSidebarPanel.js"></script>
<script src="SourceCodeTimelineTreeElement.js"></script> <script src="SourceCodeTimelineTreeElement.js"></script>
<script src="TimelineDecorations.js"></script> <script src="TimelineRuler.js"></script>
<script src="TimelineDataGrid.js"></script> <script src="TimelineDataGrid.js"></script>
<script src="LayoutTimelineDataGrid.js"></script> <script src="LayoutTimelineDataGrid.js"></script>
<script src="ScriptTimelineDataGrid.js"></script> <script src="ScriptTimelineDataGrid.js"></script>
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
* THE POSSIBILITY OF SUCH DAMAGE. * THE POSSIBILITY OF SUCH DAMAGE.
*/ */
.timeline-view.overview > .timeline-decorations { .timeline-view.overview > .timeline-ruler {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
...@@ -31,12 +31,12 @@ ...@@ -31,12 +31,12 @@
bottom: 0; bottom: 0;
} }
.timeline-view.overview > .timeline-decorations > .header { .timeline-view.overview > .timeline-ruler > .header {
border-bottom: 1px solid rgb(200, 200, 200); border-top: 1px solid rgb(200, 200, 200);
height: 23px; height: 23px;
} }
.timeline-view.overview > .timeline-decorations > .event-markers { .timeline-view.overview > .timeline-ruler > .event-markers {
top: 23px; top: 23px;
} }
......
...@@ -34,8 +34,8 @@ WebInspector.OverviewTimelineView = function() ...@@ -34,8 +34,8 @@ WebInspector.OverviewTimelineView = function()
this._treeOutlineDataGridSynchronizer = new WebInspector.TreeOutlineDataGridSynchronizer(this._contentTreeOutline, this._dataGrid); this._treeOutlineDataGridSynchronizer = new WebInspector.TreeOutlineDataGridSynchronizer(this._contentTreeOutline, this._dataGrid);
this._timelineDecorations = new WebInspector.TimelineDecorations; this._timelineRuler = new WebInspector.TimelineRuler;
this.element.appendChild(this._timelineDecorations.element); this.element.appendChild(this._timelineRuler.element);
this.element.classList.add(WebInspector.OverviewTimelineView.StyleClassName); this.element.classList.add(WebInspector.OverviewTimelineView.StyleClassName);
this.element.appendChild(this._dataGrid.element); this.element.appendChild(this._dataGrid.element);
...@@ -71,6 +71,11 @@ WebInspector.OverviewTimelineView.prototype = { ...@@ -71,6 +71,11 @@ WebInspector.OverviewTimelineView.prototype = {
this._treeOutlineDataGridSynchronizer.synchronize(); this._treeOutlineDataGridSynchronizer.synchronize();
}, },
updateLayout: function()
{
this._timelineRuler.updateLayout();
},
// Private // Private
_compareTreeElementsByDetails: function(a, b) _compareTreeElementsByDetails: function(a, b)
......
...@@ -23,47 +23,39 @@ ...@@ -23,47 +23,39 @@
* THE POSSIBILITY OF SUCH DAMAGE. * THE POSSIBILITY OF SUCH DAMAGE.
*/ */
.timeline-decorations { .timeline-ruler {
position: relative; position: relative;
pointer-events: none; pointer-events: none;
} }
.timeline-decorations > .header { .timeline-ruler > .header {
border-top: 1px solid rgb(200, 200, 200); border-bottom: 1px solid rgb(200, 200, 200);
height: 22px; height: 22px;
position: relative; position: relative;
} }
.timeline-decorations > .header > .divider { .timeline-ruler > .header > .divider {
position: absolute; position: absolute;
width: 1px; width: 1px;
top: 0; top: 0;
bottom: 0; bottom: 0;
background-image: -webkit-linear-gradient(top, rgba(200, 200, 200, 1), rgba(200, 200, 200, 0) 85%); -webkit-transform: translateX(-1px);
background-image: -webkit-linear-gradient(bottom, rgba(200, 200, 200, 1), rgba(200, 200, 200, 0) 85%);
} }
.timeline-decorations > .header > .divider:first-child, .timeline-ruler > .header > .divider > .label {
.timeline-decorations > .header > .divider:last-child {
background-image: none;
}
.timeline-decorations > .header > .divider > .label {
position: absolute; position: absolute;
top: 3px; top: 5px;
right: 4px; right: 5px;
font-size: 9px; font-size: 9px;
font-family: "Lucida Grande", sans-serif; font-family: "Lucida Grande", sans-serif;
color: rgb(128, 128, 128); color: rgb(128, 128, 128);
white-space: nowrap; white-space: nowrap;
} }
.timeline-decorations > .header > .divider:first-child > .label { .timeline-ruler > .event-markers {
display: none;
}
.timeline-decorations > .event-markers {
position: absolute; position: absolute;
top: 22px; top: 22px;
left: 0; left: 0;
...@@ -71,7 +63,7 @@ ...@@ -71,7 +63,7 @@
bottom: 0; bottom: 0;
} }
.timeline-decorations > .event-markers > .event-marker-tooltip { .timeline-ruler > .event-markers > .event-marker-tooltip {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
...@@ -81,7 +73,7 @@ ...@@ -81,7 +73,7 @@
pointer-events: auto; pointer-events: auto;
} }
.timeline-decorations > .event-markers > .event-marker { .timeline-ruler > .event-markers > .event-marker {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
...@@ -93,14 +85,14 @@ ...@@ -93,14 +85,14 @@
border-left-color: rgba(128, 128, 128, 0.5); border-left-color: rgba(128, 128, 128, 0.5);
} }
.timeline-decorations > .event-markers > .event-marker.load-event { .timeline-ruler > .event-markers > .event-marker.load-event {
border-left-color: rgba(255, 0, 0, 0.5); border-left-color: rgba(255, 0, 0, 0.5);
} }
.timeline-decorations > .event-markers > .event-marker.dom-content-event { .timeline-ruler > .event-markers > .event-marker.dom-content-event {
border-left-color: rgba(0, 0, 255, 0.5); border-left-color: rgba(0, 0, 255, 0.5);
} }
.timeline-decorations > .event-markers > .event-marker.timestamp { .timeline-ruler > .event-markers > .event-marker.timestamp {
border-left-color: rgba(0, 110, 0, 0.5); border-left-color: rgba(0, 110, 0, 0.5);
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment