Bug 1518159 - Remove usages of and support for XUL textbox[type='search'] in DevTools. r=pbro, a=RyanVM
authorTim Nguyen <ntim.bugs@gmail.com>
Wed, 09 Jan 2019 13:29:31 +0000
changeset 509380 7fad62ad328dbd6df5d45ba2d26c92c4f250651a
parent 509379 7ce6302e38fd1af3e9b17ac1a49320b603f83477
child 509381 87b11c0f4ff5507a3bc4e52f6d20a8c5760c5acc
push id1905
push userffxbld-merge
push dateMon, 21 Jan 2019 12:33:13 +0000
treeherdermozilla-release@c2fca1944d8c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro, RyanVM
bugs1518159
milestone65.0
Bug 1518159 - Remove usages of and support for XUL textbox[type='search'] in DevTools. r=pbro, a=RyanVM Differential Revision: https://phabricator.services.mozilla.com/D15842
devtools/client/canvasdebugger/index.xul
devtools/client/shared/widgets/VariablesView.jsm
devtools/client/storage/index.xul
devtools/client/storage/ui.js
devtools/client/themes/common.css
--- a/devtools/client/canvasdebugger/index.xul
+++ b/devtools/client/canvasdebugger/index.xul
@@ -104,17 +104,16 @@
                              oncommand="CallsListView._onStepOut()"/>
             </hbox>
             <toolbarbutton id="debugging-toolbar-sizer-button"
                            class="devtools-toolbarbutton"
                            label=""/>
             <textbox id="calls-searchbox"
                      class="devtools-filterinput"
                      placeholder="&canvasDebuggerUI.searchboxPlaceholder;"
-                     type="search"
                      flex="1"/>
           </toolbar>
           <vbox id="calls-list" flex="1"/>
         </vbox>
 
         <splitter class="devtools-side-splitter"/>
 
         <vbox id="screenshot-container"
--- a/devtools/client/shared/widgets/VariablesView.jsm
+++ b/devtools/client/shared/widgets/VariablesView.jsm
@@ -436,36 +436,35 @@ VariablesView.prototype = {
 
     // Hide the variables searchbox container if there are no variables or
     // properties to display.
     container.hidden = !this._store.length;
 
     const searchbox = this._searchboxNode = document.createXULElement("textbox");
     searchbox.className = "variables-view-searchinput devtools-filterinput";
     searchbox.setAttribute("placeholder", this._searchboxPlaceholder);
-    searchbox.setAttribute("type", "search");
     searchbox.setAttribute("flex", "1");
-    searchbox.addEventListener("command", this._onSearchboxInput);
+    searchbox.addEventListener("input", this._onSearchboxInput);
     searchbox.addEventListener("keydown", this._onSearchboxKeyDown);
 
     container.appendChild(searchbox);
     ownerNode.insertBefore(container, this._parent);
   },
 
   /**
    * Disables variable and property searching in this view.
    * Use the "searchEnabled" setter to disable searching.
    */
   _disableSearch: function() {
     // If searching was already disabled, no need to re-disable it again.
     if (!this._searchboxContainer) {
       return;
     }
     this._searchboxContainer.remove();
-    this._searchboxNode.removeEventListener("command", this._onSearchboxInput);
+    this._searchboxNode.removeEventListener("input", this._onSearchboxInput);
     this._searchboxNode.removeEventListener("keydown", this._onSearchboxKeyDown);
 
     this._searchboxContainer = null;
     this._searchboxNode = null;
   },
 
   /**
    * Sets the variables searchbox container hidden or visible.
--- a/devtools/client/storage/index.xul
+++ b/devtools/client/storage/index.xul
@@ -47,18 +47,16 @@
       <hbox id="storage-toolbar" class="devtools-toolbar">
         <button id="add-button"
                 class="devtools-button add-button"></button>
         <button id="refresh-button"
                 class="devtools-button refresh-button"></button>
         <spacer flex="1"/>
         <textbox id="storage-searchbox"
                  class="devtools-filterinput"
-                 type="search"
-                 timeout="200"
                  placeholder="&searchBox.placeholder;"/>
         <button class="devtools-button sidebar-toggle" hidden="true"></button>
       </hbox>
       <vbox id="storage-table" class="theme-sidebar" flex="1"/>
     </vbox>
     <splitter class="devtools-side-splitter"/>
     <vbox id="storage-sidebar" class="devtools-sidebar-tabs" hidden="true">
       <vbox flex="1"/>
--- a/devtools/client/storage/ui.js
+++ b/devtools/client/storage/ui.js
@@ -260,17 +260,17 @@ class StorageUI {
     this._tablePopupDeleteAllFrom.removeEventListener("command", this.onRemoveAllFrom);
     this._tablePopupDeleteAll.removeEventListener("command", this.onRemoveAll);
     this._tablePopupDeleteAllSessionCookies.removeEventListener("command",
       this.onRemoveAllSessionCookies);
   }
 
   setupToolbar() {
     this.searchBox = this._panelDoc.getElementById("storage-searchbox");
-    this.searchBox.addEventListener("command", this.filterItems);
+    this.searchBox.addEventListener("input", this.filterItems);
 
     // Setup the sidebar toggle button.
     this.sidebarToggleBtn = this._panelDoc.querySelector(".sidebar-toggle");
     this.updateSidebarToggleButton();
 
     this.sidebarToggleBtn.addEventListener("click", this.onPaneToggleButtonClicked);
   }
 
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -494,26 +494,16 @@ checkbox:-moz-focusring {
 
 .devtools-searchinput:-moz-locale-dir(rtl),
 .devtools-searchinput:dir(rtl),
 .devtools-filterinput:-moz-locale-dir(rtl),
 .devtools-filterinput:dir(rtl) {
   background-position: calc(100% - 8px) center;
 }
 
-/* This is needed to remove the default search icon on windows. See bug 1400615. */
-.devtools-filterinput > .textbox-input-box > .textbox-search-sign {
-  display: none;
-}
-
-.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon,
-.devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon {
-  visibility: hidden;
-}
-
 .devtools-searchinput .textbox-input::placeholder,
 .devtools-filterinput .textbox-input::placeholder {
   font-style: normal;
 }
 
 .devtools-plaininput {
   color: var(--grey-90);
   border-color: transparent;
@@ -635,38 +625,16 @@ checkbox:-moz-focusring {
 .devtools-style-searchbox-no-match + .devtools-searchinput-clear {
   background-image: url("chrome://devtools/skin/images/search-clear-failed.svg") !important;
 }
 
 .devtools-searchinput-clear:hover {
   background-position: -16px 0;
 }
 
-.theme-dark .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear,
-.theme-dark .devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear {
-  list-style-image: url("chrome://devtools/skin/images/search-clear-dark.svg");
-  -moz-image-region: rect(0, 16px, 16px, 0);
-}
-
-.theme-light .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear,
-.theme-light .devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear {
-  list-style-image: url("chrome://devtools/skin/images/search-clear-light.svg");
-  -moz-image-region: rect(0, 16px, 16px, 0);
-}
-
-.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear,
-.devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear {
-  margin-bottom: 0;
-}
-
-.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover,
-.devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover {
-  -moz-image-region: rect(0, 32px, 16px, 16px);
-}
-
 /* Twisty and checkbox controls */
 
 .theme-twisty {
   width: 14px;
   height: 14px;
   cursor: pointer;
   background-image: url("chrome://devtools/skin/images/arrow.svg");
   background-position: center;