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..202e2148d32123adecdefa179009ef7f2cbd8d28
--- /dev/null
+++ b/chrome/browser/resources/settings/controls/dialog_drawer.js
@@ -0,0 +1,82 @@
+// 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.close_();
+    else
+      this.open_();
+  },
+
+  /** Shows drawer and slides it into view. */
+  open_: function() {

[dpapad, 2016/11/16 22:52:46]

@private. Here and elsewhere.

[hcarmona, 2016/12/08 19:59:00]

This is public now.

+    if (!this.open) {
+      this.showModal();
+      this.classList.add('opening');
+    }
+  },
+
+  /** Slides the drawer away, then closes it in a different event. */
+  close_: function() {
+    if (this.open) {
+      this.classList.remove('opening');
+      this.classList.add('closing');
+    }
+  },
+
+  /**
+   * Listens for a tap event outside the dialog in order to close it.
+   * @param {Event} event
+   */
+  onDialogTap_: function(event) {
+    var rect = this.getBoundingClientRect();
+
+    // We can ignore checking top/bottom because dialog is height 100%.
+    if (event.detail.x < rect.left || event.detail.x > rect.right)

[dpapad, 2016/11/16 22:52:46]

Would this also work, given that the dialog is filled with contents
(drawer-header, drawer-contents)?

if (e.target == this)
  this.close_();

[hcarmona, 2016/12/08 19:59:00]

Done.

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