Create implementation of the side panel using a dialog.

chrome/browser/resources/settings/controls/dialog_drawer.js

Index: chrome/browser/resources/settings/controls/dialog_drawer.js
diff --git a/chrome/browser/resources/settings/controls/dialog_drawer.js b/chrome/browser/resources/settings/controls/dialog_drawer.js
new file mode 100644
index 0000000000000000000000000000000000000000..219ae3856dd693af67e301e9dae2a571b90c3b59
--- /dev/null
+++ b/chrome/browser/resources/settings/controls/dialog_drawer.js
@@ -0,0 +1,93 @@
+// 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.
+
+Polymer({
+  is: 'dialog-drawer',
+  extends: 'dialog',
+
+  properties: {
+    /** Enables notifications for |Dialog.open|. */
+    open: {
+      type: Boolean,
+      notify: true,
+    },
+
+    /** The alignment of the drawer on the screen ('left' or 'right'). */
+    align: {
+      type: String,
+      value: 'left',
+      reflectToAttribute: true,
+    },
+  },
+
+  listeners: {
+    'cancel': 'onDialogCancel_',
+    'tap': 'onDialogTap_',
+    'transitionend': 'onDialogTransitionEnd_',
+  },
+
+  /** Toggles the drawer open and close. */
+  toggle: function() {
+    if (this.open)
+      this.closeDrawer();
+    else
+      this.openDrawer();
+  },
+
+  /** Shows drawer and slides it into view. */
+  openDrawer: function() {
+    if (!this.open) {
+      this.showModal();
+      this.classList.add('opening');
+    }
+  },
+
+  /** Slides the drawer away, then closes it after the transition has ended. */
+  closeDrawer: function() {
+    if (this.open) {
+      this.classList.remove('opening');
+      this.classList.add('closing');
+    }
+  },
+
+  /**
+   * Stop propagation of a tap event inside the container. This will allow
+   * |onDialogTap_| to only be called when clicked outside the container.
+   * @param {Event} event

[dpapad, 2016/12/09 18:57:53]

!Event here and line 75.

[hcarmona, 2016/12/09 19:21:26]

Done.

+   * @private
+   */
+  onContainerTap_: function(event) {
+    event.stopPropagation();
+  },
+
+  /**
+   * Close the dialog when tapped outside the container.
+   * @param {Event} event
+   * @private
+   */
+  onDialogTap_: function(event) {

[dpapad, 2016/12/09 18:57:53]

We are not using |event| here, so how about dropping it completely?

[hcarmona, 2016/12/09 19:21:26]

Done.

+    this.closeDrawer();
+  },
+
+  /**
+   * Overrides the default cancel machanism to allow for a close animation.
+   * @param {Event} event
+   * @private
+   */
+  onDialogCancel_: function(event) {
+    event.preventDefault();
+    this.closeDrawer();
+  },
+
+  /**
+   * Closes the dialog when the closing animation is over.
+   * @private
+   */
+  onDialogTransitionEnd_: function() {
+    if (this.classList.contains('closing')) {
+      this.classList.remove('closing');
+      this.close();
+    }
+  },
+});