Bug 1463566 - Lazy load the inspector search. r=pbro
MozReview-Commit-ID: 6BgIv1zDbgC
--- a/devtools/client/inspector/inspector-search.js
+++ b/devtools/client/inspector/inspector-search.js
@@ -31,21 +31,20 @@ const MAX_SUGGESTIONS = 15;
* - search-result: when a search is made and a result is selected
*/
function InspectorSearch(inspector, input, clearBtn) {
this.inspector = inspector;
this.searchBox = input;
this.searchClearButton = clearBtn;
this._lastSearched = null;
- this.searchClearButton.hidden = true;
-
this._onKeyDown = this._onKeyDown.bind(this);
this._onInput = this._onInput.bind(this);
this._onClearSearch = this._onClearSearch.bind(this);
+
this.searchBox.addEventListener("keydown", this._onKeyDown, true);
this.searchBox.addEventListener("input", this._onInput, true);
this.searchClearButton.addEventListener("click", this._onClearSearch);
// For testing, we need to be able to wait for the most recent node request
// to finish. Tests can watch this promise for that.
this._lastQuery = promise.resolve(null);
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -202,16 +202,24 @@ Inspector.prototype = {
get notificationBox() {
if (!this._notificationBox) {
this._notificationBox = this.toolbox.getNotificationBox();
}
return this._notificationBox;
},
+ get search() {
+ if (!this._search) {
+ this._search = new InspectorSearch(this, this.searchBox, this.searchClearButton);
+ }
+
+ return this._search;
+ },
+
/**
* Handle promise rejections for various asynchronous actions, and only log errors if
* the inspector panel still exists.
* This is useful to silence useless errors that happen when the inspector is closed
* while still initializing (and making protocol requests).
*/
_handleRejectionIfNotDestroyed: function(e) {
if (!this._panelDestroyer) {
@@ -365,19 +373,20 @@ Inspector.prototype = {
/**
* Hooks the searchbar to show result and auto completion suggestions.
*/
setupSearchBox: function() {
this.searchBox = this.panelDoc.getElementById("inspector-searchbox");
this.searchClearButton = this.panelDoc.getElementById("inspector-searchinput-clear");
this.searchResultsLabel = this.panelDoc.getElementById("inspector-searchlabel");
- this.search = new InspectorSearch(this, this.searchBox, this.searchClearButton);
- this.search.on("search-cleared", this._clearSearchResultsLabel);
- this.search.on("search-result", this._updateSearchResultsLabel);
+ this.searchBox.addEventListener("focus", () => {
+ this.search.on("search-cleared", this._clearSearchResultsLabel);
+ this.search.on("search-result", this._updateSearchResultsLabel);
+ }, { once: true });
let shortcuts = new KeyShortcuts({
window: this.panelDoc.defaultView,
});
let key = INSPECTOR_L10N.getStr("inspector.searchHTML.key");
shortcuts.on(key, event => {
// Prevent overriding same shortcut from the computed/rule views
if (event.target.closest("#sidebar-panel-ruleview") ||
@@ -1322,29 +1331,32 @@ Inspector.prototype = {
let highlighterDestroyer = this.highlighters.destroy();
this.teardownSplitter();
this.teardownToolbar();
this.breadcrumbs.destroy();
this.reflowTracker.destroy();
this.styleChangeTracker.destroy();
- this.search.destroy();
+
+ if (this._search) {
+ this._search.destroy();
+ this._search = null;
+ }
this._notificationBox = null;
this._target = null;
this._toolbox = null;
this.breadcrumbs = null;
this.highlighters = null;
this.is3PaneModeEnabled = null;
this.panelDoc = null;
this.panelWin.inspector = null;
this.panelWin = null;
this.resultsLength = null;
- this.search = null;
this.searchBox = null;
this.show3PaneTooltip = null;
this.sidebar = null;
this.store = null;
this.telemetry = null;
this.threePaneTooltip = null;
this._panelDestroyer = promise.all([
--- a/devtools/client/inspector/inspector.xhtml
+++ b/devtools/client/inspector/inspector.xhtml
@@ -51,17 +51,17 @@
<button id="inspector-element-add-button" class="devtools-button"
data-localization="title=inspectorAddNode.label"></button>
<div class="devtools-toolbar-spacer"></div>
<span id="inspector-searchlabel"></span>
<div id="inspector-search" class="devtools-searchbox has-clear-btn">
<input id="inspector-searchbox" class="devtools-searchinput"
type="search"
data-localization="placeholder=inspectorSearchHTML.label3"/>
- <button id="inspector-searchinput-clear" class="devtools-searchinput-clear" tabindex="-1"></button>
+ <button id="inspector-searchinput-clear" class="devtools-searchinput-clear" hidden="true" tabindex="-1"></button>
</div>
<button id="inspector-eyedropper-toggle" class="devtools-button"></button>
</div>
<!-- Markup Container -->
<div id="markup-box"></div>
<div id="inspector-breadcrumbs-toolbar" class="devtools-toolbar">
<div id="inspector-breadcrumbs" class="breadcrumbs-widget-container"