DOMUI Prefs: Add inline buttons for setting the default search engine

This is an interim solution for M10 since the final approach (drag and drop) will likely not be ready for M10. This adds inline buttons on hover/edit in the same style as the password field "Show" button, which gives a far better experience (especially when there are a lot of engines) than the old model of a single button on the side.

BUG=63825
TEST=Hovering or editing a search engine should show a "Make Default" button.

Review URL: http://codereview.chromium.org/6352004

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@71714 0039d316-1c4b-4281-b951-d872f2087c98

5 files changed, 51 insertions, 59 deletions

diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index d398b2a..05a8a65 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -458,22 +458,6 @@ list > [editing] input:invalid {
   background-color: pink;
 }
 
-.left-side-table {
-  display: -webkit-box;
-}
-
-.left-side-table > div:first-child {
-  -webkit-box-flex: 1;
-}
-
-.left-side-table > :last-child {
-  -webkit-padding-start: 20px;
-}
-
-.left-side-table > :last-child button {
-  width: 100%;
-}
-
 .option-name {
   padding-right: 5px;
 }
diff --git a/chrome/browser/resources/options/search_engine_manager.css b/chrome/browser/resources/options/search_engine_manager.css
index 772d420..72ef92e 100644
--- a/chrome/browser/resources/options/search_engine_manager.css
+++ b/chrome/browser/resources/options/search_engine_manager.css
@@ -4,10 +4,6 @@
   height: auto;
 }
 
-#searchEngineManagerPage .left-side-table {
-  margin-top: 12px;
-}
-
 #searchEngineList .heading {
   -webkit-border-radius: 2px;
   color: black;
@@ -81,3 +77,34 @@
   margin: 0;
   width: 100%;
 }
+
+/* For temporary Make Default button */
+#searchEngineList .url-column {
+  display: -webkit-box;
+  -webkit-box-align: center;
+}
+
+#searchEngineList .url-column :first-child {
+  -webkit-box-flex: 1;
+}
+
+#searchEngineList .url-column button {
+  background-color: #aab6e1;
+  border: none;
+  border-radius: 3px;
+  color: white;
+  -webkit-margin-start: 3px;
+}
+
+#searchEngineList .url-column button:hover {
+  background-color: #9aa6d1;
+}
+
+#searchEngineList .url-column button:active {
+  background-color: #8a96c1;
+}
+
+#searchEngineList > :not(:hover):not([editing]) .url-column button {
+  display: none;
+}
+/* End temporary Make Default button styling */
diff --git a/chrome/browser/resources/options/search_engine_manager.html b/chrome/browser/resources/options/search_engine_manager.html
index 4d8946e..d30e7e7 100644
--- a/chrome/browser/resources/options/search_engine_manager.html
+++ b/chrome/browser/resources/options/search_engine_manager.html
@@ -1,12 +1,5 @@
 <div class="page hidden" id="searchEngineManagerPage">
   <h1 i18n-content="searchEngineManagerPage"></h1>
-  <div class="left-side-table">
-    <div>
-      <list id="searchEngineList"></list>
-    </div>
-    <div>
-      <div><button id="makeDefaultSearchEngineButton" disabled
-          i18n-content="makeDefaultSearchEngineButton"></div>
-    </div>
+    <list id="searchEngineList"></list>
   </div>
 </div>
diff --git a/chrome/browser/resources/options/search_engine_manager.js b/chrome/browser/resources/options/search_engine_manager.js
index 9a99f57..d0b50f8 100644
--- a/chrome/browser/resources/options/search_engine_manager.js
+++ b/chrome/browser/resources/options/search_engine_manager.js
@@ -32,24 +32,6 @@ cr.define('options', function() {
       var selectionModel = new ListSingleSelectionModel;
       this.list_.selectionModel = selectionModel;
       this.list_.autoExpands = true;
-
-      selectionModel.addEventListener('change',
-          this.selectionChanged_.bind(this));
-
-      var self = this;
-      // This is a temporary hack to allow the "Make Default" button to
-      // continue working despite the new list behavior of removing selection
-      // on focus loss.
-      // Once drag-and-drop is supported, so items can be moved into the default
-      // section, this button will go away entirely.
-      $('makeDefaultSearchEngineButton').onmousedown = function(event) {
-        self.pendingDefaultEngine_ = self.list_.selectedItem;
-      };
-      $('makeDefaultSearchEngineButton').onclick = function(event) {
-        chrome.send('managerSetDefaultSearchEngine',
-                    [self.pendingDefaultEngine_['modelIndex']]);
-        self.pendingDefaultEngine_ = null;
-      };
     },
 
     /**
@@ -64,17 +46,6 @@ cr.define('options', function() {
       });
       this.list_.dataModel = model;
     },
-
-    /**
-     * Callback from the selection model when the selection changes.
-     * @private
-     * @param {!cr.Event} e Event with change info.
-     */
-    selectionChanged_: function(e) {
-      var engine = this.list_.selectedItem || this.pendingDefaultEngine_;
-      $('makeDefaultSearchEngineButton').disabled =
-          !(engine && engine['canBeDefault']);
-    },
   };
 
   SearchEngineManager.updateSearchEngineList = function(engineList) {
diff --git a/chrome/browser/resources/options/search_engine_manager_engine_list.js b/chrome/browser/resources/options/search_engine_manager_engine_list.js
index 9f15675..d67a35e 100644
--- a/chrome/browser/resources/options/search_engine_manager_engine_list.js
+++ b/chrome/browser/resources/options/search_engine_manager_engine_list.js
@@ -134,8 +134,25 @@ cr.define('options.search_engines', function() {
 
       // And the URL column.
       var urlEl = this.createEditableTextCell(urlText, this.isPlaceholder_);
-      urlEl.className = 'url-column';
-      this.contentElement.appendChild(urlEl);
+      var urlWithButtonEl = this.ownerDocument.createElement('div');
+      urlWithButtonEl.appendChild(urlEl);
+      urlWithButtonEl.className = 'url-column';
+      this.contentElement.appendChild(urlWithButtonEl);
+      // Add the Make Default button. Temporary until drag-and-drop re-ordering
+      // is implemented. When this is removed, remove the extra div above.
+      if (engine['canBeDefault']) {
+        var makeDefaultButtonEl = this.ownerDocument.createElement('button');
+        makeDefaultButtonEl.textContent =
+            templateData.makeDefaultSearchEngineButton;
+        makeDefaultButtonEl.onclick = function(e) {
+          chrome.send('managerSetDefaultSearchEngine', [engine['modelIndex']]);
+        };
+        // Don't select the row when clicking the button.
+        makeDefaultButtonEl.onmousedown = function(e) {
+          e.stopPropagation();
+        };
+        urlWithButtonEl.appendChild(makeDefaultButtonEl);
+      }
 
       // Do final adjustment to the input fields.
       if (!engine['heading']) {