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

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;
 }

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 */

chrome/browser/resources/options/search_engine_manager.html

 <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>

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) {

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']) {