MD Settings: Manage search engines 3/3, hooking up UI.

chrome/browser/resources/settings/search_engines_page/search_engine_dialog.js

Index: chrome/browser/resources/settings/search_engines_page/search_engine_dialog.js
diff --git a/chrome/browser/resources/settings/search_engines_page/search_engine_dialog.js b/chrome/browser/resources/settings/search_engines_page/search_engine_dialog.js
new file mode 100644
index 0000000000000000000000000000000000000000..71797005c8bd5353de2f5327d75fd5ce8f31db9f
--- /dev/null
+++ b/chrome/browser/resources/settings/search_engines_page/search_engine_dialog.js
@@ -0,0 +1,116 @@
+// Copyright 2016 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.
+
+/**
+ * @fileoverview 'settings-search-engine-dialog' is a component for adding
+ * or editing a search engine entry.
+ *
+ * @group Chrome Settings Elements
+ * @element settings-search-engine-dialog
+ */
+Polymer({
+  is: 'settings-search-engine-dialog',
+
+  properties: {
+    /**
+     * The search engine to be edited. If not populated a new search engine
+     * should be added.
+     * @type {?SearchEngine}
+     */
+    model: Object,
+
+    /** @private {string} */
+    searchEngine_: String,
+
+    /** @private {string} */
+    keyword_: String,
+
+    /** @private {string} */
+    queryUrl_: String,
+
+    /** @private {string} */
+    dialogTitle_: String,
+
+    /** @private {string} */
+    actionButtonText_: String,
+  },
+
+  /** @private {!settings.SearchEnginesBrowserProxy} */
+  browserProxy_: null,
+
+  /**
+   * The |modelIndex| to use when a new search engine is added. Must match with
+   * kNewSearchEngineIndex constant specified at
+   * chrome/browser/ui/webui/settings/search_engines_handler.cc
+   * @const {number}
+   */
+  DEFAULT_MODEL_INDEX: -1,
+
+  /** @override */
+  ready: function() {
+    if (this.model) {
+      // TODO(dpapad): Localize strings.
+      this.dialogTitle_ = 'Edit search engine';
+      this.actionButtonText_ = 'Edit';
+
+      // If editing an existing search engine, pre-populate the input fields.
+      this.searchEngine_ = this.model.displayName;
+      this.keyword_ = this.model.keyword;
+      this.queryUrl_ = this.model.url;
+    } else {
+      // TODO(dpapad): Localize string.
+      this.dialogTitle_ = 'Add search engine';
+      this.actionButtonText_ = loadTimeData.getString('searchEnginesAdd');
+    }
+  },
+
+  /** @override */
+  attached: function() {
+    this.browserProxy_ = settings.SearchEnginesBrowserProxy.getInstance();
+    this.updateActionButtonState_();
+    this.browserProxy_.searchEngineEditStarted(
+        this.model ? this.model.modelIndex : this.DEFAULT_MODEL_INDEX);
+    this.$.dialog.open();
+  },
+

[tommycli, 2016/02/17 23:47:48]

potentially: make an 'open' method that flags the dom-if to true and opens the
dialog.

I think it's better to have an explicit open method than relying on dom-if to
pop up the dialog anyways.

You might have to move some initialization code to that instead of in
ready/attached.

[dpapad, 2016/02/18 00:05:35]

See my previous comment on why I don't think it makes much sense to move the
dom-if inside this element.

+  /** @private */
+  onCancelTap_: function() {
+    this.browserProxy_.searchEngineEditCancelled();
+    this.$.dialog.close();

[tommycli, 2016/02/17 23:47:48]

unflag the dom-if here

+  },
+
+  /** @private */
+  onActionButtonTap_: function() {
+    this.browserProxy_.searchEngineEditCompleted(
+        this.searchEngine_, this.keyword_, this.queryUrl_);
+    this.$.dialog.close();

[tommycli, 2016/02/17 23:47:48]

and also unflag the dom-if here.

+  },
+
+  /**
+   * @param {!Event} event
+   * @private
+   */
+  validate_: function(event) {
+    var inputElement = Polymer.dom(event).localTarget;
+
+    this.browserProxy_.validateSearchEngineInput(
+        inputElement.id, inputElement.value).then(function(isValid) {
+      if (isValid)
+        inputElement.removeAttribute('invalid');
+      else
+        inputElement.setAttribute('invalid', true);
+      this.updateActionButtonState_();
+    }.bind(this));
+  },
+
+  /** @private */
+  updateActionButtonState_: function() {
+    var allValid = [
+      this.$.searchEngine, this.$.keyword, this.$.queryUrl
+    ].every(function(inputElement) {
+      return !inputElement.invalid && inputElement.value.length != 0;
+    });
+    this.$.actionButton.disabled = !allValid;
+  },
+});