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>
Improve scroll performance of WebInspector.TreeOutlineDataGridSynchronizer.
......
......@@ -85,7 +85,7 @@
<link rel="stylesheet" href="TimelineContentView.css">
<link rel="stylesheet" href="OverviewTimelineView.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="TimelineOverview.css">
<link rel="stylesheet" href="ProfileView.css">
......@@ -343,7 +343,7 @@
<script src="IndeterminateProgressSpinner.js"></script>
<script src="TimelineSidebarPanel.js"></script>
<script src="SourceCodeTimelineTreeElement.js"></script>
<script src="TimelineDecorations.js"></script>
<script src="TimelineRuler.js"></script>
<script src="TimelineDataGrid.js"></script>
<script src="LayoutTimelineDataGrid.js"></script>
<script src="ScriptTimelineDataGrid.js"></script>
......
......@@ -23,7 +23,7 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
.timeline-view.overview > .timeline-decorations {
.timeline-view.overview > .timeline-ruler {
position: absolute;
top: 0;
left: 0;
......@@ -31,12 +31,12 @@
bottom: 0;
}
.timeline-view.overview > .timeline-decorations > .header {
border-bottom: 1px solid rgb(200, 200, 200);
.timeline-view.overview > .timeline-ruler > .header {
border-top: 1px solid rgb(200, 200, 200);
height: 23px;
}
.timeline-view.overview > .timeline-decorations > .event-markers {
.timeline-view.overview > .timeline-ruler > .event-markers {
top: 23px;
}
......
......@@ -34,8 +34,8 @@ WebInspector.OverviewTimelineView = function()
this._treeOutlineDataGridSynchronizer = new WebInspector.TreeOutlineDataGridSynchronizer(this._contentTreeOutline, this._dataGrid);
this._timelineDecorations = new WebInspector.TimelineDecorations;
this.element.appendChild(this._timelineDecorations.element);
this._timelineRuler = new WebInspector.TimelineRuler;
this.element.appendChild(this._timelineRuler.element);
this.element.classList.add(WebInspector.OverviewTimelineView.StyleClassName);
this.element.appendChild(this._dataGrid.element);
......@@ -71,6 +71,11 @@ WebInspector.OverviewTimelineView.prototype = {
this._treeOutlineDataGridSynchronizer.synchronize();
},
updateLayout: function()
{
this._timelineRuler.updateLayout();
},
// Private
_compareTreeElementsByDetails: function(a, b)
......
......@@ -23,47 +23,39 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
.timeline-decorations {
.timeline-ruler {
position: relative;
pointer-events: none;
}
.timeline-decorations > .header {
border-top: 1px solid rgb(200, 200, 200);
.timeline-ruler > .header {
border-bottom: 1px solid rgb(200, 200, 200);
height: 22px;
position: relative;
}
.timeline-decorations > .header > .divider {
.timeline-ruler > .header > .divider {
position: absolute;
width: 1px;
top: 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-decorations > .header > .divider:last-child {
background-image: none;
}
.timeline-decorations > .header > .divider > .label {
.timeline-ruler > .header > .divider > .label {
position: absolute;
top: 3px;
right: 4px;
top: 5px;
right: 5px;
font-size: 9px;
font-family: "Lucida Grande", sans-serif;
color: rgb(128, 128, 128);
white-space: nowrap;
}
.timeline-decorations > .header > .divider:first-child > .label {
display: none;
}
.timeline-decorations > .event-markers {
.timeline-ruler > .event-markers {
position: absolute;
top: 22px;
left: 0;
......@@ -71,7 +63,7 @@
bottom: 0;
}
.timeline-decorations > .event-markers > .event-marker-tooltip {
.timeline-ruler > .event-markers > .event-marker-tooltip {
position: absolute;
top: 0;
bottom: 0;
......@@ -81,7 +73,7 @@
pointer-events: auto;
}
.timeline-decorations > .event-markers > .event-marker {
.timeline-ruler > .event-markers > .event-marker {
position: absolute;
top: 0;
bottom: 0;
......@@ -93,14 +85,14 @@
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);
}
.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);
}
.timeline-decorations > .event-markers > .event-marker.timestamp {
.timeline-ruler > .event-markers > .event-marker.timestamp {
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