Bug 1159001 - Select text in the Style Editor search input when it is reopened. r=bgrins
authorMatteo Ferretti <mferretti@mozilla.com>
Wed, 13 May 2015 13:11:38 +0200
changeset 279933 23d4c6e3643979c3309e779f7238bb722874099d
parent 279932 c451a7f1de44f4c633253c5653d17a0ce8c8a112
child 279934 1a21a5d0e9da9e8508256e97fea93a2efd83c96a
push id4932
push userjlund@mozilla.com
push dateMon, 10 Aug 2015 18:23:06 +0000
treeherdermozilla-beta@6dd5a4f5f745 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1159001
milestone41.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 1159001 - Select text in the Style Editor search input when it is reopened. r=bgrins
browser/devtools/sourceeditor/codemirror/README
browser/devtools/sourceeditor/codemirror/search/search.js
--- a/browser/devtools/sourceeditor/codemirror/README
+++ b/browser/devtools/sourceeditor/codemirror/README
@@ -106,25 +106,27 @@ diff --git a/browser/devtools/sourceedit
    }
 -  var queryDialog =
 -    'Search: <input type="text" style="width: 10em"/> <span style="color: #888">(Use /re/ syntax for regexp search)</span>';
 +  var queryDialog;
    function doSearch(cm, rev) {
 +    if (!queryDialog) {
 +      let doc = cm.getWrapperElement().ownerDocument;
 +      let inp = doc.createElement("input");
-+      let txt = doc.createTextNode(cm.l10n("findCmd.promptMessage"));
 +
-+      inp.type = "text";
-+      inp.style.width = "10em";
++      inp.type = "search";
++      inp.placeholder = cm.l10n("findCmd.promptMessage");
 +      inp.style.MozMarginStart = "1em";
++      inp.style.MozMarginEnd = "1em";
++      inp.style.flexGrow = "1";
++      inp.addEventListener("focus", () => inp.select());
 +
 +      queryDialog = doc.createElement("div");
-+      queryDialog.appendChild(txt);
 +      queryDialog.appendChild(inp);
++      queryDialog.style.display = "flex";
 +    }
      var state = getSearchState(cm);
      if (state.query) return findNext(cm, rev);
      dialog(cm, queryDialog, "Search for:", cm.getSelection(), function(query) {
        cm.operation(function() {
          if (!query || state.query) return;
          state.query = parseQuery(query);
          cm.removeOverlay(state.overlay, queryCaseInsensitive(state.query));
--- a/browser/devtools/sourceeditor/codemirror/search/search.js
+++ b/browser/devtools/sourceeditor/codemirror/search/search.js
@@ -70,25 +70,27 @@
     }
     return query;
   }
   var queryDialog;
   function doSearch(cm, rev) {
     if (!queryDialog) {
       let doc = cm.getWrapperElement().ownerDocument;
       let inp = doc.createElement("input");
-      let txt = doc.createTextNode(cm.l10n("findCmd.promptMessage"));
 
-      inp.type = "text";
-      inp.style.width = "10em";
+      inp.type = "search";
+      inp.placeholder = cm.l10n("findCmd.promptMessage");
       inp.style.MozMarginStart = "1em";
+      inp.style.MozMarginEnd = "1em";
+      inp.style.flexGrow = "1";
+      inp.addEventListener("focus", () => inp.select());
 
       queryDialog = doc.createElement("div");
-      queryDialog.appendChild(txt);
       queryDialog.appendChild(inp);
+      queryDialog.style.display = "flex";
     }
     var state = getSearchState(cm);
     if (state.query) return findNext(cm, rev);
     dialog(cm, queryDialog, "Search for:", cm.getSelection(), function(query) {
       cm.operation(function() {
         if (!query || state.query) return;
         state.query = parseQuery(query);
         cm.removeOverlay(state.overlay, queryCaseInsensitive(state.query));