Changeset 57280 in webkit
- Timestamp:
- Apr 8, 2010 8:27:32 AM (14 years ago)
- Location:
- trunk
- Files:
-
- 14 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/LayoutTests/ChangeLog
r57279 r57280 1 2010-04-08 Pavel Feldman <pfeldman@chromium.org> 2 3 Reviewed by Yury Semikhatsky. 4 5 Web Inspector: Render Load, DOM Content and MarkTimeline event dividers on Timeline panel. 6 7 https://bugs.webkit.org/show_bug.cgi?id=37267 8 9 * inspector/timeline-enum-stability-expected.txt: 10 1 11 2010-04-08 Kent Tamura <tkent@chromium.org> 2 12 -
trunk/LayoutTests/inspector/timeline-enum-stability-expected.txt
r57150 r57280 21 21 WebInspector.TimelineAgent.RecordType.ResourceReceiveData : 16 22 22 WebInspector.TimelineAgent.RecordType.GCEvent : 17 23 WebInspector.TimelineAgent.RecordType.MarkDOMContentEventType : 18 24 WebInspector.TimelineAgent.RecordType.MarkLoadEventType : 19 23 25 -
trunk/WebCore/ChangeLog
r57277 r57280 1 2010-04-08 Pavel Feldman <pfeldman@chromium.org> 2 3 Reviewed by Yury Semikhatsky. 4 5 Web Inspector: Render Load, DOM Content and MarkTimeline event dividers on Timeline panel. 6 7 https://bugs.webkit.org/show_bug.cgi?id=37267 8 9 * English.lproj/localizedStrings.js: 10 * inspector/InspectorController.cpp: 11 (WebCore::InspectorController::mainResourceFiredDOMContentEvent): 12 (WebCore::InspectorController::mainResourceFiredLoadEvent): 13 * inspector/InspectorController.h: 14 * inspector/InspectorTimelineAgent.cpp: 15 (WebCore::InspectorTimelineAgent::didMarkDOMContentEvent): 16 (WebCore::InspectorTimelineAgent::didMarkLoadEvent): 17 * inspector/InspectorTimelineAgent.h: 18 (WebCore::): 19 * inspector/front-end/ResourcesPanel.js: 20 (WebInspector.ResourcesPanel.prototype.updateGraphDividersIfNeeded): 21 * inspector/front-end/TimelineAgent.js: 22 * inspector/front-end/TimelineGrid.js: 23 (WebInspector.TimelineGrid.prototype.removeEventDividers): 24 * inspector/front-end/TimelinePanel.js: 25 (WebInspector.TimelinePanel): 26 (WebInspector.TimelinePanel.prototype.get _recordStyles): 27 (WebInspector.TimelinePanel.prototype._updateMarks): 28 (WebInspector.TimelinePanel.prototype._innerAddRecordToTimeline): 29 (WebInspector.TimelinePanel.prototype._clearPanel): 30 (WebInspector.TimelinePanel.prototype._refresh): 31 (WebInspector.TimelinePanel.prototype._refreshRecords): 32 (WebInspector.TimelineCalculator.prototype.computeBarGraphWindowPosition): 33 (WebInspector.TimelineRecordGraphRow.prototype.update): 34 * inspector/front-end/inspector.css: 35 (.resources-event-divider): 36 (.resources-red-divider): 37 (.resources-blue-divider): 38 (.resources-orange-divider): 39 1 40 2010-04-01 Antonio Gomes <tonikitoo@webkit.org> 2 41 -
trunk/WebCore/inspector/InspectorController.cpp
r56825 r57280 842 842 if (m_mainResource) { 843 843 m_mainResource->markDOMContentEventTime(); 844 if (m_timelineAgent) 845 m_timelineAgent->didMarkDOMContentEvent(); 844 846 if (m_frontend) 845 847 m_mainResource->updateScriptObject(m_frontend.get()); … … 854 856 if (m_mainResource) { 855 857 m_mainResource->markLoadEventTime(); 858 if (m_timelineAgent) 859 m_timelineAgent->didMarkLoadEvent(); 856 860 if (m_frontend) 857 861 m_mainResource->updateScriptObject(m_frontend.get()); -
trunk/WebCore/inspector/InspectorController.h
r56670 r57280 215 215 void endGroup(MessageSource source, unsigned lineNumber, const String& sourceURL); 216 216 217 void markTimeline(const String& message); 217 void markTimeline(const String& message); 218 218 219 219 #if ENABLE(JAVASCRIPT_DEBUGGER) -
trunk/WebCore/inspector/InspectorTimelineAgent.cpp
r57150 r57280 245 245 } 246 246 247 void InspectorTimelineAgent::didMarkDOMContentEvent() 248 { 249 ScriptObject record = TimelineRecordFactory::createGenericRecord(m_frontend, WTF::currentTimeMS()); 250 addRecordToTimeline(record, MarkDOMContentEventType); 251 } 252 253 void InspectorTimelineAgent::didMarkLoadEvent() 254 { 255 ScriptObject record = TimelineRecordFactory::createGenericRecord(m_frontend, WTF::currentTimeMS()); 256 addRecordToTimeline(record, MarkLoadEventType); 257 } 258 247 259 void InspectorTimelineAgent::reset() 248 260 { -
trunk/WebCore/inspector/InspectorTimelineAgent.h
r57150 r57280 69 69 ReceiveResourceDataTimelineRecordType = 16, 70 70 GCEventTimelineRecordType = 17, 71 MarkDOMContentEventType = 18, 72 MarkLoadEventType = 19 71 73 }; 72 74 … … 112 114 113 115 void didMarkTimeline(const String&); 116 void didMarkDOMContentEvent(); 117 void didMarkLoadEvent(); 114 118 115 119 void willSendResourceRequest(unsigned long, bool isMainResource, const ResourceRequest&); -
trunk/WebCore/inspector/front-end/ResourcesPanel.js
r56143 r57280 579 579 580 580 var loadDivider = document.createElement("div"); 581 loadDivider.className = "resources- onload-divider";581 loadDivider.className = "resources-event-divider resources-red-divider"; 582 582 583 583 var loadDividerPadding = document.createElement("div"); … … 594 594 595 595 var domContentDivider = document.createElement("div"); 596 domContentDivider.className = "resources- ondomcontent-divider";596 domContentDivider.className = "resources-event-divider resources-blue-divider"; 597 597 598 598 var domContentDividerPadding = document.createElement("div"); -
trunk/WebCore/inspector/front-end/TimelineAgent.js
r57150 r57280 52 52 FunctionCall : 15, 53 53 ResourceReceiveData: 16, 54 GCEvent : 17 54 GCEvent : 17, 55 MarkDOMContentEventType : 18, 56 MarkLoadEventType : 19 55 57 }; 56 58 -
trunk/WebCore/inspector/front-end/TimelineGrid.js
r53588 r57280 38 38 39 39 this._dividersElement = document.createElement("div"); 40 this._dividersElement. id= "resources-dividers";40 this._dividersElement.className = "resources-dividers"; 41 41 this.element.appendChild(this._dividersElement); 42 42 43 43 this._eventDividersElement = document.createElement("div"); 44 this._eventDividersElement. id= "resources-event-dividers";44 this._eventDividersElement.className = "resources-event-dividers"; 45 45 this.element.appendChild(this._eventDividersElement); 46 46 47 47 this._dividersLabelBarElement = document.createElement("div"); 48 this._dividersLabelBarElement. id= "resources-dividers-label-bar";48 this._dividersLabelBarElement.className = "resources-dividers-label-bar"; 49 49 this.element.appendChild(this._dividersLabelBarElement); 50 50 } … … 136 136 }, 137 137 138 removeEventDividers: function() 139 { 140 this._eventDividersElement.removeChildren(); 141 }, 142 138 143 setScrollAndDividerTop: function(scrollTop, dividersTop) 139 144 { -
trunk/WebCore/inspector/front-end/TimelineOverviewPane.js
r56997 r57280 164 164 }, 165 165 166 updateEventDividers: function(records, dividerConstructor) 167 { 168 this._overviewGrid.removeEventDividers(); 169 for (var i = 0; i < records.length; ++i) { 170 var record = records[i]; 171 var positions = this._overviewCalculator.computeBarGraphPercentages(record); 172 var divider = dividerConstructor(record); 173 divider.style.left = positions.start + "%"; 174 this._overviewGrid.addEventDivider(divider); 175 } 176 }, 177 166 178 setSidebarWidth: function(width) 167 179 { -
trunk/WebCore/inspector/front-end/TimelinePanel.js
r57150 r57280 96 96 this.toggleFilterButton.toggled = true; 97 97 this._calculator._showShortEvents = this.toggleFilterButton.toggled; 98 this._markTimelineRecords = []; 99 this._expandOffset = 15; 98 100 } 99 101 … … 153 155 recordStyles[recordTypes.ResourceReceiveData] = { title: WebInspector.UIString("Receive Data"), category: this.categories.loading }; 154 156 recordStyles[recordTypes.GCEvent] = { title: WebInspector.UIString("GC Event"), category: this.categories.scripting }; 157 recordStyles[recordTypes.MarkDOMContentEventType] = { title: WebInspector.UIString("DOMContent event"), category: this.categories.scripting }; 158 recordStyles[recordTypes.MarkLoadEventType] = { title: WebInspector.UIString("Load event"), category: this.categories.scripting }; 155 159 this._recordStylesArray = recordStyles; 156 160 } … … 176 180 { 177 181 this.recordsCounter.textContent = WebInspector.UIString("%d of %d captured records are visible", this._rootRecord._visibleRecordsCount, this._rootRecord._allRecordsCount); 182 }, 183 184 _updateEventDividers: function() 185 { 186 this._timelineGrid.removeEventDividers(); 187 var clientWidth = this._graphRowsElement.offsetWidth - this._expandOffset; 188 for (var i = 0; i < this._markTimelineRecords.length; ++i) { 189 var record = this._markTimelineRecords[i]; 190 var positions = this._calculator.computeBarGraphWindowPosition(record, clientWidth); 191 if (positions.left < 0 || positions.left >= clientWidth) 192 continue; 193 194 var divider = this._createEventDivider(record); 195 divider.style.left = (positions.left + this._expandOffset) + "px"; 196 197 this._timelineGrid.addEventDivider(divider); 198 } 199 this._overviewPane.updateEventDividers(this._markTimelineRecords, this._createEventDivider.bind(this)); 200 }, 201 202 _createEventDivider: function(record) 203 { 204 var eventDivider = document.createElement("div"); 205 eventDivider.className = "resources-event-divider"; 206 var recordTypes = WebInspector.TimelineAgent.RecordType; 207 208 var eventDividerPadding = document.createElement("div"); 209 eventDividerPadding.className = "resources-event-divider-padding"; 210 eventDividerPadding.title = record.title; 211 212 if (record.type === recordTypes.MarkDOMContentEventType) 213 eventDivider.className += " resources-blue-divider"; 214 else if (record.type === recordTypes.MarkLoadEventType) 215 eventDivider.className += " resources-red-divider"; 216 else if (record.type === recordTypes.MarkTimeline) { 217 eventDivider.className += " resources-orange-divider"; 218 eventDividerPadding.title = record.data.message; 219 } 220 eventDividerPadding.appendChild(eventDivider); 221 return eventDividerPadding; 178 222 }, 179 223 … … 244 288 } 245 289 } 290 var recordTypes = WebInspector.TimelineAgent.RecordType; 246 291 247 292 var formattedRecord = new WebInspector.TimelinePanel.FormattedRecord(record, parentRecord, this._recordStyles, this._sendRequestRecords, this._timerRecords); 293 294 if (record.type === recordTypes.MarkDOMContentEventType || record.type === recordTypes.MarkLoadEventType) { 295 // No bar entry for load events. 296 this._markTimelineRecords.push(formattedRecord); 297 return; 298 } 299 248 300 ++this._rootRecord._allRecordsCount; 249 301 … … 261 313 } 262 314 } 315 316 // Keep bar entry for mark timeline since nesting might be interesting to the user. 317 if (record.type === recordTypes.MarkTimeline) 318 this._markTimelineRecords.push(formattedRecord); 263 319 }, 264 320 … … 294 350 _clearPanel: function() 295 351 { 352 this._markTimelineRecords = []; 296 353 this._sendRequestRecords = {}; 297 354 this._timerRecords = {}; … … 361 418 this._refreshRecords(!this._boundariesAreValid); 362 419 this._updateRecordsCounter(); 420 this._updateEventDividers(); 363 421 this._boundariesAreValid = true; 364 422 }, … … 418 476 // Define row height, should be in sync with styles for timeline graphs. 419 477 const rowHeight = 18; 420 const expandOffset = 15;421 478 422 479 // Convert visible area to visible indexes. Always include top-level record for a visible nested record. … … 452 509 453 510 listRowElement.row.update(record, isEven, this._calculator, visibleTop); 454 graphRowElement.row.update(record, isEven, this._calculator, width, expandOffset, i);511 graphRowElement.row.update(record, isEven, this._calculator, width, this._expandOffset, i); 455 512 456 513 listRowElement = listRowElement.nextSibling; … … 473 530 this.sidebarResizeElement.style.height = this.sidebarElement.clientHeight + "px"; 474 531 // Reserve some room for expand / collapse controls to the left for records that start at 0ms. 475 var timelinePaddingLeft = this._calculator.windowLeft === 0 ? expandOffset : 0;532 var timelinePaddingLeft = this._calculator.windowLeft === 0 ? this._expandOffset : 0; 476 533 if (updateBoundaries) 477 534 this._timelineGrid.updateDividers(true, this._calculator, timelinePaddingLeft); … … 531 588 }, 532 589 533 computeBarGraphWindowPosition: function(record, clientWidth , expandOffset)590 computeBarGraphWindowPosition: function(record, clientWidth) 534 591 { 535 592 const minWidth = 5; 536 593 const borderWidth = 4; 537 var workingArea = clientWidth - expandOffset -minWidth - borderWidth;594 var workingArea = clientWidth - minWidth - borderWidth; 538 595 var percentages = this.computeBarGraphPercentages(record); 539 596 var left = percentages.start / 100 * workingArea; … … 671 728 this._record = record; 672 729 this.element.className = "timeline-graph-side timeline-category-" + record.category.name + (isEven ? " even" : ""); 673 var barPosition = calculator.computeBarGraphWindowPosition(record, clientWidth ,expandOffset);730 var barPosition = calculator.computeBarGraphWindowPosition(record, clientWidth - expandOffset); 674 731 this._barWithChildrenElement.style.left = barPosition.left + expandOffset + "px"; 675 732 this._barWithChildrenElement.style.width = barPosition.widthWithChildren + "px"; -
trunk/WebCore/inspector/front-end/inspector.css
r57206 r57280 2668 2668 } 2669 2669 2670 #resources-dividers {2670 .resources-dividers { 2671 2671 position: absolute; 2672 2672 left: 0; … … 2677 2677 } 2678 2678 2679 #resources-event-dividers {2679 .resources-event-dividers { 2680 2680 position: absolute; 2681 2681 left: 0; … … 2687 2687 } 2688 2688 2689 #resources-dividers-label-bar { 2689 .timeline .resources-event-dividers { 2690 height: 19px; 2691 } 2692 2693 .resources-dividers-label-bar { 2690 2694 position: absolute; 2691 2695 top: 0; … … 2715 2719 } 2716 2720 2717 .resources- onload-divider {2721 .resources-event-divider { 2718 2722 position: absolute; 2719 2723 width: 2px; … … 2721 2725 bottom: 0; 2722 2726 z-index: 300; 2727 } 2728 2729 .resources-red-divider { 2723 2730 background-color: rgba(255, 0, 0, 0.5); 2724 2731 } 2725 2732 2726 .resources-ondomcontent-divider { 2727 position: absolute; 2728 width: 2px; 2729 top: 0; 2730 bottom: 0; 2731 z-index: 300; 2733 .resources-blue-divider { 2732 2734 background-color: rgba(0, 0, 255, 0.5); 2735 } 2736 2737 .resources-orange-divider { 2738 background-color: rgba(255, 178, 23, 0.5); 2733 2739 } 2734 2740
Note: See TracChangeset
for help on using the changeset viewer.