Bug 1557674 - Replace XUL textbox usages with HTML inputs in storage inspector. r=bgrins

Differential Revision: https://phabricator.services.mozilla.com/D34190

--HG--
extra : moz-landing-system : lando

devtools/client/shared/widgets/TableWidget.js

@@ -554,9 +554,9 @@ TableWidget.prototype = {
    * label is clicked.
    */
   onMousedown: function({target}) {
-    const nodeName = target.nodeName;
+    const localName = target.localName;
 
-    if (nodeName === "textbox" || !this._editableFieldsEngine) {
+    if (localName === "input" || !this._editableFieldsEngine) {
       return;
     }
 
@@ -1736,11 +1736,9 @@ EditableFieldsEngine.prototype = {
   get textbox() {
     if (!this._textbox) {
       const doc = this.root.ownerDocument;
-      this._textbox = doc.createXULElement("textbox");
+      this._textbox = doc.createElementNS(HTML_NS, "input");
       this._textbox.id = this.INPUT_ID;
 
-      this._textbox.setAttribute("flex", "1");
-
       this.onKeydown = this.onKeydown.bind(this);
       this._textbox.addEventListener("keydown", this.onKeydown);
 

devtools/client/storage/index.xul

@@ -18,7 +18,6 @@
 
   <script src="chrome://devtools/content/shared/theme-switching.js"/>
   <script src="chrome://global/content/globalOverlay.js"/>
-  <script src="chrome://global/content/editMenuOverlay.js"/>
 
   <popupset id="storagePopupSet">
     <menupopup id="storage-tree-popup">
@@ -48,10 +47,9 @@
     <splitter class="devtools-side-splitter"/>
     <vbox flex="1">
       <hbox id="storage-toolbar" class="devtools-toolbar devtools-input-toolbar">
-        <textbox id="storage-searchbox"
-                 class="devtools-filterinput"
-                 flex="1"
-                 placeholder="&searchBox.placeholder;"/>
+        <html:input id="storage-searchbox"
+                    class="devtools-filterinput"
+                    placeholder="&searchBox.placeholder;"/>
         <hbox class="devtools-separator"/>
         <html:button id="add-button"
                 class="devtools-button add-button"></html:button>

devtools/client/storage/ui.js

@@ -1149,7 +1149,8 @@ class StorageUI {
       }
     } else if (event.keyCode == KeyCodes.DOM_VK_BACK_SPACE ||
       event.keyCode == KeyCodes.DOM_VK_DELETE) {
-      if (this.table.selectedRow && event.target.nodeName !== "textbox") {
+      if (this.table.selectedRow &&
+          !["input", "textbox"].includes(event.target.localName)) {
         this.onRemoveItem();
         event.stopPropagation();
         event.preventDefault();

devtools/client/themes/storage.css

@@ -51,18 +51,22 @@
 }
 
 /* Text input in storage table */
-#storage-table textbox {
+#storage-table input {
   -moz-appearance: none;
+  -moz-box-flex: 1;
   /* make sure the outline is not cut off */
   position: relative;
-  max-width: calc(100% - 1px);
-  padding: 3px 3px;
+  box-sizing: border-box;
+  padding: 0 2px;
   font: inherit;
-  line-height: 14px;
   color: var(--theme-text-color-strong);
   background-color: var(--theme-body-background);
 }
 
+#storage-table input:focus {
+  outline: 1px solid var(--blue-50);
+}
+
 /* Variables View Sidebar */
 
 #storage-sidebar {
@@ -80,6 +84,10 @@
   display: -moz-box;
 }
 
+#storage-searchbox {
+  -moz-box-flex: 1;
+}
+
 #storage-toolbar .add-button::before {
   background-image: url("chrome://devtools/skin/images/add.svg");
   -moz-user-focus: normal;