Attachment #137908 for bug #84235

View Details Raw Unified Return to Bug 84235

| Differences between



2012-04-19  Sam D  <dsam2912@gmail.com>

        Web Inspector: Does not have search navigation button for going through matches in either direction (prev, next)
        https://bugs.webkit.org/show_bug.cgi?id=84235

        Added buttons for navigating on search matches in inspector panel
        through button clicks as well.
        Reviewed by NOBODY (OOPS!).

        No new tests required / enhancing ux of search functionality.

        * WebCore.gypi:
        * inspector/front-end/Images/searchBtnBck.png: Added.
        * inspector/front-end/Images/searchBtnBckHover.png: Added.
        * inspector/front-end/Images/searchNext.png: Added.
        * inspector/front-end/Images/searchPrev.png: Added.
        * inspector/front-end/SearchController.js:
        (WebInspector.SearchController):
        (WebInspector.SearchController.prototype._updateSearchNavigationButtonState):
        (WebInspector.SearchController.prototype._updateSearchMatchesCountAndCurrentMatchIndex):
        (WebInspector.SearchController.prototype._onNextSearch):
        (WebInspector.SearchController.prototype._onPrevSearch):
        (WebInspector.SearchController.prototype._performSearch):
        (WebInspector.SearchController.prototype._createSearchNavBtn):
        (WebInspector.SearchController.prototype._populateSearchNavButtons):
        * inspector/front-end/WebKit.qrc:
        * inspector/front-end/inspector.css:
        (.toolbar-search-item):
        (#search):
        (#toolbar-search-nav-ctrl):
        (.toolbar-search-nav-label):
        (.toolbar-search-nav-label:hover):
        (.toolbar-search-nav-icon-prev , .toolbar-search-nav-icon-next):
        (.toolbar-search-nav-icon-prev):
        (.toolbar-search-nav-icon-next):
        * inspector/front-end/inspector.html:

2012-04-19  Vsevolod Vlasov  <vsevik@chromium.org>

        Web Inspector: x-frame security errors logged when typing in the console are annoying.

Lines 6552-6557 Source/WebCore/WebCore.gypi_sec1
- Source/WebCore/WebCore.gypi +4 lines
6552	'inspector/front-end/Images/searchSmallBrightBlue.png',	6552	'inspector/front-end/Images/searchSmallBrightBlue.png',
6553	'inspector/front-end/Images/searchSmallGray.png',	6553	'inspector/front-end/Images/searchSmallGray.png',
6554	'inspector/front-end/Images/searchSmallWhite.png',	6554	'inspector/front-end/Images/searchSmallWhite.png',
		6555	'inspector/front-end/Images/searchBtnBck.png',
		6556	'inspector/front-end/Images/searchBtnBckHover.png',
		6557	'inspector/front-end/Images/searchNext.png',
		6558	'inspector/front-end/Images/searchPrev.png',
6555	'inspector/front-end/Images/segment.png',	6559	'inspector/front-end/Images/segment.png',
6556	'inspector/front-end/Images/segmentEnd.png',	6560	'inspector/front-end/Images/segmentEnd.png',
6557	'inspector/front-end/Images/segmentHover.png',	6561	'inspector/front-end/Images/segmentHover.png',

Lines 37-46 WebInspector.SearchController = function Source/WebCore/inspector/front-end/SearchController.js_sec1
- Source/WebCore/inspector/front-end/SearchController.js -1 / +66 lines
37	this.element = document.getElementById("search");	37	this.element = document.getElementById("search");
38	this._matchesElement = document.getElementById("search-results-matches");	38	this._matchesElement = document.getElementById("search-results-matches");
39	this._toolbarLabelElement = document.getElementById("search-toolbar-label");	39	this._toolbarLabelElement = document.getElementById("search-toolbar-label");
		40	this._searchControlBoxElement = document.getElementById("toolbar-search-nav-ctrl");
40		41
41	this.element.addEventListener("search", this._onSearch.bind(this), false); // when the search is emptied	42	this.element.addEventListener("search", this._onSearch.bind(this), false); // when the search is emptied
42	this.element.addEventListener("mousedown", this._onSearchFieldManualFocus.bind(this), false); // when the search field is manually selected	43	this.element.addEventListener("mousedown", this._onSearchFieldManualFocus.bind(this), false); // when the search field is manually selected
43	this.element.addEventListener("keydown", this._onKeyDown.bind(this), true);	44	this.element.addEventListener("keydown", this._onKeyDown.bind(this), true);
		45
		46	this._populateSearchNavButtons();
44	}	47	}
45		48
46	WebInspector.SearchController.prototype = {	49	WebInspector.SearchController.prototype = {
Lines 151-156 WebInspector.SearchController.prototype Source/WebCore/inspector/front-end/SearchController.js_sec2
151	}	154	}
152	},	155	},
153		156
		157	_updateSearchNavigationButtonState: function(visible)
		158	{
		159	if (visible) {
		160	this._searchNavigationNext.removeStyleClass("hidden");
		161	this._searchNavigationPrev.removeStyleClass("hidden");
		162	} else {
		163	this._searchNavigationNext.addStyleClass("hidden");
		164	this._searchNavigationPrev.addStyleClass("hidden");
		165	}
		166	},
		167
154	/**	168	/**
155	* @param {?number=} matches	169	* @param {?number=} matches
156	* @param {number=} currentMatchIndex	170	* @param {number=} currentMatchIndex
Lines 159-164 WebInspector.SearchController.prototype Source/WebCore/inspector/front-end/SearchController.js_sec3
159	{	173	{
160	if (matches == null) {	174	if (matches == null) {
161	this._matchesElement.addStyleClass("hidden");	175	this._matchesElement.addStyleClass("hidden");
		176	// Make Search Nav key non-accessible when there is no active search.
		177	this._updateSearchNavigationButtonState(false);
162	return;	178	return;
163	}	179	}
164		180
Lines 173-181 WebInspector.SearchController.prototype Source/WebCore/inspector/front-end/SearchController.js_sec4
173	var matchesString = WebInspector.UIString("%d of %d matches", currentMatchIndex + 1, matches);	189	var matchesString = WebInspector.UIString("%d of %d matches", currentMatchIndex + 1, matches);
174	else	190	else
175	var matchesString = WebInspector.UIString("%d matches", matches);	191	var matchesString = WebInspector.UIString("%d matches", matches);
		192	// Make search nav key accessible when there are more than 1 search results found.
		193	this._updateSearchNavigationButtonState(true);
176	}	194	}
177	} else	195	} else {
178	var matchesString = WebInspector.UIString("Not Found");	196	var matchesString = WebInspector.UIString("Not Found");
		197	// Make search nav key non-accessible when there is no match found.
		198	this._updateSearchNavigationButtonState(false);
		199	}
179		200
180	this._matchesElement.removeStyleClass("hidden");	201	this._matchesElement.removeStyleClass("hidden");
181	this._matchesElement.textContent = matchesString;	202	this._matchesElement.textContent = matchesString;
Lines 234-239 WebInspector.SearchController.prototype Source/WebCore/inspector/front-end/SearchController.js_sec5
234	this._performSearch(event.target.value, forceSearch, event.shiftKey, false);	255	this._performSearch(event.target.value, forceSearch, event.shiftKey, false);
235	},	256	},
236		257
		258	_onNextBtnSearch: function(event)
		259	{
		260	// Simulate next search on search-nav-btn click.
		261	this._performSearch(this.element.value, true, false, false);
		262	},
		263
		264	_onPrevBtnSearch: function(event)
		265	{
		266	// Simulate previous search on search-nav-btn click.
		267	this._performSearch(this.element.value, true, true, false);
		268	},
		269
237	/**	270	/**
238	* @param {boolean=} forceSearch	271	* @param {boolean=} forceSearch
239	* @param {boolean=} isBackwardSearch	272	* @param {boolean=} isBackwardSearch
Lines 295-300 WebInspector.SearchController.prototype Source/WebCore/inspector/front-end/SearchController.js_sec6
295		328
296	currentPanel.currentQuery = query;	329	currentPanel.currentQuery = query;
297	currentPanel.performSearch(query);	330	currentPanel.performSearch(query);
		331	},
		332
		333	/**
		334	* @param {string=} direction
		335	*/
		336	_createSearchNavBtn: function(direction) {
		337	var searchNavControlElement = document.createElement("div");
		338	var searchNavIconElement = document.createElement("div");
		339	searchNavControlElement.className = "toolbar-search-nav-label hidden";
		340	switch(direction) {
		341	case "prev":
		342	searchNavControlElement.setAttribute("title" , "Search Previous");
		343	searchNavIconElement.className = "toolbar-search-nav-icon-prev";
		344	this._searchNavigationPrev = searchNavControlElement;
		345	this._searchNavigationPrev.addEventListener("mousedown", this._onPrevBtnSearch.bind(this), false);
		346	break;
		347	case "next":
		348	searchNavControlElement.setAttribute("title" , "Search Next");
		349	searchNavIconElement.className = "toolbar-search-nav-icon-next";
		350	this._searchNavigationNext = searchNavControlElement;
		351	this._searchNavigationNext.addEventListener("mousedown", this._onNextBtnSearch.bind(this), false);
		352	break;
		353
		354	}
		355	searchNavControlElement.appendChild(searchNavIconElement);
		356	this._searchControlBoxElement.appendChild(searchNavControlElement);
		357	},
		358
		359	_populateSearchNavButtons: function() {
		360	// Lazily adding search navigation keys to dom.
		361	this._createSearchNavBtn("prev");
		362	this._createSearchNavBtn("next");
298	}	363	}
299	}	364	}
300		365

Lines 271-276 Source/WebCore/inspector/front-end/WebKit.qrc_sec1
- Source/WebCore/inspector/front-end/WebKit.qrc +4 lines
271	<file>Images/searchSmallBrightBlue.png</file>	271	<file>Images/searchSmallBrightBlue.png</file>
272	<file>Images/searchSmallGray.png</file>	272	<file>Images/searchSmallGray.png</file>
273	<file>Images/searchSmallWhite.png</file>	273	<file>Images/searchSmallWhite.png</file>
		274	<file>Images/searchBtnBck.png</file>
		275	<file>Images/searchBtnBckHover.png</file>
		276	<file>Images/searchNext.png</file>
		277	<file>Images/searchPrev.png</file>
274	<file>Images/segment.png</file>	278	<file>Images/segment.png</file>
275	<file>Images/segmentEnd.png</file>	279	<file>Images/segmentEnd.png</file>
276	<file>Images/segmentHover.png</file>	280	<file>Images/segmentHover.png</file>




.toolbar-search-item {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-align: center;
    -webkit-box-pack: end;
}

    font-size: 16px;
}

#toolbar-search-nav-ctrl {
    width: 40px;
}

.toolbar-search-nav-label {
    background-image: url('Images/searchBtnBck.png');
    padding: 4px;
    width: 18px;
    height: 18px;
    float: right;
}

.toolbar-search-nav-label:hover {
    background-image: url('Images/searchBtnBckHover.png');
}

.toolbar-search-nav-icon-prev , .toolbar-search-nav-icon-next {
    width: 9px;
    margin-top: 2px;
    height: 100%;
    background-repeat: no-repeat;
}

.toolbar-search-nav-icon-prev {
    background-image: url('Images/searchPrev.png');
}

.toolbar-search-nav-icon-next {
    background-image: url('Images/searchNext.png');
}

body.compact #search {
    font-size: 11px;
}

Lines 211-217 THIS SOFTWARE, EVEN IF ADVISED OF THE PO Source/WebCore/inspector/front-end/inspector.html_sec1
- Source/WebCore/inspector/front-end/inspector.html -1 / +4 lines
211	<div id="toolbar-controls">	211	<div id="toolbar-controls">
212	<div class="toolbar-item"><button id="toolbar-dropdown-arrow" class="toolbar-label">»</button></div>	212	<div class="toolbar-item"><button id="toolbar-dropdown-arrow" class="toolbar-label">»</button></div>
213	<div class="toolbar-item hidden" id="search-results-matches"></div>	213	<div class="toolbar-item hidden" id="search-results-matches"></div>
214	<div class="toolbar-item toolbar-search-item"><input id="search" type="search" incremental results="0"><div id="search-toolbar-label" class="toolbar-label"></div></div>	214	<div class="toolbar-item toolbar-search-item" >
		215	<input id="search" type="search" incremental results="0">
		216	<div id="search-toolbar-label" class="toolbar-label"></div><div id="toolbar-search-nav-ctrl"></div>
		217	</div>
215	<div class="toolbar-item close-right"><button id="close-button-right"></button></div>	218	<div class="toolbar-item close-right"><button id="close-button-right"></button></div>
216	</div>	219	</div>
217	</div>	220	</div>

Return to Bug 84235

Lines 1-3 Source/WebCore/ChangeLog_sec1
- Source/WebCore/ChangeLog +37 lines
		1	2012-04-19 Sam D <dsam2912@gmail.com>
		2
		3	Web Inspector: Does not have search navigation button for going through matches in either direction (prev, next)
		4	https://bugs.webkit.org/show_bug.cgi?id=84235
		5
		6	Added buttons for navigating on search matches in inspector panel
		7	through button clicks as well.
		8	Reviewed by NOBODY (OOPS!).
		9
		10	No new tests required / enhancing ux of search functionality.
		11
		12	* WebCore.gypi:
		13	* inspector/front-end/Images/searchBtnBck.png: Added.
		14	* inspector/front-end/Images/searchBtnBckHover.png: Added.
		15	* inspector/front-end/Images/searchNext.png: Added.
		16	* inspector/front-end/Images/searchPrev.png: Added.
		17	* inspector/front-end/SearchController.js:
		18	(WebInspector.SearchController):
		19	(WebInspector.SearchController.prototype._updateSearchNavigationButtonState):
		20	(WebInspector.SearchController.prototype._updateSearchMatchesCountAndCurrentMatchIndex):
		21	(WebInspector.SearchController.prototype._onNextSearch):
		22	(WebInspector.SearchController.prototype._onPrevSearch):
		23	(WebInspector.SearchController.prototype._performSearch):
		24	(WebInspector.SearchController.prototype._createSearchNavBtn):
		25	(WebInspector.SearchController.prototype._populateSearchNavButtons):
		26	* inspector/front-end/WebKit.qrc:
		27	* inspector/front-end/inspector.css:
		28	(.toolbar-search-item):
		29	(#search):
		30	(#toolbar-search-nav-ctrl):
		31	(.toolbar-search-nav-label):
		32	(.toolbar-search-nav-label:hover):
		33	(.toolbar-search-nav-icon-prev , .toolbar-search-nav-icon-next):
		34	(.toolbar-search-nav-icon-prev):
		35	(.toolbar-search-nav-icon-next):
		36	* inspector/front-end/inspector.html:
		37
1	2012-04-19 Vsevolod Vlasov <vsevik@chromium.org>	38	2012-04-19 Vsevolod Vlasov <vsevik@chromium.org>
2		39
3	Web Inspector: x-frame security errors logged when typing in the console are annoying.	40	Web Inspector: x-frame security errors logged when typing in the console are annoying.

Lines 261-267 body.detached.platform-mac-snowleopard # Source/WebCore/inspector/front-end/inspector.css_sec1
- Source/WebCore/inspector/front-end/inspector.css -1 / +32 lines
261		261
262	.toolbar-search-item {	262	.toolbar-search-item {
263	display: -webkit-box;	263	display: -webkit-box;
264	-webkit-box-orient: vertical;	264	-webkit-box-orient: horizontal;
265	-webkit-box-align: center;	265	-webkit-box-align: center;
266	-webkit-box-pack: end;	266	-webkit-box-pack: end;
267	}	267	}
Lines 271-276 body.detached.platform-mac-snowleopard # Source/WebCore/inspector/front-end/inspector.css_sec2
271	font-size: 16px;	271	font-size: 16px;
272	}	272	}
273		273
		274	#toolbar-search-nav-ctrl {
		275	width: 40px;
		276	}
		277
		278	.toolbar-search-nav-label {
		279	background-image: url('Images/searchBtnBck.png');
		280	padding: 4px;
		281	width: 18px;
		282	height: 18px;
		283	float: right;
		284	}
		285
		286	.toolbar-search-nav-label:hover {
		287	background-image: url('Images/searchBtnBckHover.png');
		288	}
		289
		290	.toolbar-search-nav-icon-prev , .toolbar-search-nav-icon-next {
		291	width: 9px;
		292	margin-top: 2px;
		293	height: 100%;
		294	background-repeat: no-repeat;
		295	}
		296
		297	.toolbar-search-nav-icon-prev {
		298	background-image: url('Images/searchPrev.png');
		299	}
		300
		301	.toolbar-search-nav-icon-next {
		302	background-image: url('Images/searchNext.png');
		303	}
		304
274	body.compact #search {	305	body.compact #search {
275	font-size: 11px;	306	font-size: 11px;
276	}	307	}