Implement bar graph rendering for WebInspector.OverviewTimelineView.

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

Reviewed by Joseph Pecoraro.

* UserInterface/Main.html: Added new files.

* UserInterface/OverviewTimelineView.css:
(.timeline-view.overview > .data-grid td.graph-column):
(.timeline-view.overview > .data-grid td.graph-column > div):
(.timeline-view.overview > .data-grid td.graph-column .timeline-record-bar):
Position the bars in the DataGrid cells.

* UserInterface/OverviewTimelineView.js:
(WebInspector.OverviewTimelineView.prototype.updateLayout):
(WebInspector.OverviewTimelineView.prototype._addResourceToTreeIfNeeded):
(WebInspector.OverviewTimelineView.prototype._sourceCodeTimelineAdded):
Create the proper DataGridNodes for resources and source code timelines.

* UserInterface/ResourceTimelineDataGridNode.js:
(WebInspector.ResourceTimelineDataGridNode):
(WebInspector.ResourceTimelineDataGridNode.prototype.get records):
(WebInspector.ResourceTimelineDataGridNode.prototype.get resource):
(WebInspector.ResourceTimelineDataGridNode.prototype.get data):
(WebInspector.ResourceTimelineDataGridNode.prototype.createCellContent):
(WebInspector.ResourceTimelineDataGridNode.prototype.refresh):
(WebInspector.ResourceTimelineDataGridNode.prototype._needsRefresh):
(WebInspector.ResourceTimelineDataGridNode.prototype._goToResource):
Simplify by deferring the graph logic to the new TimelineDataGridNode base class.

* UserInterface/SourceCodeTimelineTimelineDataGridNode.js: Added.
(WebInspector.SourceCodeTimelineTimelineDataGridNode):
(WebInspector.SourceCodeTimelineTimelineDataGridNode.prototype.get records):
(WebInspector.SourceCodeTimelineTimelineDataGridNode.prototype.get sourceCodeTimeline):
(WebInspector.SourceCodeTimelineTimelineDataGridNode.prototype.get data):

* UserInterface/TimelineDataGridNode.js: Added.
(WebInspector.TimelineDataGridNode):
(WebInspector.TimelineDataGridNode.prototype.get records):
(WebInspector.TimelineDataGridNode.prototype.get data):
(WebInspector.TimelineDataGridNode.prototype.createCellContent):
(WebInspector.TimelineDataGridNode.prototype.refresh):
(WebInspector.TimelineDataGridNode.prototype.refreshGraph):
(WebInspector.TimelineDataGridNode.prototype.needsGraphRefresh):
Handles the graph column and manages the records and their bars.

* UserInterface/TimelineRecordBar.css: Added.
(.timeline-record-bar):
(.timeline-record-bar > .segment):
(.timeline-record-bar:not(.has-inactive-segment) > .segment):
(.timeline-record-bar.unfinished > .segment):
(.timeline-record-bar > .segment.inactive + .segment):
(:focus .selected .timeline-record-bar > .segment):
(.timeline-record-bar > .segment.inactive):
(.timeline-record-bar.timeline-record-type-network > .segment):
(.timeline-record-bar.timeline-record-type-layout > .segment):
(.timeline-record-bar.timeline-record-type-script > .segment):

* UserInterface/TimelineRecordBar.js: Added.
(WebInspector.TimelineRecordBar):
(WebInspector.TimelineRecordBar.prototype.get element):
(WebInspector.TimelineRecordBar.prototype.refresh):
(WebInspector.TimelineRecordBar.prototype._updateElementPosition):

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

Source/WebInspectorUI/ChangeLog

+2014-01-11  Timothy Hatcher  <timothy@apple.com>
+
+        Implement bar graph rendering for WebInspector.OverviewTimelineView.
+
+        https://bugs.webkit.org/show_bug.cgi?id=126831
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Main.html: Added new files.
+
+        * UserInterface/OverviewTimelineView.css:
+        (.timeline-view.overview > .data-grid td.graph-column):
+        (.timeline-view.overview > .data-grid td.graph-column > div):
+        (.timeline-view.overview > .data-grid td.graph-column .timeline-record-bar):
+        Position the bars in the DataGrid cells.
+
+        * UserInterface/OverviewTimelineView.js:
+        (WebInspector.OverviewTimelineView.prototype.updateLayout):
+        (WebInspector.OverviewTimelineView.prototype._addResourceToTreeIfNeeded):
+        (WebInspector.OverviewTimelineView.prototype._sourceCodeTimelineAdded):
+        Create the proper DataGridNodes for resources and source code timelines.
+
+        * UserInterface/ResourceTimelineDataGridNode.js:
+        (WebInspector.ResourceTimelineDataGridNode):
+        (WebInspector.ResourceTimelineDataGridNode.prototype.get records):
+        (WebInspector.ResourceTimelineDataGridNode.prototype.get resource):
+        (WebInspector.ResourceTimelineDataGridNode.prototype.get data):
+        (WebInspector.ResourceTimelineDataGridNode.prototype.createCellContent):
+        (WebInspector.ResourceTimelineDataGridNode.prototype.refresh):
+        (WebInspector.ResourceTimelineDataGridNode.prototype._needsRefresh):
+        (WebInspector.ResourceTimelineDataGridNode.prototype._goToResource):
+        Simplify by deferring the graph logic to the new TimelineDataGridNode base class.
+
+        * UserInterface/SourceCodeTimelineTimelineDataGridNode.js: Added.
+        (WebInspector.SourceCodeTimelineTimelineDataGridNode):
+        (WebInspector.SourceCodeTimelineTimelineDataGridNode.prototype.get records):
+        (WebInspector.SourceCodeTimelineTimelineDataGridNode.prototype.get sourceCodeTimeline):
+        (WebInspector.SourceCodeTimelineTimelineDataGridNode.prototype.get data):
+
+        * UserInterface/TimelineDataGridNode.js: Added.
+        (WebInspector.TimelineDataGridNode):
+        (WebInspector.TimelineDataGridNode.prototype.get records):
+        (WebInspector.TimelineDataGridNode.prototype.get data):
+        (WebInspector.TimelineDataGridNode.prototype.createCellContent):
+        (WebInspector.TimelineDataGridNode.prototype.refresh):
+        (WebInspector.TimelineDataGridNode.prototype.refreshGraph):
+        (WebInspector.TimelineDataGridNode.prototype.needsGraphRefresh):
+        Handles the graph column and manages the records and their bars.
+
+        * UserInterface/TimelineRecordBar.css: Added.
+        (.timeline-record-bar):
+        (.timeline-record-bar > .segment):
+        (.timeline-record-bar:not(.has-inactive-segment) > .segment):
+        (.timeline-record-bar.unfinished > .segment):
+        (.timeline-record-bar > .segment.inactive + .segment):
+        (:focus .selected .timeline-record-bar > .segment):
+        (.timeline-record-bar > .segment.inactive):
+        (.timeline-record-bar.timeline-record-type-network > .segment):
+        (.timeline-record-bar.timeline-record-type-layout > .segment):
+        (.timeline-record-bar.timeline-record-type-script > .segment):
+
+        * UserInterface/TimelineRecordBar.js: Added.
+        (WebInspector.TimelineRecordBar):
+        (WebInspector.TimelineRecordBar.prototype.get element):
+        (WebInspector.TimelineRecordBar.prototype.refresh):
+        (WebInspector.TimelineRecordBar.prototype._updateElementPosition):
+
 2014-01-08  Timothy Hatcher  <timothy@apple.com>
 
         Update the current WebInspector.TimelineView when time range changes.

Source/WebInspectorUI/UserInterface/Main.html

@@ -87,6 +87,7 @@
     <link rel="stylesheet" href="TimelineIcons.css">
     <link rel="stylesheet" href="TimelineRuler.css">
     <link rel="stylesheet" href="TimelineDataGrid.css">
+    <link rel="stylesheet" href="TimelineRecordBar.css">
     <link rel="stylesheet" href="TimelineOverview.css">
     <link rel="stylesheet" href="ProfileView.css">
     <link rel="stylesheet" href="JavaScriptProfileView.css">
@@ -348,12 +349,15 @@
     <script src="TimelineDataGrid.js"></script>
     <script src="LayoutTimelineDataGrid.js"></script>
     <script src="ScriptTimelineDataGrid.js"></script>
+    <script src="TimelineRecordBar.js"></script>
+    <script src="TimelineDataGridNode.js"></script>
     <script src="ResourceTimelineDataGridNode.js"></script>
     <script src="ResourceTimelineDataGridNodePathComponent.js"></script>
     <script src="LayoutTimelineRecord.js"></script>
     <script src="LayoutTimelineDataGridNode.js"></script>
     <script src="ScriptTimelineRecord.js"></script>
     <script src="ScriptTimelineDataGridNode.js"></script>
+    <script src="SourceCodeTimelineTimelineDataGridNode.js"></script>
     <script src="TreeOutlineDataGridSynchronizer.js"></script>
     <script src="TimelineOverview.js"></script>
     <script src="ProfileManager.js"></script>

Source/WebInspectorUI/UserInterface/OverviewTimelineView.css

@@ -56,3 +56,16 @@
 .timeline-view.overview > .data-grid .data-container {
     top: 0;
 }
+
+.timeline-view.overview > .data-grid td.graph-column {
+    padding: 2px 0;
+}
+
+.timeline-view.overview > .data-grid td.graph-column > div {
+    position: relative;
+    height: 16px;
+}
+
+.timeline-view.overview > .data-grid td.graph-column .timeline-record-bar {
+    top: 2px;
+}

Source/WebInspectorUI/UserInterface/OverviewTimelineView.js

@@ -44,6 +44,8 @@ WebInspector.OverviewTimelineView = function()
     this.element.classList.add(WebInspector.OverviewTimelineView.StyleClassName);
     this.element.appendChild(this._dataGrid.element);
 
+    this._pendingRepresentedObjects = [];
+
     WebInspector.timelineManager.recording.addEventListener(WebInspector.TimelineRecording.Event.SourceCodeTimelineAdded, this._sourceCodeTimelineAdded, this);
 };
 
@@ -72,6 +74,8 @@ WebInspector.OverviewTimelineView.prototype = {
 
     shown: function()
     {
+        WebInspector.TimelineView.prototype.shown.call(this);
+
         this._treeOutlineDataGridSynchronizer.synchronize();
     },
 
@@ -79,12 +83,29 @@ WebInspector.OverviewTimelineView.prototype = {
     {
         WebInspector.TimelineView.prototype.updateLayout.call(this);
 
+        var oldZeroTime = this._timelineRuler.zeroTime;
+        var oldStartTime = this._timelineRuler.startTime;
+        var oldEndTime = this._timelineRuler.endTime;
+        var oldCurrentTime = this._currentTimeMarker.time;
+
         this._timelineRuler.zeroTime = this.zeroTime;
         this._timelineRuler.startTime = this.startTime;
         this._timelineRuler.endTime = this.endTime;
         this._currentTimeMarker.time = this.currentTime;
 
+        // The TimelineDataGridNode graphs are positioned with percentages, so they auto resize with the view.
+        // We only need to refresh the graphs when the any of the times change.
+        if (this.zeroTime !== oldZeroTime || this.startTime !== oldStartTime || this.endTime !== oldEndTime || this.currentTime !== oldCurrentTime) {
+            var item = this._dataGrid.children[0];
+            while (item) {
+                item.refreshGraph();
+                item = item.traverseNextNode(false, null, true);
+            }
+        }
+
         this._timelineRuler.updateLayout();
+
+        this._processPendingRepresentedObjects();
     },
 
     // Private
@@ -171,8 +192,11 @@ WebInspector.OverviewTimelineView.prototype = {
         var resourceTreeElement = new WebInspector.ResourceTreeElement(resource);
         resourceTreeElement.expand();
 
-        // FIXME: This is just a placeholder DataGridNode.
-        var resourceDataGridNode = new WebInspector.DataGridNode;
+        var resourceTimelineRecord = this._networkTimeline ? this._networkTimeline.recordForResource(resource) : null;
+        if (!resourceTimelineRecord)
+            resourceTimelineRecord = new WebInspector.ResourceTimelineRecord(resource);
+
+        var resourceDataGridNode = new WebInspector.ResourceTimelineDataGridNode(resourceTimelineRecord, true, this);
         this._treeOutlineDataGridSynchronizer.associate(resourceTreeElement, resourceDataGridNode);
 
         var parentTreeElement = this.navigationSidebarTreeOutline;
@@ -191,12 +215,45 @@ WebInspector.OverviewTimelineView.prototype = {
         return resourceTreeElement;
     },
 
+    _addSourceCodeTimeline: function(sourceCodeTimeline)
+    {
+        var parentTreeElement = sourceCodeTimeline.sourceCodeLocation ? this._addResourceToTreeIfNeeded(sourceCodeTimeline.sourceCode) : this.navigationSidebarTreeOutline;
+        console.assert(parentTreeElement);
+        if (!parentTreeElement)
+            return;
+
+        var sourceCodeTimelineTreeElement = new WebInspector.SourceCodeTimelineTreeElement(sourceCodeTimeline);
+        var sourceCodeTimelineDataGridNode = new WebInspector.SourceCodeTimelineTimelineDataGridNode(sourceCodeTimeline, this);
+
+        this._treeOutlineDataGridSynchronizer.associate(sourceCodeTimelineTreeElement, sourceCodeTimelineDataGridNode);
+        this._insertTreeElement(sourceCodeTimelineTreeElement, parentTreeElement);
+    },
+
+    _processPendingRepresentedObjects: function()
+    {
+        if (!this._pendingRepresentedObjects || !this._pendingRepresentedObjects.length)
+            return;
+
+        for (var representedObject of this._pendingRepresentedObjects) {
+            if (representedObject instanceof WebInspector.Resource)
+                this._addResourceToTreeIfNeeded(representedObject);
+            else if (representedObject instanceof WebInspector.SourceCodeTimeline)
+                this._addSourceCodeTimeline(representedObject);
+            else
+                console.error("Unknown represented object");
+        }
+
+        this._pendingRepresentedObjects = [];
+    },
+
     _networkTimelineRecordAdded: function(event)
     {
         var resourceTimelineRecord = event.data.record;
         console.assert(resourceTimelineRecord instanceof WebInspector.ResourceTimelineRecord);
 
-        this._addResourceToTreeIfNeeded(resourceTimelineRecord.resource);
+        this._pendingRepresentedObjects.push(resourceTimelineRecord.resource);
+
+        this.needsLayout();
 
         // We don't expect to have any source code timelines yet. Those should be added with _sourceCodeTimelineAdded.
         console.assert(!WebInspector.timelineManager.recording.sourceCodeTimelinesForSourceCode(resourceTimelineRecord.resource).length);
@@ -209,18 +266,9 @@ WebInspector.OverviewTimelineView.prototype = {
         if (!sourceCodeTimeline)
             return;
 
-        var parentTreeElement = sourceCodeTimeline.sourceCodeLocation ? this._addResourceToTreeIfNeeded(sourceCodeTimeline.sourceCode) : this.navigationSidebarTreeOutline;
-        console.assert(parentTreeElement);
-        if (!parentTreeElement)
-            return;
+        this._pendingRepresentedObjects.push(sourceCodeTimeline);
 
-        var sourceCodeTimelineTreeElement = new WebInspector.SourceCodeTimelineTreeElement(sourceCodeTimeline);
-
-        // FIXME: This is just a placeholder DataGridNode.
-        var sourceCodeTimelineDataGridNode = new WebInspector.DataGridNode;
-        this._treeOutlineDataGridSynchronizer.associate(sourceCodeTimelineTreeElement, sourceCodeTimelineDataGridNode);
-
-        this._insertTreeElement(sourceCodeTimelineTreeElement, parentTreeElement);
+        this.needsLayout();
     },
 
     _treeElementSelected: function(treeElement, selectedByUser)

Source/WebInspectorUI/UserInterface/SourceCodeTimelineTimelineDataGridNode.js

+/*
+ * Copyright (C) 2014 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.SourceCodeTimelineTimelineDataGridNode = function(sourceCodeTimeline, graphDataSource)
+{
+    WebInspector.TimelineDataGridNode.call(this, true, graphDataSource);
+
+    this._sourceCodeTimeline = sourceCodeTimeline;
+    this._sourceCodeTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this.needsGraphRefresh, this);
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.SourceCodeTimelineTimelineDataGridNode);
+
+WebInspector.SourceCodeTimelineTimelineDataGridNode.prototype = {
+    constructor: WebInspector.SourceCodeTimelineTimelineDataGridNode,
+    __proto__: WebInspector.TimelineDataGridNode.prototype,
+
+    // Public
+
+    get records()
+    {
+        return this._sourceCodeTimeline.records;
+    },
+
+    get sourceCodeTimeline()
+    {
+        return this._sourceCodeTimeline;
+    },
+
+    get data()
+    {
+        return {graph: this._sourceCodeTimeline.startTime};
+    }
+};

Source/WebInspectorUI/UserInterface/TimelineDataGridNode.js

+/*
+ * Copyright (C) 2014 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.TimelineDataGridNode = function(graphOnly, graphDataSource)
+{
+    WebInspector.DataGridNode.call(this, {});
+
+    this._graphOnly = graphOnly || false;
+    this._graphDataSource = graphDataSource || null;
+
+    if (graphDataSource) {
+        this._graphContainerElement = document.createElement("div");
+        this._timelineRecordBarMap = new Map;
+    }
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.TimelineDataGridNode);
+
+WebInspector.TimelineDataGridNode.prototype = {
+    constructor: WebInspector.TimelineDataGridNode,
+    __proto__: WebInspector.DataGridNode.prototype,
+
+    // Public
+
+    get records()
+    {
+        // Implemented by subclasses.
+        return [];
+    },
+
+    get graphDataSource()
+    {
+        return this._graphDataSource;
+    },
+
+    get data()
+    {
+        var records = this.records || [];
+        return {graph: records.length ? records[0].startTime : 0};
+    },
+
+    createCellContent: function(columnIdentifier, cell)
+    {
+        if (columnIdentifier === "graph") {
+            this.refreshGraph();
+            return this._graphContainerElement;
+        }
+
+        return WebInspector.DataGridNode.prototype.createCellContent.call(this, columnIdentifier, cell);
+    },
+
+    refresh: function()
+    {
+        if (this._graphOnly) {
+            this.refreshGraph();
+            return;
+        }
+
+        WebInspector.DataGridNode.prototype.refresh.call(this);
+    },
+
+    refreshGraph: function()
+    {
+        if (this._scheduledGraphRefreshIdentifier) {
+            cancelAnimationFrame(this._scheduledGraphRefreshIdentifier);
+            delete this._scheduledGraphRefreshIdentifier;
+        }
+
+        var records = this.records || [];
+        for (var record of records) {
+            var timelineRecordBar = this._timelineRecordBarMap.get(record);
+            if (!timelineRecordBar) {
+                timelineRecordBar = new WebInspector.TimelineRecordBar(record);
+                this._timelineRecordBarMap.set(record, timelineRecordBar);
+            }
+
+            if (timelineRecordBar.refresh(this._graphDataSource)) {
+                if (!timelineRecordBar.element.parentNode)
+                    this._graphContainerElement.appendChild(timelineRecordBar.element);
+            } else {
+                timelineRecordBar.element.remove();
+            }
+        }
+    },
+
+    needsGraphRefresh: function()
+    {
+        if (this._scheduledGraphRefreshIdentifier)
+            return;
+
+        this._scheduledGraphRefreshIdentifier = requestAnimationFrame(this.refreshGraph.bind(this));
+    }
+};

Source/WebInspectorUI/UserInterface/TimelineRecordBar.css

+/*
+ * Copyright (C) 2014 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.
+ */
+
+.timeline-record-bar {
+    position: absolute;
+    height: 12px;
+}
+
+.timeline-record-bar > .segment {
+    position: absolute;
+    height: 12px;
+    background-color: rgb(225, 225, 225);
+    border: 1px solid rgb(200, 200, 200);
+    border-radius: 3px;
+    min-width: 4px;
+}
+
+.timeline-record-bar:not(.has-inactive-segment) > .segment {
+    left: 0;
+    width: 100%;
+}
+
+.timeline-record-bar > .segment.inactive,
+.timeline-record-bar.unfinished > .segment {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: none;
+}
+
+.timeline-record-bar > .segment.inactive + .segment {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+:focus .selected .timeline-record-bar > .segment {
+    background-color: white !important;
+    border-color: white !important;
+}
+
+.timeline-record-bar > .segment.inactive {
+    opacity: 0.5;
+}
+
+.timeline-record-bar.timeline-record-type-network > .segment {
+    background-color: rgb(120, 176, 225);
+    border-color: rgb(61, 147, 200);
+}
+
+.timeline-record-bar.timeline-record-type-layout > .segment {
+    background-color: rgb(234, 153, 153);
+    border-color: rgb(212, 108, 108);
+}
+
+.timeline-record-bar.timeline-record-type-script > .segment {
+    background-color: rgb(190, 148, 233);
+    border-color: rgb(153, 113, 185);
+}

Source/WebInspectorUI/UserInterface/TimelineRecordBar.js

+/*
+ * Copyright (C) 2014 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.TimelineRecordBar = function(record)
+{
+    WebInspector.Object.call(this);
+
+    console.assert(record);
+
+    this._record = record;
+
+    this._element = document.createElement("div");
+    this._element.classList.add(WebInspector.TimelineRecordBar.StyleClassName);
+    this._element.classList.add(record.type);
+
+    if (record.usesActiveStartTime) {
+        this._inactiveBarElement = document.createElement("div");
+        this._inactiveBarElement.classList.add(WebInspector.TimelineRecordBar.BarSegmentStyleClassName);
+        this._inactiveBarElement.classList.add(WebInspector.TimelineRecordBar.InactiveStyleClassName);
+        this._element.classList.add(WebInspector.TimelineRecordBar.HasInactiveSegmentStyleClassName);
+    }
+
+    this._activeBarElement = document.createElement("div");
+    this._activeBarElement.classList.add(WebInspector.TimelineRecordBar.BarSegmentStyleClassName);
+
+    if (this._inactiveBarElement)
+        this._element.appendChild(this._inactiveBarElement);
+    this._element.appendChild(this._activeBarElement);
+};
+
+WebInspector.Object.addConstructorFunctions(WebInspector.TimelineRecordBar);
+
+WebInspector.TimelineRecordBar.StyleClassName = "timeline-record-bar";
+WebInspector.TimelineRecordBar.BarSegmentStyleClassName = "segment";
+WebInspector.TimelineRecordBar.InactiveStyleClassName = "inactive";
+WebInspector.TimelineRecordBar.UnfinishedStyleClassName = "unfinished";
+WebInspector.TimelineRecordBar.HasInactiveSegmentStyleClassName = "has-inactive-segment";
+
+WebInspector.TimelineRecordBar.prototype = {
+    constructor: WebInspector.TimelineRecordBar,
+    __proto__: WebInspector.Object.prototype,
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    },
+
+    refresh: function(graphDataSource)
+    {
+        var barStartTime = this._record.startTime;
+
+        // If this bar has no time info, return early.
+        if (isNaN(barStartTime))
+            return false;
+
+        var graphStartTime = graphDataSource.startTime;
+        var graphEndTime = graphDataSource.endTime;
+        var graphCurrentTime = graphDataSource.currentTime;
+
+        var barEndTime = this._record.endTime;
+
+        // If this bar is completly after the current time, return early.
+        if (barStartTime > graphCurrentTime)
+            return false;
+
+        // If this bar is completly before or after the bounds of the graph, return early.
+        if (barEndTime < graphStartTime || barStartTime > graphEndTime)
+            return false;
+
+        var barUnfinished = isNaN(barEndTime) || barEndTime >= graphCurrentTime;
+        if (barUnfinished)
+            barEndTime = graphCurrentTime;
+
+        var graphDuration = graphEndTime - graphStartTime;
+
+        this._element.classList.toggle(WebInspector.TimelineRecordBar.UnfinishedStyleClassName, barUnfinished);
+
+        var newBarLeftPosition = (barStartTime - graphStartTime) / graphDuration;
+        this._updateElementPosition(this._element, newBarLeftPosition, "left");
+
+        var newBarWidth = ((barEndTime - graphStartTime) / graphDuration) - newBarLeftPosition;
+        this._updateElementPosition(this._element, newBarWidth, "width");
+
+        if (!this._record.usesActiveStartTime)
+            return true;
+
+        var barActiveStartTime = Math.max(barStartTime, Math.min(this._record.activeStartTime, barEndTime));
+        var barDuration = barEndTime - barStartTime;
+
+        var inactiveUnfinished = isNaN(barActiveStartTime) || barActiveStartTime >= graphCurrentTime;
+        this._element.classList.toggle(WebInspector.TimelineRecordBar.UnfinishedStyleClassName, inactiveUnfinished);
+
+        if (inactiveUnfinished)
+            barActiveStartTime = graphCurrentTime;
+
+        var middlePercentage = (barActiveStartTime - barStartTime) / barDuration;
+
+        this._updateElementPosition(this._inactiveBarElement, 1 - middlePercentage, "right");
+        this._updateElementPosition(this._inactiveBarElement, middlePercentage, "width");
+
+        if (!inactiveUnfinished) {
+            if (!this._activeBarElement.parentNode)
+                this._element.appendChild(this._activeBarElement);
+
+            this._updateElementPosition(this._activeBarElement, middlePercentage, "left");
+            this._updateElementPosition(this._activeBarElement, 1 - middlePercentage, "width");
+        } else
+            this._activeBarElement.remove();
+
+        return true;
+    },
+
+    // Private
+
+    _updateElementPosition: function(element, newPosition, property)
+    {
+        newPosition *= 100;
+        newPosition = newPosition.toFixed(2);
+
+        var currentPosition = parseFloat(element.style[property]).toFixed(2);
+        if (currentPosition !== newPosition)
+            element.style[property] = newPosition + "%";
+    }
+};