Attachment #45551 for bug #32932

View Details Raw Unified Return to Bug 32932

| Differences between



2009-12-25  Alexander Pavlov  <apavlov@chromium.org>

        Reviewed by NOBODY (OOPS!).

        Fix UI nits in the Audits panel.
        https://bugs.webkit.org/show_bug.cgi?id=32932

        * inspector/front-end/AuditLauncherView.js:
        (WebInspector.AuditLauncherView.prototype._selectAllClicked):
        (WebInspector.AuditLauncherView.prototype._createCategoryElement):
        (WebInspector.AuditLauncherView.prototype._createLauncherUI.handleSelectAllClick):
        (WebInspector.AuditLauncherView.prototype._createLauncherUI):
        * inspector/front-end/AuditResultView.js:
        (WebInspector.AuditResultView):
        (WebInspector.AuditRuleResultPane):
        * inspector/front-end/audits.css:

2009-12-25  Alexander Pavlov  <apavlov@chromium.org>

        Reviewed by Pavel Feldman.

        AuditsPanel for Web Inspector (hidden, no preset audits).



        this._runnerCallback(catIds, this._auditPresentStateElement.checked, profilingFinishedCallback.bind(this));
    },

    _selectAllClicked: function(checkCategories)
    {
        var shouldCheckCategoriesOn = event.target.checked;
        var childNodes = this._categoriesElement.childNodes;
        for (var i = 0, length = childNodes.length; i < length; ++i)
            childNodes[i].firstChild.checked = checkCategories;
        this._currentCategoriesCount = checkCategories ? this._totalCategoriesCount : 0;
        this._updateButton();
    },


        element = document.createElement("input");
        element.type = "checkbox";
        labelElement.appendChild(element);

        labelElement.appendChild(document.createTextNode(title));

        return labelElement;

        this._headerElement.textContent = WebInspector.UIString("Select audits to run");
        this._contentElement.appendChild(this._headerElement);

        function handleSelectAllClick(event)
        {
            this._selectAllClicked(event.target.checked);
        }
        var categoryElement = this._createCategoryElement(WebInspector.UIString("Select All"), "");
        categoryElement.id = "audit-launcher-selectall";
        this._selectAllCheckboxElement = categoryElement.firstChild;
        this._selectAllCheckboxElement.checked = true;
        this._selectAllCheckboxElement.addEventListener("click", handleSelectAllClick.bind(this), false);
        this._contentElement.appendChild(categoryElement);

        this._categoriesElement = document.createElement("div");


        this._contentElement.appendChild(this._buttonContainerElement);

        this._selectAllClicked(this._selectAllCheckboxElement.checked);
        this.updateResourceTrackingState();
        this._updateButton();
        this.resize();



{
    WebInspector.View.call(this);

    this.element.id = "audit-result-view";

    this.resultBarElement = document.createElement("div");
    this.resultBarElement.id = "audit-resultbar";
    this.element.appendChild(this.resultBarElement);

    function entrySortFunction(a, b)
    {

        var entries = categoryResults[i].entries;
        if (entries) {
            entries.sort(entrySortFunction);
            this.element.appendChild(new WebInspector.AuditCategoryResultPane(categoryResults[i]).element);
        }
    }
}


    for (var i = 0; i < ruleResult.children.length; ++i) {
        var section = new WebInspector.AuditRuleResultChildSection(ruleResult.children[i]);
        section.expand();
        this.bodyElement.appendChild(section.element);
    }
}



    -webkit-mask-image: url(Images/clearConsoleButtonGlyph.png);
}

#audit-result-view {
    display: none;
    overflow: auto;
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;
}

.audit-result-view.visible {
    display: block;
}

#audit-resultbar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background-color: rgb(245, 245, 245);
    border-left: 1px solid rgb(64%, 64%, 64%);
    cursor: default;
    overflow: auto;
}

#audit-result-view.visible {
    display: block;
}

#audit-result-view > .pane img.score {
    float: left;
    margin-top: 2px;
    position: relative;

    z-index: 100;
}

#audit-result-view > .pane img.score.red {
    content: url(Images/errorRedDot.png);
}

#audit-result-view > .pane img.score.green {
    content: url(Images/successGreenDot.png);
}

#audit-result-view > .pane.expanded:nth-last-of-type(1) {
    border-bottom: 1px solid rgb(189, 189, 189) !important;
}

#audit-result-view .pane.expanded:nth-last-of-type(1) {
    border-bottom: 0px transparent none;
}

#audit-result-view > .pane > .body > .pane > .title {
    padding-left: 16px;
    background-image: none;
    border-bottom: none;
}

#audit-result-view > .pane > .body > .pane > .body {
    background-color: transparent;
}

#audit-result-view > .pane > .body > .pane .section {
    margin-left: 16px;
}

#audit-result-view .section .header {
    border: 0;
    background-image: none;
    background-color: transparent;
}

#audit-result-view .section .header > .title {
    color: rgb(0, 0, 0);
}

#audit-result-view .section .section-content {
    width: 100%;
    padding-left: 18px;
    display: none;
}

#audit-result-view .section.expanded .section-content {
    display: block;
}

#audit-result-view .section.expanded .section-content > p:nth-of-type(1) {
    margin-top: 0;
}

#audit-result-view .section.expanded .section-content > p:nth-of-type(1) > *:nth-child(1) {
    margin-top: 0;
}

#audit-result-view .section .header::before {
    content: url(Images/treeRightTriangleBlack.png);
}

#audit-result-view .section.expanded .header::before {
    content: url(Images/treeDownTriangleBlack.png);
}


Return to Bug 32932

Lines 103-115 WebInspector.AuditLauncherView.prototype = { a/WebCore/inspector/front-end/AuditLauncherView.js_sec1
- a/WebCore/inspector/front-end/AuditLauncherView.js -6 / +10 lines
103	this._runnerCallback(catIds, this._auditPresentStateElement.checked, profilingFinishedCallback.bind(this));	103	this._runnerCallback(catIds, this._auditPresentStateElement.checked, profilingFinishedCallback.bind(this));
104	},	104	},
105		105
106	_selectAllClicked: function(event)	106	_selectAllClicked: function(checkCategories)
107	{	107	{
108	var shouldCheckCategoriesOn = event.target.checked;
109	var childNodes = this._categoriesElement.childNodes;	108	var childNodes = this._categoriesElement.childNodes;
110	for (var i = 0, length = childNodes.length; i < length; ++i)	109	for (var i = 0, length = childNodes.length; i < length; ++i)
111	childNodes[i].firstChild.checked = shouldCheckCategoriesOn;	110	childNodes[i].firstChild.checked = checkCategories;
112	this._currentCategoriesCount = shouldCheckCategoriesOn ? this._totalCategoriesCount : 0;	111	this._currentCategoriesCount = checkCategories ? this._totalCategoriesCount : 0;
113	this._updateButton();	112	this._updateButton();
114	},	113	},
115		114
Lines 129-135 WebInspector.AuditLauncherView.prototype = { a/WebCore/inspector/front-end/AuditLauncherView.js_sec2
129	element = document.createElement("input");	128	element = document.createElement("input");
130	element.type = "checkbox";	129	element.type = "checkbox";
131	labelElement.appendChild(element);	130	labelElement.appendChild(element);
132
133	labelElement.appendChild(document.createTextNode(title));	131	labelElement.appendChild(document.createTextNode(title));
134		132
135	return labelElement;	133	return labelElement;
Lines 141-150 WebInspector.AuditLauncherView.prototype = { a/WebCore/inspector/front-end/AuditLauncherView.js_sec3
141	this._headerElement.textContent = WebInspector.UIString("Select audits to run");	139	this._headerElement.textContent = WebInspector.UIString("Select audits to run");
142	this._contentElement.appendChild(this._headerElement);	140	this._contentElement.appendChild(this._headerElement);
143		141
		142	function handleSelectAllClick(event)
		143	{
		144	this._selectAllClicked(event.target.checked);
		145	}
144	var categoryElement = this._createCategoryElement(WebInspector.UIString("Select All"), "");	146	var categoryElement = this._createCategoryElement(WebInspector.UIString("Select All"), "");
145	categoryElement.id = "audit-launcher-selectall";	147	categoryElement.id = "audit-launcher-selectall";
146	this._selectAllCheckboxElement = categoryElement.firstChild;	148	this._selectAllCheckboxElement = categoryElement.firstChild;
147	this._selectAllCheckboxElement.addEventListener("click", this._selectAllClicked.bind(this), false);	149	this._selectAllCheckboxElement.checked = true;
		150	this._selectAllCheckboxElement.addEventListener("click", handleSelectAllClick.bind(this), false);
148	this._contentElement.appendChild(categoryElement);	151	this._contentElement.appendChild(categoryElement);
149		152
150	this._categoriesElement = document.createElement("div");	153	this._categoriesElement = document.createElement("div");
Lines 191-196 WebInspector.AuditLauncherView.prototype = { a/WebCore/inspector/front-end/AuditLauncherView.js_sec4
191		194
192	this._contentElement.appendChild(this._buttonContainerElement);	195	this._contentElement.appendChild(this._buttonContainerElement);
193		196
		197	this._selectAllClicked(this._selectAllCheckboxElement.checked);
194	this.updateResourceTrackingState();	198	this.updateResourceTrackingState();
195	this._updateButton();	199	this._updateButton();
196	this.resize();	200	this.resize();

Lines 32-42 WebInspector.AuditResultView = function(categoryResults) a/WebCore/inspector/front-end/AuditResultView.js_sec1
- a/WebCore/inspector/front-end/AuditResultView.js -7 / +2 lines
32	{	32	{
33	WebInspector.View.call(this);	33	WebInspector.View.call(this);
34		34
35	this.element.addStyleClass("audit-result-view");	35	this.element.id = "audit-result-view";
36
37	this.resultBarElement = document.createElement("div");
38	this.resultBarElement.id = "audit-resultbar";
39	this.element.appendChild(this.resultBarElement);
40		36
41	function entrySortFunction(a, b)	37	function entrySortFunction(a, b)
42	{	38	{
Lines 50-56 WebInspector.AuditResultView = function(categoryResults) a/WebCore/inspector/front-end/AuditResultView.js_sec2
50	var entries = categoryResults[i].entries;	46	var entries = categoryResults[i].entries;
51	if (entries) {	47	if (entries) {
52	entries.sort(entrySortFunction);	48	entries.sort(entrySortFunction);
53	this.resultBarElement.appendChild(new WebInspector.AuditCategoryResultPane(categoryResults[i]).element);	49	this.element.appendChild(new WebInspector.AuditCategoryResultPane(categoryResults[i]).element);
54	}	50	}
55	}	51	}
56	}	52	}
Lines 79-85 WebInspector.AuditRuleResultPane = function(ruleResult) a/WebCore/inspector/front-end/AuditResultView.js_sec3
79		75
80	for (var i = 0; i < ruleResult.children.length; ++i) {	76	for (var i = 0; i < ruleResult.children.length; ++i) {
81	var section = new WebInspector.AuditRuleResultChildSection(ruleResult.children[i]);	77	var section = new WebInspector.AuditRuleResultChildSection(ruleResult.children[i]);
82	section.expand();
83	this.bodyElement.appendChild(section.element);	78	this.bodyElement.appendChild(section.element);
84	}	79	}
85	}	80	}

Lines 50-56 button.clear-audit-results-status-bar-item .glyph { a/WebCore/inspector/front-end/audits.css_sec1
- a/WebCore/inspector/front-end/audits.css -30 / +25 lines
50	-webkit-mask-image: url(Images/clearConsoleButtonGlyph.png);	50	-webkit-mask-image: url(Images/clearConsoleButtonGlyph.png);
51	}	51	}
52		52
53	.audit-result-view {	53	#audit-result-view {
54	display: none;	54	display: none;
55	overflow: auto;	55	overflow: auto;
56	position: absolute;	56	position: absolute;
Lines 58-82 button.clear-audit-results-status-bar-item .glyph { a/WebCore/inspector/front-end/audits.css_sec2
58	left: 0;	58	left: 0;
59	right: 0;	59	right: 0;
60	bottom: 0;	60	bottom: 0;
61	}
62
63	.audit-result-view.visible {
64	display: block;
65	}
66
67	#audit-resultbar {
68	position: absolute;
69	top: 0;
70	right: 0;
71	bottom: 0;
72	width: 100%;
73	background-color: rgb(245, 245, 245);	61	background-color: rgb(245, 245, 245);
74	border-left: 1px solid rgb(64%, 64%, 64%);
75	cursor: default;	62	cursor: default;
76	overflow: auto;	63	overflow: auto;
77	}	64	}
78		65
79	#audit-resultbar > .pane img.score {	66	#audit-result-view.visible {
		67	display: block;
		68	}
		69
		70	#audit-result-view > .pane img.score {
80	float: left;	71	float: left;
81	margin-top: 2px;	72	margin-top: 2px;
82	position: relative;	73	position: relative;
Lines 85-149 button.clear-audit-results-status-bar-item .glyph { a/WebCore/inspector/front-end/audits.css_sec3
85	z-index: 100;	76	z-index: 100;
86	}	77	}
87		78
88	#audit-resultbar > .pane img.score.red {	79	#audit-result-view > .pane img.score.red {
89	content: url(Images/errorRedDot.png);	80	content: url(Images/errorRedDot.png);
90	}	81	}
91		82
92	#audit-resultbar > .pane img.score.green {	83	#audit-result-view > .pane img.score.green {
93	content: url(Images/successGreenDot.png);	84	content: url(Images/successGreenDot.png);
94	}	85	}
95		86
96	#audit-resultbar > .pane > .body > .pane:nth-of-type(2n) {	87	#audit-result-view > .pane.expanded:nth-last-of-type(1) {
97	background-color: rgba(0, 0, 0, 0.05);	88	border-bottom: 1px solid rgb(189, 189, 189) !important;
		89	}
		90
		91	#audit-result-view .pane.expanded:nth-last-of-type(1) {
		92	border-bottom: 0px transparent none;
98	}	93	}
99		94
100	#audit-resultbar > .pane > .body > .pane > .title {	95	#audit-result-view > .pane > .body > .pane > .title {
101	padding-left: 16px;	96	padding-left: 16px;
102	background-image: none;	97	background-image: none;
103	border-bottom: none;	98	border-bottom: none;
104	}	99	}
105		100
106	#audit-resultbar > .pane > .body > .pane > .body {	101	#audit-result-view > .pane > .body > .pane > .body {
107	background-color: transparent;	102	background-color: transparent;
108	}	103	}
109		104
110	#audit-resultbar > .pane > .body > .pane .section {	105	#audit-result-view > .pane > .body > .pane .section {
111	margin-left: 16px;	106	margin-left: 16px;
112	}	107	}
113		108
114	#audit-resultbar .section .header {	109	#audit-result-view .section .header {
115	border: 0;	110	border: 0;
116	background-image: none;	111	background-image: none;
117	background-color: transparent;	112	background-color: transparent;
118	}	113	}
119		114
120	#audit-resultbar .section .header > .title {	115	#audit-result-view .section .header > .title {
121	color: rgb(0, 0, 0);	116	color: rgb(0, 0, 0);
122	}	117	}
123		118
124	#audit-resultbar .section .section-content {	119	#audit-result-view .section .section-content {
125	width: 100%;	120	width: 100%;
126	padding-left: 18px;	121	padding-left: 18px;
127	display: none;	122	display: none;
128	}	123	}
129		124
130	#audit-resultbar .section.expanded .section-content {	125	#audit-result-view .section.expanded .section-content {
131	display: block;	126	display: block;
132	}	127	}
133		128
134	#audit-resultbar .section.expanded .section-content > p:nth-of-type(1) {	129	#audit-result-view .section.expanded .section-content > p:nth-of-type(1) {
135	margin-top: 0;	130	margin-top: 0;
136	}	131	}
137		132
138	#audit-resultbar .section.expanded .section-content > p:nth-of-type(1) > *:nth-child(1) {	133	#audit-result-view .section.expanded .section-content > p:nth-of-type(1) > *:nth-child(1) {
139	margin-top: 0;	134	margin-top: 0;
140	}	135	}
141		136
142	#audit-resultbar .section .header::before {	137	#audit-result-view .section .header::before {
143	content: url(Images/treeRightTriangleBlack.png);	138	content: url(Images/treeRightTriangleBlack.png);
144	}	139	}
145		140
146	#audit-resultbar .section.expanded .header::before {	141	#audit-result-view .section.expanded .header::before {
147	content: url(Images/treeDownTriangleBlack.png);	142	content: url(Images/treeDownTriangleBlack.png);
148	}	143	}
149		144

Lines 1-5 a/WebCore/ChangeLog_sec1
- a/WebCore/ChangeLog +17 lines
1	2009-12-25 Alexander Pavlov <apavlov@chromium.org>	1	2009-12-25 Alexander Pavlov <apavlov@chromium.org>
2		2
		3	Reviewed by NOBODY (OOPS!).
		4
		5	Fix UI nits in the Audits panel.
		6	https://bugs.webkit.org/show_bug.cgi?id=32932
		7
		8	* inspector/front-end/AuditLauncherView.js:
		9	(WebInspector.AuditLauncherView.prototype._selectAllClicked):
		10	(WebInspector.AuditLauncherView.prototype._createCategoryElement):
		11	(WebInspector.AuditLauncherView.prototype._createLauncherUI.handleSelectAllClick):
		12	(WebInspector.AuditLauncherView.prototype._createLauncherUI):
		13	* inspector/front-end/AuditResultView.js:
		14	(WebInspector.AuditResultView):
		15	(WebInspector.AuditRuleResultPane):
		16	* inspector/front-end/audits.css:
		17
		18	2009-12-25 Alexander Pavlov <apavlov@chromium.org>
		19
3	Reviewed by Pavel Feldman.	20	Reviewed by Pavel Feldman.
4		21
5	AuditsPanel for Web Inspector (hidden, no preset audits).	22	AuditsPanel for Web Inspector (hidden, no preset audits).