WebUI Edit Search Engine Dialog

chrome/browser/resources/edit_search_engine_dialog.js

Index: chrome/browser/resources/edit_search_engine_dialog.js
diff --git a/chrome/browser/resources/edit_search_engine_dialog.js b/chrome/browser/resources/edit_search_engine_dialog.js
new file mode 100644
index 0000000000000000000000000000000000000000..70f8377424ad6b8cf90c2dfec63f7714d8388cca
--- /dev/null
+++ b/chrome/browser/resources/edit_search_engine_dialog.js
@@ -0,0 +1,132 @@
+// Copyright (c) 2011 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('editSearchEngineDialog', function() {
+  'use strict';
+
+  /**
+   * Disables the controls while the dialog is busy.
+   */
+  function disableControls() {
+    $('cancel').disabled = true;
+    $('save').disabled = true;
+  }
+
+  /**
+   * Close the dialog and pass a result value to the dialog close handler.
+   * @param {{description: string, details: string, url: string}=} opt_result
+   *     The value to pass to the dialog close handler.
+   */
+  function closeWithResult(opt_result) {
+    disableControls();
+    var json = JSON.stringify(opt_result ? [opt_result] : []);
+    chrome.send('DialogClose', [json]);
+  }
+
+  /**
+  * Sets the text of the dialog's editable text boxes.
+  * @param {{description: string, details: string, url: string}} details Values
+  *     for corresponding text fields.
+  */
+  function setDetails(details) {
+    $('description-text').value = details.description;
+    $('keyword-text').value = details.keyword;
+    $('url-text').value = details.url;
+    validate();
+  }
+
+  /**
+   * Updates the validity icon element by changing its style.
+   * @param {Object} element The element to change.
+   * @param {boolean} valid True if the data is valid.
+   */
+  function setValidImage(element, valid) {
+    element.className = valid ? 'valid' : 'invalid';
+  }
+
+  /**
+   * Sends all strings to Chrome for validation.  Chrome is expected to respond
+   * by calling setValidation.
+   */
+  function validate() {
+    chrome.send('requestValidation', [$('description-text').value,
+                $('keyword-text').value, $('url-text').value]);
+  }
+
+  /**
+   * Sets dialog state given the results of the validation of input by Chrome.
+   * @param {{description: boolean, details: boolean, url: boolean, ok:boolean}}
+   *     details A dictionary of booleans indicating the validation results of
+   *     various parts of the UI.  |description|, |details| and |url| indicate
+   *     the validity of the respective text fields, and |ok| indicates whether
+   *     the OK/Save button can be pressed.
+   */
+  function setValidation(details) {
+    setValidImage($('description-icon'), details.description);
+    setValidImage($('keyword-icon'), details.keyword);
+    setValidImage($('url-icon'), details.url);
+    $('save').disabled = !details.ok;
+  }
+
+  /**
+   * Reverses the order of child nodes.
+   * @param {HTMLElement} parent The parent node whose children are to be
+   *     reversed.
+   */
+  function reverseChildren(parent) {
+    var childNodes = parent.childNodes;
+    for (var i = childNodes.length - 1; i >= 0; i--)
+      node.appendChild(childNodes[i]);

[wyck, 2011/10/12 13:52:59]

oops.  node instead of parent.  I could use some tests.

+  };
+
+  /**
+   * Executes a function for each item in a collection.  Similar to Array.filter
+   * except that it works with other kinds of collections.
+   * @param {Object} collection The collection to iterate over.
+   * @param {function(Object)} fn The function to be executed for each item in
+   *     the collection.
+   */
+  function filter(collection, fn) {

[arv (Not doing code reviews), 2011/10/11 21:41:06]

var filter = Array.prototype.filter.call.bind(Array.prototype.filter);

or use 

Array.prototype.filter.call(collection, func)

[arv (Not doing code reviews), 2011/10/11 21:41:06]

Did you mean forEach here?

[wyck, 2011/10/12 13:52:59]

Yes, thanks.

+    for (var i=0, len = collection.length; i<len; i++)
+      fn(collection[i]);
+  }
+
+  /**
+   * Inserts translated strings on loading.
+   */
+  function initialize() {
+    i18nTemplate.process(document, templateData);
+
+    document.title = chrome.dialogArguments == 'add' ? templateData.titleNew :
+        templateData.titleEdit;
+
+    $('cancel').onclick = function() {
+      closeWithResult();
+    }
+
+    $('save').onclick = function() {
+      closeWithResult({description: $('description-text').value,
+                       keyword: $('keyword-text').value,
+                       url: $('url-text').value});
+    }
+
+    $('description-text').oninput = validate;
+    $('keyword-text').oninput = validate;
+    $('url-text').oninput = validate;
+
+    setValidation({description: false, keyword: false, url: false});
+    if (cr.isViews)
+      filter(document.getElementsByClassName('button-strip'), reverseChildren);

[arv (Not doing code reviews), 2011/10/11 21:41:06]

document.qeurySelectorAll('.button-strip')

+    chrome.send('requestDetails')
+  }
+
+  document.addEventListener('DOMContentLoaded', initialize);
+
+  return {
+    setDetails: setDetails,
+    setValidation: setValidation,
+  };
+});
+
+