Changeset 51339 in webkit

Timestamp:

Nov 24, 2009 9:15:01 AM (14 years ago)

Author:

pfeldman@chromium.org

Message:

2009-11-23 Pavel Feldman <​pfeldman@chromium.org>

Reviewed by Timothy Hatcher.

Web Inspector: Implement expandable compartments on timeline panel.

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

• inspector/front-end/TimelineOverviewPane.js: (WebInspector.TimelineOverviewPane.prototype._setWindowPosition):
• inspector/front-end/TimelinePanel.js: (WebInspector.TimelinePanel): (WebInspector.TimelinePanel.prototype.addRecordToTimeline): (WebInspector.TimelinePanel.prototype._innerAddRecordToTimeline): (WebInspector.TimelinePanel.prototype._formatRecord): (WebInspector.TimelinePanel.prototype._refreshRecords): (WebInspector.TimelinePanel.prototype._addToRecordsWindow): (WebInspector.TimelineRecordListRow): (WebInspector.TimelineRecordListRow.prototype.update): (WebInspector.TimelineRecordListRow.prototype.dispose): (WebInspector.TimelineRecordGraphRow): (WebInspector.TimelineRecordGraphRow.prototype.update): (WebInspector.TimelineRecordGraphRow.prototype._onClick): (WebInspector.TimelineRecordGraphRow.prototype.dispose):
• inspector/front-end/inspector.css:

Location:

trunk

Files:

• LayoutTests/inspector/timeline-test.js (modified) (1 diff)
• WebCore/ChangeLog (modified) (1 diff)
• WebCore/inspector/front-end/TimelineGrid.js (modified) (2 diffs)
• WebCore/inspector/front-end/TimelineOverviewPane.js (modified) (4 diffs)
• WebCore/inspector/front-end/TimelinePanel.js (modified) (11 diffs)
• WebCore/inspector/front-end/inspector.css (modified) (4 diffs)
• WebCore/inspector/front-end/utilities.js (modified) (1 diff)

trunk/LayoutTests/inspector/timeline-test.js

@@ -119 +119 @@
 function frontend_getTimelineResults() {
     var result = [];
-    var records = WebInspector.panels.timeline._records;
-    for (var i = 0; i < records.length; ++i) {
-        result.push(records[i].record);
+    function addRecords(records)
+    {
+        if (!records)
+            return;
+        for (var i = 0; i < records.length; ++i) {
+            result.push(records[i].record);
+            addRecords(records[i].children);
+        }
     }
+    addRecords(WebInspector.panels.timeline._records);
     return result;
 }

trunk/WebCore/ChangeLog

@@ +1 @@
+2009-11-23  Pavel Feldman  <pfeldman@chromium.org>
+
+        Reviewed by Timothy Hatcher.
+
+        Web Inspector: Implement expandable compartments on timeline panel.
+
+        https://bugs.webkit.org/show_bug.cgi?id=31796
+
+        * inspector/front-end/TimelineOverviewPane.js:
+        (WebInspector.TimelineOverviewPane.prototype._setWindowPosition):
+        * inspector/front-end/TimelinePanel.js:
+        (WebInspector.TimelinePanel):
+        (WebInspector.TimelinePanel.prototype.addRecordToTimeline):
+        (WebInspector.TimelinePanel.prototype._innerAddRecordToTimeline):
+        (WebInspector.TimelinePanel.prototype._formatRecord):
+        (WebInspector.TimelinePanel.prototype._refreshRecords):
+        (WebInspector.TimelinePanel.prototype._addToRecordsWindow):
+        (WebInspector.TimelineRecordListRow):
+        (WebInspector.TimelineRecordListRow.prototype.update):
+        (WebInspector.TimelineRecordListRow.prototype.dispose):
+        (WebInspector.TimelineRecordGraphRow):
+        (WebInspector.TimelineRecordGraphRow.prototype.update):
+        (WebInspector.TimelineRecordGraphRow.prototype._onClick):
+        (WebInspector.TimelineRecordGraphRow.prototype.dispose):
+        * inspector/front-end/inspector.css:
+
 2009-11-24  Mark Rowe  <mrowe@apple.com>
 

trunk/WebCore/inspector/front-end/TimelineGrid.js

@@ -56 +56 @@
     },
 
-    updateDividers: function(force, calculator)
+    updateDividers: function(force, calculator, paddingLeft)
     {
         var dividerCount = Math.round(this._dividersElement.offsetWidth / 64);
@@ -63 +63 @@
             return false;
 
+        if (!(typeof paddingLeft === "number"))
+            paddingLeft = 0;
         this._currentDividerSlice = slice;
 
-        this._dividersElement.removeChildren();
         this._eventDividersElement.removeChildren();
-        this._dividersLabelBarElement.removeChildren();
+        // Reuse divider elements and labels.
+        var divider = this._dividersElement.firstChild;
+        var dividerLabelBar = this._dividersLabelBarElement.firstChild;
 
-        for (var i = 1; i <= dividerCount; ++i) {
-            var divider = document.createElement("div");
-            divider.className = "resources-divider";
+        var clientWidth = this._dividersLabelBarElement.clientWidth - paddingLeft;
+        for (var i = paddingLeft ? 0 : 1; i <= dividerCount; ++i) {
+            if (!divider) {
+                divider = document.createElement("div");
+                divider.className = "resources-divider";
+                this._dividersElement.appendChild(divider);
+
+                dividerLabelBar = document.createElement("div");
+                dividerLabelBar.className = "resources-divider";
+                var label = document.createElement("div");
+                label.className = "resources-divider-label";
+                dividerLabelBar._labelElement = label;
+                dividerLabelBar.appendChild(label);
+                this._dividersLabelBarElement.appendChild(dividerLabelBar);
+            }
+
             if (i === dividerCount)
                 divider.addStyleClass("last");
-            divider.style.left = ((i / dividerCount) * 100) + "%";
+            else
+                divider.removeStyleClass("last");
 
-            this._dividersElement.appendChild(divider.cloneNode());
+            var left = paddingLeft + clientWidth * (i / dividerCount);
+            var percentLeft = 100 * left / this._dividersLabelBarElement.clientWidth + "%";
+            divider.style.left = percentLeft;
+            dividerLabelBar.style.left = percentLeft;
 
-            var label = document.createElement("div");
-            label.className = "resources-divider-label";
             if (!isNaN(slice))
-                label.textContent = calculator.formatValue(slice * i);
-            divider.appendChild(label);
+                dividerLabelBar._labelElement.textContent = calculator.formatValue(slice * i);
 
-            this._dividersLabelBarElement.appendChild(divider);
+            divider = divider.nextSibling;
+            dividerLabelBar = dividerLabelBar.nextSibling;
+        }
+
+        // Remove extras.
+        while (divider) {
+            var nextDivider = divider.nextSibling;
+            this._dividersElement.removeChild(divider);
+            divider = nextDivider;
+        }
+        while (dividerLabelBar) {
+            var nextDivider = dividerLabelBar.nextSibling;
+            this._dividersLabelBarElement.removeChild(dividerLabelBar);
+            dividerLabelBar = nextDivider;
         }
         return true;

trunk/WebCore/inspector/front-end/TimelineOverviewPane.js

@@ -113 +113 @@
         }
 
+        function forAllRecords(recordsArray, callback)
+        {
+            if (!recordsArray)
+                return;
+            for (var i = 0; i < recordsArray.length; ++i) {
+                callback(recordsArray[i]);
+                forAllRecords(recordsArray[i].children, callback);
+            }
+        }
+
         // Create sparse arrays with 101 cells each to fill with chunks for a given category.
         this._overviewCalculator.reset();
-
-        for (var i = 1; i < records.length; ++i)
-            this._overviewCalculator.updateBoundaries(records[i]);
-
-        for (var i = 0; i < records.length; ++i) {
-            var record = records[i];
+        forAllRecords(records, this._overviewCalculator.updateBoundaries.bind(this._overviewCalculator));
+
+        function markTimeline(record)
+        {
             var percentages = this._overviewCalculator.computeBarGraphPercentages(record);
-            
+
             var end = Math.round(percentages.end);
             var categoryName = record.category.name;
@@ -128 +136 @@
                 timelines[categoryName][j] = true;
         }
+        forAllRecords(records, markTimeline.bind(this));
 
         // Convert sparse arrays to continuous segments, render graphs for each.
@@ -231 +240 @@
     {
         if (typeof start === "number") {
-            if (start > this._rightResizeElement.offsetLeft - 25)
-                start = this._rightResizeElement.offsetLeft - 25;
+            if (start > this._rightResizeElement.offsetLeft - 4)
+                start = this._rightResizeElement.offsetLeft - 4;
 
             this.windowLeft = start / this._overviewGrid.element.clientWidth;
@@ -239 +248 @@
         }
         if (typeof end === "number") {
-            if (end < this._leftResizeElement.offsetLeft + 30)
-                end = this._leftResizeElement.offsetLeft + 30;
+            if (end < this._leftResizeElement.offsetLeft + 12)
+                end = this._leftResizeElement.offsetLeft + 12;
 
             this.windowRight = end / this._overviewGrid.element.clientWidth;

trunk/WebCore/inspector/front-end/TimelinePanel.js

@@ -61 +61 @@
 
     this._timelineGrid = new WebInspector.TimelineGrid();
-    var itemsGraphsElement = this._timelineGrid.itemsGraphsElement;
-    itemsGraphsElement.id = "timeline-graphs";
+    this._itemsGraphsElement = this._timelineGrid.itemsGraphsElement;
+    this._itemsGraphsElement.id = "timeline-graphs";
     this._containerContentElement.appendChild(this._timelineGrid.element);
 
     this._topGapElement = document.createElement("div");
     this._topGapElement.className = "timeline-gap";
-    itemsGraphsElement.appendChild(this._topGapElement);
+    this._itemsGraphsElement.appendChild(this._topGapElement);
 
     this._graphRowsElement = document.createElement("div");
-    itemsGraphsElement.appendChild(this._graphRowsElement);
+    this._itemsGraphsElement.appendChild(this._graphRowsElement);
 
     this._bottomGapElement = document.createElement("div");
     this._bottomGapElement.className = "timeline-gap";
-    itemsGraphsElement.appendChild(this._bottomGapElement);
+    this._itemsGraphsElement.appendChild(this._bottomGapElement);
 
     this._createStatusbarButtons();
@@ -137 +137 @@
     addRecordToTimeline: function(record)
     {
+        this._innerAddRecordToTimeline(record, this._records);
+        this._scheduleRefresh();
+    },
+
+    _innerAddRecordToTimeline: function(record, collection)
+    {
         var formattedRecord = this._formatRecord(record);
+
         // Glue subsequent records with same category and title together if they are closer than 100ms to each other.
         if (this._lastRecord && (!record.children || !record.children.length) &&
@@ -147 +154 @@
             this._lastRecord.count++;
         } else {
-            this._records.push(formattedRecord);
-
-            for (var i = 0; record.children && i < record.children.length; ++i)
-                this.addRecordToTimeline(record.children[i]);
+            collection.push(formattedRecord);
+            for (var i = 0; record.children && i < record.children.length; ++i) {
+                if (!formattedRecord.children)
+                    formattedRecord.children = [];
+                var formattedChild = this._innerAddRecordToTimeline(record.children[i], formattedRecord.children);
+                formattedChild.parent = formattedRecord;
+            }
             this._lastRecord = record.children && record.children.length ? null : formattedRecord;
         }
-        this._scheduleRefresh();
+        return formattedRecord;
     },
 
@@ -197 +207 @@
         } else if (record.type === WebInspector.TimelineAgent.RecordType.ResourceReceiveResponse) {
             var sendRequestRecord = this._sendRequestRecords[record.data.identifier];
-            sendRequestRecord._responseReceivedFormattedTime = formattedRecord.startTime;
-            formattedRecord.startTime = sendRequestRecord.startTime;
-            sendRequestRecord.details = this._getRecordDetails(record);
+            if (sendRequestRecord) { // False if we started instrumentation in the middle of request.
+                sendRequestRecord._responseReceivedFormattedTime = formattedRecord.startTime;
+                formattedRecord.startTime = sendRequestRecord.startTime;
+                sendRequestRecord.details = this._getRecordDetails(record);
+            }
         } else if (record.type === WebInspector.TimelineAgent.RecordType.ResourceFinish) {
             var sendRequestRecord = this._sendRequestRecords[record.data.identifier];
@@ -315 +327 @@
             var percentages = this._calculator.computeBarGraphPercentages(record);
             if (percentages.start < 100 && percentages.end >= 0 && !record.category.hidden)
-                recordsInWindow.push(record);
+                this._addToRecordsWindow(record, recordsInWindow);
         }
 
@@ -321 +333 @@
         var visibleTop = this._containerElement.scrollTop;
         var visibleBottom = visibleTop + this._containerElement.clientHeight;
+
+        // Define row height, should be in sync with styles for timeline graphs.
         const rowHeight = 18;
-
-        // Convert visible area to visible indexes.
+        const expandOffset = 15;
+
+        // Convert visible area to visible indexes. Always include top-level record for a visible nested record.
         var startIndex = Math.max(0, Math.floor(visibleTop / rowHeight) - 1);
+        while (startIndex > 0 && recordsInWindow[startIndex].parent)
+            startIndex--;
         var endIndex = Math.min(recordsInWindow.length, Math.ceil(visibleBottom / rowHeight));
-
+        while (endIndex < recordsInWindow.length - 1 && recordsInWindow[startIndex].parent)
+            endIndex++;
+
+        // Resize gaps first.
+        const top = (startIndex * rowHeight) + "px";
+        this._topGapElement.style.height = top;
+        this.sidebarElement.style.top = top;
+        this.sidebarResizeElement.style.top = top;
+        this._bottomGapElement.style.height = (recordsInWindow.length - endIndex) * rowHeight + "px";
+
+        // Update visible rows.
         var listRowElement = this._sidebarListElement.firstChild;
         var graphRowElement = this._graphRowsElement.firstChild;
+        var width = this._graphRowsElement.offsetWidth;
+        var scheduleRefreshCallback = this._scheduleRefresh.bind(this, true);
         for (var i = startIndex; i < endIndex; ++i) {
             var record = recordsInWindow[i];
@@ -338 +367 @@
             }
             if (!graphRowElement) {
-                graphRowElement = new WebInspector.TimelineRecordGraphRow().element;
+                graphRowElement = new WebInspector.TimelineRecordGraphRow(this._itemsGraphsElement, scheduleRefreshCallback, rowHeight).element;
                 this._graphRowsElement.appendChild(graphRowElement);
             }
 
             listRowElement.listRow.update(record, isEven);
-            graphRowElement.graphRow.update(record, isEven, this._calculator);
+            graphRowElement.graphRow.update(record, isEven, this._calculator, width, expandOffset);
 
             listRowElement = listRowElement.nextSibling;
@@ -349 +378 @@
         }
 
+        // Remove extra rows.
         while (listRowElement) {
             var nextElement = listRowElement.nextSibling;
-            listRowElement.parentElement.removeChild(listRowElement);
+            listRowElement.listRow.dispose();
             listRowElement = nextElement;
         }
-
         while (graphRowElement) {
             var nextElement = graphRowElement.nextSibling;
-            graphRowElement.parentElement.removeChild(graphRowElement);
+            graphRowElement.graphRow.dispose();
             graphRowElement = nextElement;
         }
 
-        this._timelineGrid.updateDividers(true, this._calculator);
-
-        const top = (startIndex * rowHeight) + "px";
-        this._topGapElement.style.height = top;
-        this.sidebarElement.style.top = top;
-        this.sidebarResizeElement.style.top = top;
-        this._bottomGapElement.style.height = (recordsInWindow.length - endIndex) * rowHeight + "px";
+        // Reserve some room for expand / collapse controls to the left for records that start at 0ms.
+        var timelinePaddingLeft = this._calculator.windowLeft === 0 ? expandOffset : 0;
+        this._timelineGrid.updateDividers(true, this._calculator, timelinePaddingLeft);
         this._adjustScrollPosition((recordsInWindow.length + 1) * rowHeight);
+    },
+
+    _addToRecordsWindow: function(record, recordsWindow)
+    {
+        recordsWindow.push(record);
+        if (!record.collapsed) {
+            var index = recordsWindow.length;
+            for (var i = 0; record.children && i < record.children.length; ++i)
+                this._addToRecordsWindow(record.children[i], recordsWindow);
+            record.visibleChildrenCount = recordsWindow.length - index;
+        }
     },
 
@@ -475 +511 @@
     this.element = document.createElement("div");
     this.element.listRow = this;
-
     var iconElement = document.createElement("span");
     iconElement.className = "timeline-tree-icon";
@@ -517 +552 @@
         else
             this._repeatCountElement.textContent = "";
+    },
+
+    dispose: function()
+    {
+        this.element.parentElement.removeChild(this.element);
     }
 }
 
 
-WebInspector.TimelineRecordGraphRow = function()
+WebInspector.TimelineRecordGraphRow = function(graphContainer, refreshCallback, rowHeight)
 {
     this.element = document.createElement("div");
@@ -533 +573 @@
     this._barElement.className = "timeline-graph-bar";
     this._barAreaElement.appendChild(this._barElement);
+
+    this._expandElement = document.createElement("div");
+    this._expandElement.className = "timeline-expandable";
+    graphContainer.appendChild(this._expandElement);
+
+    var leftBorder = document.createElement("div");
+    leftBorder.className = "timeline-expandable-left";
+    this._expandElement.appendChild(leftBorder);
+
+    this._expandElement.addEventListener("click", this._onClick.bind(this));
+    this._refreshCallback = refreshCallback;
+    this._rowHeight = rowHeight;
 }
 
 WebInspector.TimelineRecordGraphRow.prototype = {
-    update: function(record, isEven, calculator)
-    {
+    update: function(record, isEven, calculator, clientWidth, expandOffset)
+    {
+        this._record = record;
         this.element.className = "timeline-graph-side timeline-category-" + record.category.name + (isEven ? " even" : "");
         var percentages = calculator.computeBarGraphPercentages(record);
-        this._barElement.style.setProperty("left", percentages.start + "%");
-        this._barElement.style.setProperty("right", (100 - percentages.end) + "%");
+        var left = percentages.start / 100 * clientWidth;
+        var width = (percentages.end - percentages.start) / 100 * clientWidth;
+        this._barElement.style.left = (left + expandOffset) + "px";
+        this._barElement.style.width = width + "px";
+
+        if (record.visibleChildrenCount) {
+            this._expandElement.style.top = this.element.offsetTop + "px";
+            this._expandElement.style.left = left + "px";
+            this._expandElement.style.width = Math.max(12, width + 25) + "px";
+            if (!record.collapsed) {
+                this._expandElement.style.height = (record.visibleChildrenCount + 1) * this._rowHeight + "px";
+                this._expandElement.addStyleClass("timeline-expandable-expanded");
+                this._expandElement.removeStyleClass("timeline-expandable-collapsed");
+            } else {
+                this._expandElement.style.height = this._rowHeight + "px";
+                this._expandElement.addStyleClass("timeline-expandable-collapsed");
+                this._expandElement.removeStyleClass("timeline-expandable-expanded");
+            }
+            this._expandElement.removeStyleClass("hidden");
+        } else {
+            this._expandElement.addStyleClass("hidden");
+        }
+    },
+
+    _onClick: function(event)
+    {
+        this._record.collapsed = !this._record.collapsed;
+        this._refreshCallback();
+    },
+
+    dispose: function()
+    {
+        this.element.parentElement.removeChild(this.element);
+        this._expandElement.parentElement.removeChild(this._expandElement);
     }
 }

trunk/WebCore/inspector/front-end/inspector.css

@@ -3289 +3289 @@
 }
 
+.timeline .sidebar {
+    overflow-y: hidden;
+    z-index: 100;
+}
+
 #timeline-overview-separator {
     position: absolute;
@@ -3412 +3417 @@
     height: 18px;
     line-height: 15px;
+    padding-right: 5px;
     padding-left: 10px;
     padding-top: 2px;
@@ -3417 +3423 @@
     text-overflow: ellipsis;
     overflow: hidden;
+}
+
+.timeline-expandable {
+    position: absolute;
+    border-left: 1px solid rgb(163, 163, 163);
+}
+
+.timeline-expandable-left {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 3px;
+    border-top: 1px solid rgb(163, 163, 163);
+    border-bottom: 1px solid rgb(163, 163, 163);
+}
+
+.timeline-expandable-collapsed {
+    background-image: url(Images/disclosureTriangleSmallRightBlack.png);
+    background-position-x: 1px;
+    background-position-y: 2px;
+    background-repeat: no-repeat;
+}
+
+.timeline-expandable-expanded {
+    background-image: url(Images/disclosureTriangleSmallDownBlack.png);
+    background-position-x: 1px;
+    background-position-y: 3px;
+    background-repeat: no-repeat;
 }
 
@@ -3485 +3520 @@
     top: 0;
     bottom: 0;
-    right: 8px;
-    left: 9px;
+    right: 0;
+    left: 3px;
     pointer-events: none;
 }

trunk/WebCore/inspector/front-end/utilities.js

@@ -551 +551 @@
         formatterFunction = String.sprintf;
 
+    if (seconds === 0)
+        return "0";
+
     var ms = seconds * 1000;
     if (higherResolution && ms < 1000)