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..4b422bd1f4190de98873038438ee2f4ea28af7c9
--- /dev/null
+++ b/chrome/browser/resources/settings/controls/dialog_drawer.js
@@ -0,0 +1,92 @@
+// 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');
+    }
+  },
+
+  /**
+   * Listens for a tap event outside the dialog in order to close it.
+   * @param {Event} event
+   * @private
+   */
+  onDialogTap_: function(event) {
+    if (event.target != this)  // Only care about self.
+      return;
+
+    var rect = this.getBoundingClientRect();

[dpapad, 2016/12/08 22:27:22]

We can avoid the need to call getBoundingClientRect() as shown at
http://pastebin.com/q8fRpG1L.

I tried it locally and seemed to work equivalently. getBoundingClientRect()
forces a re-layout, but also has a some bugs that have not been fixed
(crbug.comm/662300 and crbug.com/667198).

[hcarmona, 2016/12/09 16:14:42]

Good to know. Done.

+
+    // We can ignore checking top/bottom because dialog is height 100%.
+    if (event.detail.x < rect.left || event.detail.x > rect.right)
+      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('opening')) {
+      this.fire('open');  // Notify tests that dialog is now open.

[dpapad, 2016/12/08 22:27:22]

Can we rename the event to something more specific? dialog-drawer-open maybe?

[hcarmona, 2016/12/09 16:14:42]

As per our conversation: I've removed the event and the test listens for
transitionend.

+    } else if (this.classList.contains('closing')) {
+      this.classList.remove('closing');
+      this.close();
+    }
+  },
+});