Create implementation of the side panel using a dialog.

ui/webui/resources/cr_elements/cr_drawer/cr_drawer.html

Index: ui/webui/resources/cr_elements/cr_drawer/cr_drawer.html
diff --git a/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.html b/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.html
new file mode 100644
index 0000000000000000000000000000000000000000..af333566f5dbb9aedf28908c7bfe7efab02dc24e
--- /dev/null
+++ b/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.html
@@ -0,0 +1,95 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<dom-module id="cr-drawer">
+  <template>
+    <style>
+      :host {
+        bottom: 0;
+        left: 0;
+        position: fixed;
+        right: 0;
+        top: 0;
+        transition: visibility 0.2s ease;
+        visibility: hidden;
+      }
+
+      :host([opened]) {
+        visibility: visible;
+      }
+
+      #contentContainer::backdrop {
+        background-color: rgba(0, 0, 0, 0);
+      }
+
+      #contentContainer {
+        -webkit-transform: translate3d(-100%, 0, 0);
+        background-color: #FFF;
+        border: none;
+        bottom: 0;
+        height: 100%;
+        left: 0;
+        margin: 0;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        top: 0;
+        transform: translate3d(-100%, 0, 0);
+        transition-property: -webkit-transform;
+        transition-property: transform;
+        transition: 0.2s ease;
+        width: var(--cr-drawer-width, 256px);
+        @apply(--app-drawer-content-container);
+      }
+
+      :host([position=right]) > #contentContainer {
+        -webkit-transform: translate3d(100%, 0, 0);
+        left: auto;
+        right: 0;
+        transform: translate3d(100%, 0, 0);
+      }
+
+      #after {
+        bottom: 0;
+        left: 0;
+        position: fixed;
+        top: 0;
+        visibility: visible;
+        width: 20px;
+      }
+
+      :host([position=right]) > #after {
+        left: auto;
+        right: 0;
+      }
+
+      :host([opened]) > #contentContainer {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+      }
+
+      #scrim {
+        -webkit-transform: translateZ(0);
+        background: var(--app-drawer-scrim-background, rgba(0, 0, 0, 0.5));
+        bottom: 0;
+        left: 0;
+        opacity: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        transform:  translateZ(0);
+        transition: opacity 0.2s ease;
+      }
+
+      :host([opened]) > #scrim {
+        opacity: 1;
+      }
+    </style>
+
+    <div id="scrim"></div>
+    <dialog id="contentContainer" on-tap="onDialogTap_">

[dpapad, 2016/11/07 20:13:24]

Why do we need to wrap <dialog> instead of extending one (similar to how
cr-dialog and cr-action-menu do)?

Why do we need a "scrim" div? Native dialog comes with its own scrim (which is
configurable with ::backdrop CSS pseudoclass.

[dpapad, 2016/11/08 20:34:05]

FYI, I put together a minimal example at https://jsfiddle.net/1y68t3rj/4/. I did
not add functionality to drag the dialog with the mouse, but as a proof of
concept it is possible to use the ::backdrop instead of a separate scrim.

[hcarmona, 2016/11/16 17:44:54]

Changed to extend dialog.
Scrim is gone now. :-)

[hcarmona, 2016/11/16 17:44:54]

Thanks! That was super useful, new patch uses the ::backdrop.

+      <content></content>
+    </dialog>
+    <div id="after"></div>
+  </template>
+</dom-module>
+<script src="cr_drawer.js"></script>