Changeset 57280 in webkit

Timestamp:

Apr 8, 2010 8:27:32 AM (14 years ago)

Author:

pfeldman@chromium.org

Message:

2010-04-08 Pavel Feldman <​pfeldman@chromium.org>

Reviewed by Yury Semikhatsky.

Web Inspector: Render Load, DOM Content and MarkTimeline event dividers on Timeline panel.

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

• English.lproj/localizedStrings.js:
• inspector/InspectorController.cpp: (WebCore::InspectorController::mainResourceFiredDOMContentEvent): (WebCore::InspectorController::mainResourceFiredLoadEvent):
• inspector/InspectorController.h:
• inspector/InspectorTimelineAgent.cpp: (WebCore::InspectorTimelineAgent::didMarkDOMContentEvent): (WebCore::InspectorTimelineAgent::didMarkLoadEvent):
• inspector/InspectorTimelineAgent.h: (WebCore::):
• inspector/front-end/ResourcesPanel.js: (WebInspector.ResourcesPanel.prototype.updateGraphDividersIfNeeded):
• inspector/front-end/TimelineAgent.js:
• inspector/front-end/TimelineGrid.js: (WebInspector.TimelineGrid.prototype.removeEventDividers):
• inspector/front-end/TimelinePanel.js: (WebInspector.TimelinePanel): (WebInspector.TimelinePanel.prototype.get _recordStyles): (WebInspector.TimelinePanel.prototype._updateMarks): (WebInspector.TimelinePanel.prototype._innerAddRecordToTimeline): (WebInspector.TimelinePanel.prototype._clearPanel): (WebInspector.TimelinePanel.prototype._refresh): (WebInspector.TimelinePanel.prototype._refreshRecords): (WebInspector.TimelineCalculator.prototype.computeBarGraphWindowPosition): (WebInspector.TimelineRecordGraphRow.prototype.update):
• inspector/front-end/inspector.css: (.resources-event-divider): (.resources-red-divider): (.resources-blue-divider): (.resources-orange-divider):

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/inspector/timeline-enum-stability-expected.txt (modified) (1 diff)
• WebCore/ChangeLog (modified) (1 diff)
• WebCore/English.lproj/localizedStrings.js (modified) (previous)
• WebCore/inspector/InspectorController.cpp (modified) (2 diffs)
• WebCore/inspector/InspectorController.h (modified) (1 diff)
• WebCore/inspector/InspectorTimelineAgent.cpp (modified) (1 diff)
• WebCore/inspector/InspectorTimelineAgent.h (modified) (2 diffs)
• WebCore/inspector/front-end/ResourcesPanel.js (modified) (2 diffs)
• WebCore/inspector/front-end/TimelineAgent.js (modified) (1 diff)
• WebCore/inspector/front-end/TimelineGrid.js (modified) (2 diffs)
• WebCore/inspector/front-end/TimelineOverviewPane.js (modified) (1 diff)
• WebCore/inspector/front-end/TimelinePanel.js (modified) (12 diffs)
• WebCore/inspector/front-end/inspector.css (modified) (5 diffs)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2010-04-08  Pavel Feldman  <pfeldman@chromium.org>
+
+        Reviewed by Yury Semikhatsky.
+
+        Web Inspector: Render Load, DOM Content and MarkTimeline event dividers on Timeline panel.
+
+        https://bugs.webkit.org/show_bug.cgi?id=37267
+
+        * inspector/timeline-enum-stability-expected.txt:
+
 2010-04-08  Kent Tamura  <tkent@chromium.org>
 

trunk/LayoutTests/inspector/timeline-enum-stability-expected.txt

@@ -21 +21 @@
 WebInspector.TimelineAgent.RecordType.ResourceReceiveData : 16
 WebInspector.TimelineAgent.RecordType.GCEvent : 17
+WebInspector.TimelineAgent.RecordType.MarkDOMContentEventType : 18
+WebInspector.TimelineAgent.RecordType.MarkLoadEventType : 19
 

trunk/WebCore/ChangeLog

@@ +1 @@
+2010-04-08  Pavel Feldman  <pfeldman@chromium.org>
+
+        Reviewed by Yury Semikhatsky.
+
+        Web Inspector: Render Load, DOM Content and MarkTimeline event dividers on Timeline panel.
+
+        https://bugs.webkit.org/show_bug.cgi?id=37267
+
+        * English.lproj/localizedStrings.js:
+        * inspector/InspectorController.cpp:
+        (WebCore::InspectorController::mainResourceFiredDOMContentEvent):
+        (WebCore::InspectorController::mainResourceFiredLoadEvent):
+        * inspector/InspectorController.h:
+        * inspector/InspectorTimelineAgent.cpp:
+        (WebCore::InspectorTimelineAgent::didMarkDOMContentEvent):
+        (WebCore::InspectorTimelineAgent::didMarkLoadEvent):
+        * inspector/InspectorTimelineAgent.h:
+        (WebCore::):
+        * inspector/front-end/ResourcesPanel.js:
+        (WebInspector.ResourcesPanel.prototype.updateGraphDividersIfNeeded):
+        * inspector/front-end/TimelineAgent.js:
+        * inspector/front-end/TimelineGrid.js:
+        (WebInspector.TimelineGrid.prototype.removeEventDividers):
+        * inspector/front-end/TimelinePanel.js:
+        (WebInspector.TimelinePanel):
+        (WebInspector.TimelinePanel.prototype.get _recordStyles):
+        (WebInspector.TimelinePanel.prototype._updateMarks):
+        (WebInspector.TimelinePanel.prototype._innerAddRecordToTimeline):
+        (WebInspector.TimelinePanel.prototype._clearPanel):
+        (WebInspector.TimelinePanel.prototype._refresh):
+        (WebInspector.TimelinePanel.prototype._refreshRecords):
+        (WebInspector.TimelineCalculator.prototype.computeBarGraphWindowPosition):
+        (WebInspector.TimelineRecordGraphRow.prototype.update):
+        * inspector/front-end/inspector.css:
+        (.resources-event-divider):
+        (.resources-red-divider):
+        (.resources-blue-divider):
+        (.resources-orange-divider):
+
 2010-04-01  Antonio Gomes  <tonikitoo@webkit.org>
 

trunk/WebCore/inspector/InspectorController.cpp

@@ -842 +842 @@
     if (m_mainResource) {
         m_mainResource->markDOMContentEventTime();
+        if (m_timelineAgent)
+            m_timelineAgent->didMarkDOMContentEvent();
         if (m_frontend)
             m_mainResource->updateScriptObject(m_frontend.get());
@@ -854 +856 @@
     if (m_mainResource) {
         m_mainResource->markLoadEventTime();
+        if (m_timelineAgent)
+            m_timelineAgent->didMarkLoadEvent();
         if (m_frontend)
             m_mainResource->updateScriptObject(m_frontend.get());

trunk/WebCore/inspector/InspectorController.h

@@ -215 +215 @@
     void endGroup(MessageSource source, unsigned lineNumber, const String& sourceURL);
 
-    void markTimeline(const String& message); 
+    void markTimeline(const String& message);
 
 #if ENABLE(JAVASCRIPT_DEBUGGER)

trunk/WebCore/inspector/InspectorTimelineAgent.cpp

@@ -245 +245 @@
 }
 
+void InspectorTimelineAgent::didMarkDOMContentEvent()
+{
+    ScriptObject record = TimelineRecordFactory::createGenericRecord(m_frontend, WTF::currentTimeMS());
+    addRecordToTimeline(record, MarkDOMContentEventType);
+}
+
+void InspectorTimelineAgent::didMarkLoadEvent()
+{
+    ScriptObject record = TimelineRecordFactory::createGenericRecord(m_frontend, WTF::currentTimeMS());
+    addRecordToTimeline(record, MarkLoadEventType);
+}
+
 void InspectorTimelineAgent::reset()
 {

trunk/WebCore/inspector/InspectorTimelineAgent.h

@@ -69 +69 @@
     ReceiveResourceDataTimelineRecordType = 16,
     GCEventTimelineRecordType = 17,
+    MarkDOMContentEventType = 18,
+    MarkLoadEventType = 19
 };
 
@@ -112 +114 @@
 
     void didMarkTimeline(const String&);
+    void didMarkDOMContentEvent();
+    void didMarkLoadEvent();
 
     void willSendResourceRequest(unsigned long, bool isMainResource, const ResourceRequest&);

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

@@ -579 +579 @@
 
             var loadDivider = document.createElement("div");
-            loadDivider.className = "resources-onload-divider";
+            loadDivider.className = "resources-event-divider resources-red-divider";
 
             var loadDividerPadding = document.createElement("div");
@@ -594 +594 @@
 
             var domContentDivider = document.createElement("div");
-            domContentDivider.className = "resources-ondomcontent-divider";
+            domContentDivider.className = "resources-event-divider resources-blue-divider";
             
             var domContentDividerPadding = document.createElement("div");

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

@@ -52 +52 @@
     FunctionCall : 15,
     ResourceReceiveData: 16,
-    GCEvent : 17
+    GCEvent : 17,
+    MarkDOMContentEventType : 18,
+    MarkLoadEventType : 19
 };
 

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

@@ -38 +38 @@
 
     this._dividersElement = document.createElement("div");
-    this._dividersElement.id = "resources-dividers";
+    this._dividersElement.className = "resources-dividers";
     this.element.appendChild(this._dividersElement);
 
     this._eventDividersElement = document.createElement("div");
-    this._eventDividersElement.id = "resources-event-dividers";
+    this._eventDividersElement.className = "resources-event-dividers";
     this.element.appendChild(this._eventDividersElement);
 
     this._dividersLabelBarElement = document.createElement("div");
-    this._dividersLabelBarElement.id = "resources-dividers-label-bar";
+    this._dividersLabelBarElement.className = "resources-dividers-label-bar";
     this.element.appendChild(this._dividersLabelBarElement);
 }
@@ -136 +136 @@
     },
 
+    removeEventDividers: function()
+    {
+        this._eventDividersElement.removeChildren();
+    },
+
     setScrollAndDividerTop: function(scrollTop, dividersTop)
     {

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

@@ -164 +164 @@
     },
 
+    updateEventDividers: function(records, dividerConstructor)
+    {
+        this._overviewGrid.removeEventDividers();
+        for (var i = 0; i < records.length; ++i) {
+            var record = records[i];
+            var positions = this._overviewCalculator.computeBarGraphPercentages(record);
+            var divider = dividerConstructor(record);
+            divider.style.left = positions.start + "%";
+            this._overviewGrid.addEventDivider(divider);
+        }
+    },
+
     setSidebarWidth: function(width)
     {

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

@@ -96 +96 @@
     this.toggleFilterButton.toggled = true;
     this._calculator._showShortEvents = this.toggleFilterButton.toggled;
+    this._markTimelineRecords = [];
+    this._expandOffset = 15;
 }
 
@@ -153 +155 @@
             recordStyles[recordTypes.ResourceReceiveData] = { title: WebInspector.UIString("Receive Data"), category: this.categories.loading };
             recordStyles[recordTypes.GCEvent] = { title: WebInspector.UIString("GC Event"), category: this.categories.scripting };
+            recordStyles[recordTypes.MarkDOMContentEventType] = { title: WebInspector.UIString("DOMContent event"), category: this.categories.scripting };
+            recordStyles[recordTypes.MarkLoadEventType] = { title: WebInspector.UIString("Load event"), category: this.categories.scripting };
             this._recordStylesArray = recordStyles;
         }
@@ -176 +180 @@
     {
         this.recordsCounter.textContent = WebInspector.UIString("%d of %d captured records are visible", this._rootRecord._visibleRecordsCount, this._rootRecord._allRecordsCount);
+    },
+
+    _updateEventDividers: function()
+    {
+        this._timelineGrid.removeEventDividers();
+        var clientWidth = this._graphRowsElement.offsetWidth - this._expandOffset;
+        for (var i = 0; i < this._markTimelineRecords.length; ++i) {
+            var record = this._markTimelineRecords[i];
+            var positions = this._calculator.computeBarGraphWindowPosition(record, clientWidth);
+            if (positions.left < 0 || positions.left >= clientWidth)
+                continue;
+
+            var divider = this._createEventDivider(record);
+            divider.style.left = (positions.left + this._expandOffset) + "px";
+
+            this._timelineGrid.addEventDivider(divider);
+        }
+        this._overviewPane.updateEventDividers(this._markTimelineRecords, this._createEventDivider.bind(this));
+    },
+
+    _createEventDivider: function(record)
+    {
+        var eventDivider = document.createElement("div");
+        eventDivider.className = "resources-event-divider";
+        var recordTypes = WebInspector.TimelineAgent.RecordType;
+
+        var eventDividerPadding = document.createElement("div");
+        eventDividerPadding.className = "resources-event-divider-padding";
+        eventDividerPadding.title = record.title;
+
+        if (record.type === recordTypes.MarkDOMContentEventType)
+            eventDivider.className += " resources-blue-divider";
+        else if (record.type === recordTypes.MarkLoadEventType)
+            eventDivider.className += " resources-red-divider";
+        else if (record.type === recordTypes.MarkTimeline) {
+            eventDivider.className += " resources-orange-divider";
+            eventDividerPadding.title = record.data.message;
+        }
+        eventDividerPadding.appendChild(eventDivider);
+        return eventDividerPadding;
     },
 
@@ -244 +288 @@
             }
         }
+        var recordTypes = WebInspector.TimelineAgent.RecordType;
 
         var formattedRecord = new WebInspector.TimelinePanel.FormattedRecord(record, parentRecord, this._recordStyles, this._sendRequestRecords, this._timerRecords);
+
+        if (record.type === recordTypes.MarkDOMContentEventType || record.type === recordTypes.MarkLoadEventType) {
+            // No bar entry for load events.
+            this._markTimelineRecords.push(formattedRecord);
+            return;
+        }
+
         ++this._rootRecord._allRecordsCount;
 
@@ -261 +313 @@
             }
         }
+
+        // Keep bar entry for mark timeline since nesting might be interesting to the user.
+        if (record.type === recordTypes.MarkTimeline)
+            this._markTimelineRecords.push(formattedRecord);
     },
 
@@ -294 +350 @@
     _clearPanel: function()
     {
+        this._markTimelineRecords = [];
         this._sendRequestRecords = {};
         this._timerRecords = {};
@@ -361 +418 @@
         this._refreshRecords(!this._boundariesAreValid);
         this._updateRecordsCounter();
+        this._updateEventDividers();
         this._boundariesAreValid = true;
     },
@@ -418 +476 @@
         // Define row height, should be in sync with styles for timeline graphs.
         const rowHeight = 18;
-        const expandOffset = 15;
 
         // Convert visible area to visible indexes. Always include top-level record for a visible nested record.
@@ -452 +509 @@
 
             listRowElement.row.update(record, isEven, this._calculator, visibleTop);
-            graphRowElement.row.update(record, isEven, this._calculator, width, expandOffset, i);
+            graphRowElement.row.update(record, isEven, this._calculator, width, this._expandOffset, i);
 
             listRowElement = listRowElement.nextSibling;
@@ -473 +530 @@
         this.sidebarResizeElement.style.height = this.sidebarElement.clientHeight + "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;
+        var timelinePaddingLeft = this._calculator.windowLeft === 0 ? this._expandOffset : 0;
         if (updateBoundaries)
             this._timelineGrid.updateDividers(true, this._calculator, timelinePaddingLeft);
@@ -531 +588 @@
     },
 
-    computeBarGraphWindowPosition: function(record, clientWidth, expandOffset)
+    computeBarGraphWindowPosition: function(record, clientWidth)
     {
         const minWidth = 5;
         const borderWidth = 4;
-        var workingArea = clientWidth - expandOffset - minWidth - borderWidth;
+        var workingArea = clientWidth - minWidth - borderWidth;
         var percentages = this.computeBarGraphPercentages(record);
         var left = percentages.start / 100 * workingArea;
@@ -671 +728 @@
         this._record = record;
         this.element.className = "timeline-graph-side timeline-category-" + record.category.name + (isEven ? " even" : "");
-        var barPosition = calculator.computeBarGraphWindowPosition(record, clientWidth, expandOffset);
+        var barPosition = calculator.computeBarGraphWindowPosition(record, clientWidth - expandOffset);
         this._barWithChildrenElement.style.left = barPosition.left + expandOffset + "px";
         this._barWithChildrenElement.style.width = barPosition.widthWithChildren + "px";

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

@@ -2668 +2668 @@
 }
 
-#resources-dividers {
+.resources-dividers {
     position: absolute;
     left: 0;
@@ -2677 +2677 @@
 }
 
-#resources-event-dividers {
+.resources-event-dividers {
     position: absolute;
     left: 0;
@@ -2687 +2687 @@
 }
 
-#resources-dividers-label-bar {
+.timeline .resources-event-dividers {
+    height: 19px;
+}
+
+.resources-dividers-label-bar {
     position: absolute;
     top: 0;
@@ -2715 +2719 @@
 }
 
-.resources-onload-divider {
+.resources-event-divider {
     position: absolute;
     width: 2px;
@@ -2721 +2725 @@
     bottom: 0;
     z-index: 300;
+}
+
+.resources-red-divider {
     background-color: rgba(255, 0, 0, 0.5);
 }
 
-.resources-ondomcontent-divider {
-    position: absolute;
-    width: 2px;
-    top: 0;
-    bottom: 0;
-    z-index: 300;
+.resources-blue-divider {
     background-color: rgba(0, 0, 255, 0.5);
+}
+
+.resources-orange-divider {
+    background-color: rgba(255, 178, 23, 0.5);
 }