DOMUI prefs: Add search engine editor overlay.

BUG=52649
TEST=DOMUI prefs should allow editing and adding search engines.

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

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

7 files changed, 252 insertions, 7 deletions

diff --git a/chrome/browser/resources/options.html b/chrome/browser/resources/options.html
index 35b3160..fa4ee62 100644
--- a/chrome/browser/resources/options.html
+++ b/chrome/browser/resources/options.html
@@ -20,6 +20,7 @@
 <link rel="stylesheet" href="options/content_settings.css">
 <link rel="stylesheet" href="options/content_settings_exceptions_area.css">
 <link rel="stylesheet" href="options/cookies_view.css">
+<link rel="stylesheet" href="options/edit_search_engine_overlay.css">
 <link rel="stylesheet" href="options/passwords_exceptions_list.css">
 <link rel="stylesheet" href="options/import_data_overlay.css">
 <link rel="stylesheet" href="options/search_engine_manager.css">
@@ -85,6 +86,7 @@
 <script src="options/content_settings_ui.js"></script>
 <script src="options/cookies_tree.js"></script>
 <script src="options/cookies_view.js"></script>
+<script src="options/edit_search_engine_overlay.js"></script>
 <script src="options/font_settings_overlay.js"></script>
 <script src="options/import_data_overlay.js"></script>
 <script src="options/passwords_exceptions.js"></script>
@@ -106,6 +108,7 @@ var BrowserOptions = options.BrowserOptions;
 var ClearBrowserDataOverlay = options.ClearBrowserDataOverlay;
 var ContentSettings = options.ContentSettings;
 var CookiesView = options.CookiesView;
+var EditSearchEngineOverlay = options.EditSearchEngineOverlay;
 var FontSettingsOverlay = options.FontSettingsOverlay;
 var ImportDataOverlay = options.ImportDataOverlay;
 var OptionsPage = options.OptionsPage;
@@ -143,6 +146,7 @@ function load() {
   OptionsPage.registerOverlay(AutoFillEditAddressOverlay.getInstance());
   OptionsPage.registerOverlay(AutoFillEditCreditCardOverlay.getInstance());
   OptionsPage.registerOverlay(ClearBrowserDataOverlay.getInstance());
+  OptionsPage.registerOverlay(EditSearchEngineOverlay.getInstance());
   OptionsPage.registerOverlay(FontSettingsOverlay.getInstance());
   OptionsPage.registerOverlay(ImportDataOverlay.getInstance());
   OptionsPage.registerOverlay(StopSyncingOverlay.getInstance());
@@ -231,6 +235,7 @@ window.onpopstate = function(e) {
   <include src="options/autofill_edit_address_overlay.html">
   <include src="options/autofill_edit_creditcard_overlay.html">
   <include src="options/clear_browser_data_overlay.html">
+  <include src="options/edit_search_engine_overlay.html">
   <include src="options/font_settings_overlay.html">
   <include src="options/import_data_overlay.html">
   <include src="options/stop_syncing_overlay.html">
diff --git a/chrome/browser/resources/options/add_startup_page_overlay.html b/chrome/browser/resources/options/add_startup_page_overlay.html
index 5e57c86..c075547 100644
--- a/chrome/browser/resources/options/add_startup_page_overlay.html
+++ b/chrome/browser/resources/options/add_startup_page_overlay.html
@@ -9,13 +9,13 @@
     <list id="addStartupRecentPageList"></list>
 
     <div class="button-strip">
-      <if expr="os != 'darwin'">
-        <button type="submit" id="addStartupPageOkayButton" disabled
+      <if expr="os == 'win32'">
+        <button type="submit" id="addStartupPageAddButton" disabled
             i18n-content="addStartupPageAddButton"></button>
       </if>
       <button type="reset"
           i18n-content="addStartupPageCancelButton"></button>
-      <if expr="os == 'darwin'">
+      <if expr="os != 'win32'">
         <button type="submit" id="addStartupPageAddButton" disabled
             i18n-content="addStartupPageAddButton"></button>
       </if>
diff --git a/chrome/browser/resources/options/edit_search_engine_overlay.css b/chrome/browser/resources/options/edit_search_engine_overlay.css
new file mode 100644
index 0000000..8083af5
--- /dev/null
+++ b/chrome/browser/resources/options/edit_search_engine_overlay.css
@@ -0,0 +1,36 @@
+#editSearchEngineOverlay {
+  width: 500px;
+}
+
+#editSearchEngineOverlay table label {
+  text-align: end;
+}
+
+#editSearchEngineOverlay table,
+#editSearchEngineOverlay table td:nth-child(2) {
+  width: 100%;
+}
+
+#editSearchEngineOverlay table input {
+  width: 100%;
+  -webkit-box-sizing: border-box;
+}
+
+#editSearchEngineOverlay .button-strip {
+  margin-top: 2ex;
+}
+
+.valid-badge, .alert-badge {
+  width: 22px;
+  height: 21px;
+  background-position: 50% 1px;
+  background-repeat: no-repeat;
+}
+
+.valid-badge {
+  background-image: url("../../../../app/resources/input_good.png");
+}
+
+.alert-badge {
+  background-image: url("../../../app/theme/input_alert.png");
+}
diff --git a/chrome/browser/resources/options/edit_search_engine_overlay.html b/chrome/browser/resources/options/edit_search_engine_overlay.html
new file mode 100644
index 0000000..85f7096
--- /dev/null
+++ b/chrome/browser/resources/options/edit_search_engine_overlay.html
@@ -0,0 +1,46 @@
+<div class="page hidden" id="editSearchEngineOverlay">
+  <h1 i18n-content="editSearchEngineTitle"></h1>
+
+  <form id="editSearchEngineForm">
+    <table>
+      <tr>
+        <td><label for="editSearchEngineName"><span
+            i18n-content="editSearchEngineNameLabel"></span></label></td>
+        <td><input type="text" id="editSearchEngineName"></td>
+        <td><div id="editSearchEngineNameValidity"
+            class="alert-badge">&nbsp;</div></td>
+      </tr>
+      <tr>
+        <td><label for="editSearchEngineKeyword"><span
+            i18n-content="editSearchEngineKeywordLabel"></span></label></td>
+        <td><input type="text" id="editSearchEngineKeyword"></td>
+        <td><div id="editSearchEngineKeywordValidity"
+            class="alert-badge">&nbsp;</div></td>
+      </tr>
+      <tr>
+        <td><label for="editSearchEngineURL"><span
+            i18n-content="editSearchEngineURLLabel"></span></label></td>
+        <td><input type="url" id="editSearchEngineURL"></td>
+        <td><div id="editSearchEngineURLValidity"
+            class="alert-badge">&nbsp;</div></td>
+      </tr>
+      <tr>
+        <td></td>
+        <td><span i18n-content="editSearchEngineURLExplanation"><span></td>
+        <td></td>
+    </table>
+
+    <div class="button-strip">
+      <if expr="os == 'win32'">
+        <button type="submit" id="editSearchEngineOkayButton" disabled
+            i18n-content="editSearchEngineOkayButton"></button>
+      </if>
+      <button type="reset"
+          i18n-content="editSearchEngineCancelButton"></button>
+      <if expr="os != 'win32'">
+        <button type="submit" id="editSearchEngineOkayButton" disabled
+            i18n-content="editSearchEngineOkayButton"></button>
+      </if>
+    </div>
+  </form>
+</div>
diff --git a/chrome/browser/resources/options/edit_search_engine_overlay.js b/chrome/browser/resources/options/edit_search_engine_overlay.js
new file mode 100644
index 0000000..f0daf57
--- /dev/null
+++ b/chrome/browser/resources/options/edit_search_engine_overlay.js
@@ -0,0 +1,156 @@
+// Copyright (c) 2010 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+cr.define('options', function() {
+  const OptionsPage = options.OptionsPage;
+
+  /**
+   * EditSearchEngineOverlay class
+   * Encapsulated handling of the 'Edit Search Engine' overlay page.
+   * @class
+   * @constructor
+   */
+  function EditSearchEngineOverlay() {
+    OptionsPage.call(this, 'editSearchEngineOverlay',
+                     templateData.editSearchEngineTitle,
+                     'editSearchEngineOverlay');
+  }
+
+  cr.addSingletonGetter(EditSearchEngineOverlay);
+
+  EditSearchEngineOverlay.prototype = {
+    __proto__: OptionsPage.prototype,
+
+    /**
+     * Initializes the page.
+     */
+    initializePage: function() {
+      OptionsPage.prototype.initializePage.call(this);
+
+      var self = this;
+      var editForm = $('editSearchEngineForm');
+      editForm.onreset = function(e) {
+        chrome.send('searchEngineEditCancelled');
+        self.dismissOverlay_();
+      };
+      editForm.onsubmit = function(e) {
+        chrome.send('searchEngineEditCompleted', self.getInputFieldValues_());
+        self.dismissOverlay_();
+        return false;
+      };
+      var fieldIDs = ['editSearchEngineName',
+                      'editSearchEngineKeyword',
+                      'editSearchEngineURL'];
+      for (var i = 0; i < fieldIDs.length; i++) {
+        var field = $(fieldIDs[i]);
+        field.oninput = cr.bind(this.validateFields_, this);
+        field.onkeydown = function(e) {
+          if (e.keyCode == 27)  // Esc
+            editForm.reset();
+        };
+      }
+    },
+
+    /**
+     * Clears any uncommited input, and dismisses the overlay.
+     * @private
+     */
+    dismissOverlay_: function() {
+      this.setEditDetails_();
+      OptionsPage.clearOverlays();
+    },
+
+    /**
+     * Fills the text fields from the given search engine.
+     * @private
+     */
+    setEditDetails_: function(engineDetails) {
+      if (engineDetails) {
+        $('editSearchEngineName').value = engineDetails['name'];
+        $('editSearchEngineKeyword').value = engineDetails['keyword'];
+        $('editSearchEngineURL').value = engineDetails['url'];
+        this.validateFields_();
+      } else {
+        $('editSearchEngineName').value = '';
+        $('editSearchEngineKeyword').value = '';
+        $('editSearchEngineURL').value = '';
+        var invalid = { name: false, keyword: false, url: false };
+        this.updateValidityWithResults_(invalid);
+      }
+    },
+
+    /**
+     * Starts the process of asynchronously validating the user input. Results
+     * will be reported to updateValidityWithResults_.
+     * @private
+     */
+    validateFields_: function() {
+      chrome.send('checkSearchEngineInfoValidity', this.getInputFieldValues_());
+    },
+
+    /**
+     * Sets the validation images and the enabled state of the Add button based
+     * on the current values of the text fields.
+     * @private
+     * @param {Object} The dictionary of validity states.
+     */
+    updateValidityWithResults_: function(validity) {
+      this.setBadgeValidity_($('editSearchEngineNameValidity'),
+                             validity['name'],
+                             'editSearchEngineInvalidTitleToolTip');
+      this.setBadgeValidity_($('editSearchEngineKeywordValidity'),
+                             validity['keyword'],
+                             'editSearchEngineInvalidKeywordToolTip');
+      this.setBadgeValidity_($('editSearchEngineURLValidity'),
+                             validity['url'],
+                             'editSearchEngineInvalidURLToolTip');
+      $('editSearchEngineOkayButton').disabled =
+          !(validity['name'] && validity['keyword'] && validity['url']);
+    },
+
+    /**
+     * Updates the state of the given validity indicator badge.
+     * @private
+     * @param {HTMLElement} The badge element to adjust.
+     * @param {boolean} Whether or not the badge should be set to the valid
+     *     state.
+     * @param {string} The tooltip string id for the invalid state.
+     */
+    setBadgeValidity_: function(element, isValid, tooltip_id) {
+      if (isValid) {
+        element.className = 'valid-badge';
+        element.title = '';
+      } else {
+        element.className = 'alert-badge';
+        element.title = localStrings.getString(tooltip_id);
+      }
+    },
+
+    /**
+     * Returns the input field values as an array suitable for passing to
+     * chrome.send. The order of the array is important.
+     * @private
+     * @return {array} The current input field values.
+     */
+    getInputFieldValues_: function() {
+      return [ $('editSearchEngineName').value,
+               $('editSearchEngineKeyword').value,
+               $('editSearchEngineURL').value ];
+    }
+  };
+
+  EditSearchEngineOverlay.setEditDetails = function(engineDetails) {
+    EditSearchEngineOverlay.getInstance().setEditDetails_(engineDetails);
+  };
+
+  EditSearchEngineOverlay.validityCheckCallback = function(validity) {
+    EditSearchEngineOverlay.getInstance().updateValidityWithResults_(validity);
+  };
+
+  // Export
+  return {
+    EditSearchEngineOverlay: EditSearchEngineOverlay
+  };
+
+});
diff --git a/chrome/browser/resources/options/search_engine_manager.html b/chrome/browser/resources/options/search_engine_manager.html
index 44e99ab..a936b7a 100644
--- a/chrome/browser/resources/options/search_engine_manager.html
+++ b/chrome/browser/resources/options/search_engine_manager.html
@@ -14,7 +14,7 @@
       <list id="searchEngineList"></list>
     </div>
     <div>
-      <div><button id="addSearchEngineButton" disabled
+      <div><button id="addSearchEngineButton"
           i18n-content="addSearchEngineButton"></div>
       <div><button id="removeSearchEngineButton" disabled
           i18n-content="removeSearchEngineButton"></div>
diff --git a/chrome/browser/resources/options/search_engine_manager.js b/chrome/browser/resources/options/search_engine_manager.js
index f9aa37a..c03c38d 100644
--- a/chrome/browser/resources/options/search_engine_manager.js
+++ b/chrome/browser/resources/options/search_engine_manager.js
@@ -37,14 +37,15 @@ cr.define('options', function() {
 
       var self = this;
       $('addSearchEngineButton').onclick = function(event) {
-        // TODO(stuartmorgan): Show an overlay to edit the new search engine.
+        chrome.send('editSearchEngine', ["-1"]);
+        OptionsPage.showOverlay('editSearchEngineOverlay');
       };
       $('removeSearchEngineButton').onclick = function(event) {
         chrome.send('removeSearchEngine', [self.selectedModelIndex_]);
       };
       $('editSearchEngineButton').onclick = function(event) {
-        // TODO(stuartmorgan): Show an overlay to edit the selected
-        // search engine.
+        chrome.send('editSearchEngine', [self.selectedModelIndex_]);
+        OptionsPage.showOverlay('editSearchEngineOverlay');
       };
       $('makeDefaultSearchEngineButton').onclick = function(event) {
         chrome.send('managerSetDefaultSearchEngine',
@@ -93,6 +94,7 @@ cr.define('options', function() {
 
       $('removeSearchEngineButton').disabled =
           !(engine && engine['canBeRemoved']);
+      $('editSearchEngineButton').disabled = engine == null;
       $('makeDefaultSearchEngineButton').disabled =
           !(engine && engine['canBeDefault']);
     },