Bug 1518159 - Remove usages of and support for XUL textbox[type='search'] in DevTools. r=pbro
authorTim Nguyen <ntim.bugs@gmail.com>
Wed, 09 Jan 2019 13:29:31 +0000
changeset 510153 aab09dc65108a5d2c663b1d1acc7b09ec44e04ef
parent 510152 91d96a779590e292f493eae19365c63355cdfc77
child 510154 6137d13c8648cc711b0e9bb83cbeb3cfa4ece3d7
push id10547
push userffxbld-merge
push dateMon, 21 Jan 2019 13:03:58 +0000
treeherdermozilla-beta@24ec1916bffe [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1518159
milestone66.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1518159 - Remove usages of and support for XUL textbox[type='search'] in DevTools. r=pbro 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
@@ -492,26 +492,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;
@@ -633,38 +623,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;