From 6b3253987c35e9d61b04570e78bb42bff96f746f Mon Sep 17 00:00:00 2001
From: Gabriel Luong <gabriel.luong@gmail.com>
Date: Thu, 24 May 2018 14:09:13 -0400
Subject: [PATCH] Bug 1463566 - Lazy load the inspector search. r=pbro

---
 devtools/client/inspector/inspector-search.js |  3 +--
 devtools/client/inspector/inspector.js        | 22 ++++++++++++++-----
 devtools/client/inspector/inspector.xhtml     |  2 +-
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/devtools/client/inspector/inspector-search.js b/devtools/client/inspector/inspector-search.js
index 6877f89eba21..920ad8d109d4 100644
--- a/devtools/client/inspector/inspector-search.js
+++ b/devtools/client/inspector/inspector-search.js
@@ -36,11 +36,10 @@ function InspectorSearch(inspector, input, clearBtn) {
   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);
diff --git a/devtools/client/inspector/inspector.js b/devtools/client/inspector/inspector.js
index 5b3f37b12ae5..40059f9e7c36 100644
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -215,6 +215,14 @@ Inspector.prototype = {
     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.
@@ -378,9 +386,10 @@ Inspector.prototype = {
     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,
@@ -1351,6 +1360,11 @@ Inspector.prototype = {
       this._highlighters = null;
     }
 
+    if (this._search) {
+      this._search.destroy();
+      this._search = null;
+    }
+
     let cssPropertiesDestroyer = this._cssProperties.front.destroy();
     let sidebarDestroyer = this.sidebar.destroy();
     let ruleViewSideBarDestroyer = this.ruleViewSideBar ?
@@ -1363,7 +1377,6 @@ Inspector.prototype = {
     this.breadcrumbs.destroy();
     this.reflowTracker.destroy();
     this.styleChangeTracker.destroy();
-    this.search.destroy();
 
     this._notificationBox = null;
     this._target = null;
@@ -1374,7 +1387,6 @@ Inspector.prototype = {
     this.panelWin.inspector = null;
     this.panelWin = null;
     this.resultsLength = null;
-    this.search = null;
     this.searchBox = null;
     this.show3PaneTooltip = null;
     this.sidebar = null;
diff --git a/devtools/client/inspector/inspector.xhtml b/devtools/client/inspector/inspector.xhtml
index 1a89a85a61cf..72925ab21674 100644
--- a/devtools/client/inspector/inspector.xhtml
+++ b/devtools/client/inspector/inspector.xhtml
@@ -56,7 +56,7 @@
           <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>