MD Settings: Creating a <settings-dialog> element.

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

 // 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
@@ skipping 50 matching lines @@
 
       // 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 {
       this.dialogTitle_ =
           loadTimeData.getString('searchEnginesAddSearchEngine');
       this.actionButtonText_ = loadTimeData.getString('add');
     }
+
+    this.addEventListener('iron-overlay-canceled', function() {
+      this.browserProxy_.searchEngineEditCancelled();
+    }.bind(this));
   },
 
   /** @override */
   attached: function() {
     this.updateActionButtonState_();
     this.browserProxy_.searchEngineEditStarted(
         this.model ? this.model.modelIndex : this.DEFAULT_MODEL_INDEX);
     this.$.dialog.open();
   },
 
   /** @private */
   cancel_: function() {
-    this.browserProxy_.searchEngineEditCancelled();
-    this.$.dialog.close();
+    this.$.dialog.cancel();
   },
 
   /** @private */
   onActionButtonTap_: function() {
     this.browserProxy_.searchEngineEditCompleted(
         this.searchEngine_, this.keyword_, this.queryUrl_);
     this.$.dialog.close();
   },
 
   /**
@@ skipping 13 matching lines @@
   /** @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;
   },
 });