Attachment #55235 for bug #38643

View Details Raw Unified Return to Bug 38643

| Differences between



2010-05-06  Ilya Tikhonovsky  <loislo@chromium.org>

        Reviewed by NOBODY (OOPS!).

        WebInspector: If some record is not in visible area then it's expand element also is not
        visible even if it has children in visible area.
        https://bugs.webkit.org/show_bug.cgi?id=38643

        * inspector/front-end/TimelinePanel.js:
        (WebInspector.TimelinePanel):
        ():
        * inspector/front-end/inspector.js:
        (WebInspector.linkifyURLAsNode):

2010-05-05  Charles Wei  <charles.wei@torchmobile.com.cn>

        Reviewed by George Staikos

Lines 76-81 WebInspector.TimelinePanel = function() a/WebCore/inspector/front-end/TimelinePanel.js_sec1
- a/WebCore/inspector/front-end/TimelinePanel.js -52 / +87 lines
76	this._bottomGapElement.className = "timeline-gap";	76	this._bottomGapElement.className = "timeline-gap";
77	this._itemsGraphsElement.appendChild(this._bottomGapElement);	77	this._itemsGraphsElement.appendChild(this._bottomGapElement);
78		78
		79	this._expandElements = document.createElement("div");
		80	this._expandElements.id = "orphan-expand-elements";
		81	this._itemsGraphsElement.appendChild(this._expandElements);
		82
79	this._rootRecord = this._createRootRecord();	83	this._rootRecord = this._createRootRecord();
80	this._sendRequestRecords = {};	84	this._sendRequestRecords = {};
81	this._timerRecords = {};	85	this._timerRecords = {};
Lines 99-104 WebInspector.TimelinePanel = function() a/WebCore/inspector/front-end/TimelinePanel.js_sec2
99	this._expandOffset = 15;	103	this._expandOffset = 15;
100	}	104	}
101		105
		106	// Define row height, should be in sync with styles for timeline graphs.
		107	WebInspector.TimelinePanel.rowHeight = 18;
102	WebInspector.TimelinePanel.shortRecordThreshold = 0.015;	108	WebInspector.TimelinePanel.shortRecordThreshold = 0.015;
103		109
104	WebInspector.TimelinePanel.prototype = {	110	WebInspector.TimelinePanel.prototype = {
Lines 292-303 WebInspector.TimelinePanel.prototype = { a/WebCore/inspector/front-end/TimelinePanel.js_sec3
292	}	298	}
293	}	299	}
294		300
295	if (record.type == recordTypes.TimerFire && record.children && record.children.length === 1) {	301	if (record.type == recordTypes.TimerFire && record.children) {
296	var childRecord = record.children[0];	302	var childRecord = record.children[0];
297	if ( childRecord.type === recordTypes.FunctionCall) {	303	if ( childRecord.type === recordTypes.FunctionCall) {
298	record.data.scriptName = childRecord.data.scriptName;	304	record.data.scriptName = childRecord.data.scriptName;
299	record.data.scriptLine = childRecord.data.scriptLine;	305	record.data.scriptLine = childRecord.data.scriptLine;
300	record.children = childRecord.children;	306	record.children.shift();
		307	record.children = childRecord.children.concat(record.children);
301	}	308	}
302	}	309	}
303		310
Lines 491-498 WebInspector.TimelinePanel.prototype = { a/WebCore/inspector/front-end/TimelinePanel.js_sec4
491	var visibleTop = this._scrollTop;	498	var visibleTop = this._scrollTop;
492	var visibleBottom = visibleTop + this._containerElement.clientHeight;	499	var visibleBottom = visibleTop + this._containerElement.clientHeight;
493		500
494	// Define row height, should be in sync with styles for timeline graphs.	501	const rowHeight = WebInspector.TimelinePanel.rowHeight;
495	const rowHeight = 18;
496		502
497	// Convert visible area to visible indexes. Always include top-level record for a visible nested record.	503	// Convert visible area to visible indexes. Always include top-level record for a visible nested record.
498	var startIndex = Math.max(0, Math.min(Math.floor(visibleTop / rowHeight) - 1, recordsInWindow.length - 1));	504	var startIndex = Math.max(0, Math.min(Math.floor(visibleTop / rowHeight) - 1, recordsInWindow.length - 1));
Lines 511-535 WebInspector.TimelinePanel.prototype = { a/WebCore/inspector/front-end/TimelinePanel.js_sec5
511	this._itemsGraphsElement.removeChild(this._graphRowsElement);	517	this._itemsGraphsElement.removeChild(this._graphRowsElement);
512	var graphRowElement = this._graphRowsElement.firstChild;	518	var graphRowElement = this._graphRowsElement.firstChild;
513	var scheduleRefreshCallback = this._scheduleRefresh.bind(this, true);	519	var scheduleRefreshCallback = this._scheduleRefresh.bind(this, true);
		520	this._itemsGraphsElement.removeChild(this._expandElements);
		521	this._expandElements.removeChildren();
514		522
515	for (var i = startIndex; i < endIndex; ++i) {	523	for (var i = 0; i < endIndex; ++i) {
516	var record = recordsInWindow[i];	524	var record = recordsInWindow[i];
517	var isEven = !(i % 2);	525	var isEven = !(i % 2);
518		526
519	if (!listRowElement) {	527	if (i < startIndex) {
520	listRowElement = new WebInspector.TimelineRecordListRow().element;	528	var lastChildIndex = i + record._visibleChildrenCount;
521	this._sidebarListElement.appendChild(listRowElement);	529	if (lastChildIndex >= startIndex && lastChildIndex < endIndex) {
522	}	530	var expandElement = new WebInspector.TimelineExpandableElement(this._expandElements);
523	if (!graphRowElement) {	531	expandElement._update(record, i, this._calculator.computeBarGraphWindowPosition(record, width - this._expandOffset));
524	graphRowElement = new WebInspector.TimelineRecordGraphRow(this._itemsGraphsElement, scheduleRefreshCallback, rowHeight).element;	532	}
525	this._graphRowsElement.appendChild(graphRowElement);	533	} else {
526	}	534	if (!listRowElement) {
		535	listRowElement = new WebInspector.TimelineRecordListRow().element;
		536	this._sidebarListElement.appendChild(listRowElement);
		537	}
		538	if (!graphRowElement) {
		539	graphRowElement = new WebInspector.TimelineRecordGraphRow(this._itemsGraphsElement, scheduleRefreshCallback, rowHeight).element;
		540	this._graphRowsElement.appendChild(graphRowElement);
		541	}
527		542
528	listRowElement.row.update(record, isEven, this._calculator, visibleTop);	543	listRowElement.row.update(record, isEven, this._calculator, visibleTop);
529	graphRowElement.row.update(record, isEven, this._calculator, width, this._expandOffset, i);	544	graphRowElement.row.update(record, isEven, this._calculator, width, this._expandOffset, i);
530		545
531	listRowElement = listRowElement.nextSibling;	546	listRowElement = listRowElement.nextSibling;
532	graphRowElement = graphRowElement.nextSibling;	547	graphRowElement = graphRowElement.nextSibling;
		548	}
533	}	549	}
534		550
535	// Remove extra rows.	551	// Remove extra rows.
Lines 545-550 WebInspector.TimelinePanel.prototype = { a/WebCore/inspector/front-end/TimelinePanel.js_sec6
545	}	561	}
546		562
547	this._itemsGraphsElement.insertBefore(this._graphRowsElement, this._bottomGapElement);	563	this._itemsGraphsElement.insertBefore(this._graphRowsElement, this._bottomGapElement);
		564	this._itemsGraphsElement.appendChild(this._expandElements);
548	this.sidebarResizeElement.style.height = this.sidebarElement.clientHeight + "px";	565	this.sidebarResizeElement.style.height = this.sidebarElement.clientHeight + "px";
549	// Reserve some room for expand / collapse controls to the left for records that start at 0ms.	566	// Reserve some room for expand / collapse controls to the left for records that start at 0ms.
550	var timelinePaddingLeft = this._calculator.windowLeft === 0 ? this._expandOffset : 0;	567	var timelinePaddingLeft = this._calculator.windowLeft === 0 ? this._expandOffset : 0;
Lines 708-714 WebInspector.TimelineRecordListRow.prototype = { a/WebCore/inspector/front-end/TimelinePanel.js_sec7
708	}	725	}
709	}	726	}
710		727
711	WebInspector.TimelineRecordGraphRow = function(graphContainer, scheduleRefresh, rowHeight)	728	WebInspector.TimelineExpandableElement = function(container)
		729	{
		730	this._element = document.createElement("div");
		731	this._element.className = "timeline-expandable";
		732
		733	var leftBorder = document.createElement("div");
		734	leftBorder.className = "timeline-expandable-left";
		735	this._element.appendChild(leftBorder);
		736
		737	container.appendChild(this._element);
		738	}
		739
		740	WebInspector.TimelineExpandableElement.prototype = {
		741	_update: function(record, index, barPosition)
		742	{
		743	const rowHeight = WebInspector.TimelinePanel.rowHeight;
		744	if (record._visibleChildrenCount \|\| record._invisibleChildrenCount) {
		745	this._element.style.top = index * rowHeight + "px";
		746	this._element.style.left = barPosition.left + "px";
		747	this._element.style.width = Math.max(12, barPosition.width + 25) + "px";
		748	if (!record.collapsed) {
		749	this._element.style.height = (record._visibleChildrenCount + 1) * rowHeight + "px";
		750	this._element.addStyleClass("timeline-expandable-expanded");
		751	this._element.removeStyleClass("timeline-expandable-collapsed");
		752	} else {
		753	this._element.style.height = rowHeight + "px";
		754	this._element.addStyleClass("timeline-expandable-collapsed");
		755	this._element.removeStyleClass("timeline-expandable-expanded");
		756	}
		757	this._element.removeStyleClass("hidden");
		758	} else
		759	this._element.addStyleClass("hidden");
		760	},
		761
		762	_dispose: function()
		763	{
		764	this._element.parentElement.removeChild(this._element);
		765	}
		766	}
		767
		768	WebInspector.TimelineRecordGraphRow = function(graphContainer, scheduleRefresh)
712	{	769	{
713	this.element = document.createElement("div");	770	this.element = document.createElement("div");
714	this.element.row = this;	771	this.element.row = this;
Lines 732-747 WebInspector.TimelineRecordGraphRow = function(graphContainer, scheduleRefresh, a/WebCore/inspector/front-end/TimelinePanel.js_sec8
732	this._barElement.row = this;	789	this._barElement.row = this;
733	this._barAreaElement.appendChild(this._barElement);	790	this._barAreaElement.appendChild(this._barElement);
734		791
735	this._expandElement = document.createElement("div");	792	this._expandElement = new WebInspector.TimelineExpandableElement(graphContainer);
736	this._expandElement.className = "timeline-expandable";	793	this._expandElement._element.addEventListener("click", this._onClick.bind(this));
737	graphContainer.appendChild(this._expandElement);
738
739	var leftBorder = document.createElement("div");
740	leftBorder.className = "timeline-expandable-left";
741	this._expandElement.appendChild(leftBorder);
742
743	this._expandElement.addEventListener("click", this._onClick.bind(this));
744	this._rowHeight = rowHeight;
745		794
746	this._scheduleRefresh = scheduleRefresh;	795	this._scheduleRefresh = scheduleRefresh;
747	}	796	}
Lines 758-781 WebInspector.TimelineRecordGraphRow.prototype = { a/WebCore/inspector/front-end/TimelinePanel.js_sec9
758	this._barElement.style.width = barPosition.width + "px";	807	this._barElement.style.width = barPosition.width + "px";
759	this._barCpuElement.style.left = barPosition.left + expandOffset + "px";	808	this._barCpuElement.style.left = barPosition.left + expandOffset + "px";
760	this._barCpuElement.style.width = barPosition.cpuWidth + "px";	809	this._barCpuElement.style.width = barPosition.cpuWidth + "px";
761		810	this._expandElement._update(record, index, barPosition);
762	if (record._visibleChildrenCount \|\| record._invisibleChildrenCount) {
763	this._expandElement.style.top = index * this._rowHeight + "px";
764	this._expandElement.style.left = barPosition.left + "px";
765	this._expandElement.style.width = Math.max(12, barPosition.width + 25) + "px";
766	if (!record.collapsed) {
767	this._expandElement.style.height = (record._visibleChildrenCount + 1) * this._rowHeight + "px";
768	this._expandElement.addStyleClass("timeline-expandable-expanded");
769	this._expandElement.removeStyleClass("timeline-expandable-collapsed");
770	} else {
771	this._expandElement.style.height = this._rowHeight + "px";
772	this._expandElement.addStyleClass("timeline-expandable-collapsed");
773	this._expandElement.removeStyleClass("timeline-expandable-expanded");
774	}
775	this._expandElement.removeStyleClass("hidden");
776	} else {
777	this._expandElement.addStyleClass("hidden");
778	}
779	},	811	},
780		812
781	_onClick: function(event)	813	_onClick: function(event)
Lines 787-793 WebInspector.TimelineRecordGraphRow.prototype = { a/WebCore/inspector/front-end/TimelinePanel.js_sec10
787	dispose: function()	819	dispose: function()
788	{	820	{
789	this.element.parentElement.removeChild(this.element);	821	this.element.parentElement.removeChild(this.element);
790	this._expandElement.parentElement.removeChild(this._expandElement);	822	this._expandElement._dispose();
791	}	823	}
792	}	824	}
793		825
Lines 928-933 WebInspector.TimelinePanel.FormattedRecord.prototype = { a/WebCore/inspector/front-end/TimelinePanel.js_sec11
928	case recordTypes.Paint:	960	case recordTypes.Paint:
929	contentHelper._appendTextRow("Location", this.data.x + "\u2009\u00d7\u2009" + this.data.y);	961	contentHelper._appendTextRow("Location", this.data.x + "\u2009\u00d7\u2009" + this.data.y);
930	contentHelper._appendTextRow("Dimensions", this.data.width + "\u2009\u00d7\u2009" + this.data.height);	962	contentHelper._appendTextRow("Dimensions", this.data.width + "\u2009\u00d7\u2009" + this.data.height);
		963	case recordTypes.RecalculateStyles: // We don't want to see default details.
		964	break;
931	default:	965	default:
932	if (this.details)	966	if (this.details)
933	contentHelper._appendTextRow("Details", this.details);	967	contentHelper._appendTextRow("Details", this.details);
Lines 952-972 WebInspector.TimelinePanel.FormattedRecord.prototype = { a/WebCore/inspector/front-end/TimelinePanel.js_sec12
952	case WebInspector.TimelineAgent.RecordType.GCEvent:	986	case WebInspector.TimelineAgent.RecordType.GCEvent:
953	return WebInspector.UIString("%s collected", Number.bytesToString(record.data.usedHeapSizeDelta));	987	return WebInspector.UIString("%s collected", Number.bytesToString(record.data.usedHeapSizeDelta));
954	case WebInspector.TimelineAgent.RecordType.TimerFire:	988	case WebInspector.TimelineAgent.RecordType.TimerFire:
955	return record.data.scriptName ? WebInspector.linkifyResourceAsNode(record.data.scriptName, "scripts", record.data.scriptLine) : record.data.timerId;	989	return record.data.scriptName ? WebInspector.linkifyResourceAsNode(record.data.scriptName, "scripts", record.data.scriptLine, "", "") : record.data.timerId;
956	case WebInspector.TimelineAgent.RecordType.FunctionCall:	990	case WebInspector.TimelineAgent.RecordType.FunctionCall:
957	return record.data.scriptName ? WebInspector.linkifyResourceAsNode(record.data.scriptName, "scripts", record.data.scriptLine) : null;	991	return record.data.scriptName ? WebInspector.linkifyResourceAsNode(record.data.scriptName, "scripts", record.data.scriptLine, "", "") : null;
958	case WebInspector.TimelineAgent.RecordType.EventDispatch:	992	case WebInspector.TimelineAgent.RecordType.EventDispatch:
959	return record.data ? record.data.type : null;	993	return record.data ? record.data.type : null;
960	case WebInspector.TimelineAgent.RecordType.Paint:	994	case WebInspector.TimelineAgent.RecordType.Paint:
961	return record.data.width + "\u2009\u00d7\u2009" + record.data.height;	995	return record.data.width + "\u2009\u00d7\u2009" + record.data.height;
962	case WebInspector.TimelineAgent.RecordType.TimerInstall:	996	case WebInspector.TimelineAgent.RecordType.TimerInstall:
963	case WebInspector.TimelineAgent.RecordType.TimerRemove:	997	case WebInspector.TimelineAgent.RecordType.TimerRemove:
964	return this.callerScriptName ? WebInspector.linkifyResourceAsNode(this.callerScriptName, "scripts", this.callerScriptLine) : record.data.timerId;	998	return this.callerScriptName ? WebInspector.linkifyResourceAsNode(this.callerScriptName, "scripts", this.callerScriptLine, "", "") : record.data.timerId;
965	case WebInspector.TimelineAgent.RecordType.ParseHTML:	999	case WebInspector.TimelineAgent.RecordType.ParseHTML:
966	case WebInspector.TimelineAgent.RecordType.RecalculateStyles:	1000	case WebInspector.TimelineAgent.RecordType.RecalculateStyles:
967	return this.callerScriptName ? WebInspector.linkifyResourceAsNode(this.callerScriptName, "scripts", this.callerScriptLine) : null;	1001	return this.callerScriptName ? WebInspector.linkifyResourceAsNode(this.callerScriptName, "scripts", this.callerScriptLine, "", "") : null;
968	case WebInspector.TimelineAgent.RecordType.EvaluateScript:	1002	case WebInspector.TimelineAgent.RecordType.EvaluateScript:
969	return record.data.url ? WebInspector.linkifyResourceAsNode(record.data.url, "scripts", record.data.lineNumber) : null;	1003	console.log(WebInspector.linkifyResourceAsNode(record.data.url, "scripts", record.data.lineNumber, "", ""));
		1004	return record.data.url ? WebInspector.linkifyResourceAsNode(record.data.url, "scripts", record.data.lineNumber, "", "") : null;
970	case WebInspector.TimelineAgent.RecordType.XHRReadyStateChange:	1005	case WebInspector.TimelineAgent.RecordType.XHRReadyStateChange:
971	case WebInspector.TimelineAgent.RecordType.XHRLoad:	1006	case WebInspector.TimelineAgent.RecordType.XHRLoad:
972	case WebInspector.TimelineAgent.RecordType.ResourceSendRequest:	1007	case WebInspector.TimelineAgent.RecordType.ResourceSendRequest:

Lines 1626-1632 WebInspector.linkifyURLAsNode = function(url, linkText, classes, isExternal, too a/WebCore/inspector/front-end/inspector.js_sec1
- a/WebCore/inspector/front-end/inspector.js -1 / +4 lines
1626	var a = document.createElement("a");	1626	var a = document.createElement("a");
1627	a.href = url;	1627	a.href = url;
1628	a.className = classes;	1628	a.className = classes;
1629	a.title = tooltipText \|\| url;	1629	if (typeof tooltipText === "undefined")
		1630	a.title = url;
		1631	else if (typeof tooltipText !== "string" \|\| tooltipText.length != 0)
		1632	a.title = tooltipText;
1630	a.target = "_blank";	1633	a.target = "_blank";
1631	a.textContent = linkText;	1634	a.textContent = linkText;
1632		1635

Return to Bug 38643

Lines 1-3 a/WebCore/ChangeLog_sec1
- a/WebCore/ChangeLog +14 lines
		1	2010-05-06 Ilya Tikhonovsky <loislo@chromium.org>
		2
		3	Reviewed by NOBODY (OOPS!).
		4
		5	WebInspector: If some record is not in visible area then it's expand element also is not
		6	visible even if it has children in visible area.
		7	https://bugs.webkit.org/show_bug.cgi?id=38643
		8
		9	* inspector/front-end/TimelinePanel.js:
		10	(WebInspector.TimelinePanel):
		11	():
		12	* inspector/front-end/inspector.js:
		13	(WebInspector.linkifyURLAsNode):
		14
1	2010-05-05 Charles Wei <charles.wei@torchmobile.com.cn>	15	2010-05-05 Charles Wei <charles.wei@torchmobile.com.cn>
2		16
3	Reviewed by George Staikos	17	Reviewed by George Staikos