WebUI: cr-drawer, differeniate between cancel() and close()

Bug: 870732
Change-Id: I5cb196b87d339699be8bf5a2091e7e239d38b50d
Reviewed-on: https://chromium-review.googlesource.com/c/1289302Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#602203}

chrome/browser/resources/chromeos/emulator/device_emulator_pages.js

@@ -34,6 +34,6 @@ Polymer({
 
   /** @private */
   onSelectedPageChange_: function() {
-    this.$.drawer.closeDrawer();
+    this.$.drawer.close();
   },
 });

chrome/browser/resources/md_extensions/manager.js

@@ -487,7 +487,7 @@ cr.define('extensions', function() {
     onCloseDrawer_: function() {
       const drawer = this.$$('#drawer');
       if (drawer && drawer.open) {
-        drawer.closeDrawer();
+        drawer.close();
       }
     },
 

chrome/browser/resources/md_history/app.html

@@ -107,8 +107,7 @@
 
     <cr-lazy-render id="drawer">
       <template>
-        <cr-drawer heading="$i18n{title}" align="$i18n{textdirection}"
-            swipe-open>
+        <cr-drawer heading="$i18n{title}" align="$i18n{textdirection}">
           <history-side-bar id="drawer-side-bar" class="drawer-content"
               selected-page="{{selectedPage_}}"
               show-footer="[[showSidebarFooter]]">

chrome/browser/resources/md_history/app.js

@@ -310,7 +310,7 @@ Polymer({
     const drawer =
         /** @type {?CrDrawerElement} */ (this.$.drawer.getIfExists());
     if (!this.hasDrawer_ && drawer && drawer.open)
-      drawer.closeDrawer();
+      drawer.cancel();
   },
 
   /**
@@ -331,7 +331,7 @@ Polymer({
   closeDrawer_: function() {
     const drawer = this.$.drawer.get();
     if (drawer && drawer.open)
-      drawer.closeDrawer();
+      drawer.close();
   },
 
   /** @private */

chrome/browser/resources/settings/settings_ui/settings_ui.js

@@ -92,12 +92,12 @@ Polymer({
    */
   ready: function() {
     // Lazy-create the drawer the first time it is opened or swiped into view.
-    listenOnce(this.$.drawer, 'open-changed', () => {
+    listenOnce(this.$.drawer, 'cr-drawer-opening', () => {
       this.$.drawerTemplate.if = true;
     });
 
     window.addEventListener('popstate', e => {
-      this.$.drawer.closeDrawer();
+      this.$.drawer.cancel();
     });
 
     CrPolicyStrings = {
@@ -274,7 +274,7 @@ Polymer({
    */
   onIronActivate_: function(event) {
     if (event.detail.item.id != 'advancedSubmenu')
-      this.$.drawer.closeDrawer();
+      this.$.drawer.close();
   },
 
   /** @private */

chrome/test/data/webui/cr_elements/cr_drawer_tests.js

@@ -20,15 +20,16 @@ suite('cr-drawer', function() {
 
   test('open and close', function() {
     const drawer = createDrawer('ltr');
+    const waits = Promise.all(['cr-drawer-opening', 'cr-drawer-opened'].map(
+        eventName => test_util.eventToPromise(eventName, drawer)));
     drawer.openDrawer();
 
-    return test_util.eventToPromise('cr-drawer-opened', drawer)
+    return waits
         .then(() => {
           assertTrue(drawer.open);
 
           // Clicking the content does not close the drawer.
           MockInteractions.tap(document.querySelector('.drawer-content'));
-          assertFalse(drawer.classList.contains('closing'));
 
           const whenClosed = test_util.eventToPromise('close', drawer);
           drawer.$.dialog.dispatchEvent(new MouseEvent('click', {
@@ -42,11 +43,18 @@ suite('cr-drawer', function() {
         })
         .then(() => {
           assertFalse(drawer.open);
+          drawer.openDrawer();
+          return test_util.eventToPromise('cr-drawer-opened', drawer);
+        })
+        .then(() => {
+          drawer.close();
+          return test_util.eventToPromise('close', drawer);
         });
   });
 
   test('align=ltr', function() {
-    createDrawer('ltr').openDrawer();
+    const drawer = createDrawer('ltr');
+    drawer.openDrawer();
     return test_util.eventToPromise('cr-drawer-opened', drawer).then(() => {
       const rect = drawer.$.dialog.getBoundingClientRect();
       assertEquals(0, rect.left);
@@ -55,11 +63,59 @@ suite('cr-drawer', function() {
   });
 
   test('align=rtl', function() {
-    createDrawer('rtl').openDrawer();
+    const drawer = createDrawer('rtl');
+    drawer.openDrawer();
     return test_util.eventToPromise('cr-drawer-opened', drawer).then(() => {
       const rect = drawer.$.dialog.getBoundingClientRect();
       assertNotEquals(0, rect.left);
       assertEquals(window.innerWidth, rect.right);
     });
   });
+
+  test('close and cancel', () => {
+    const drawer = createDrawer();
+    drawer.openDrawer();
+    return test_util.eventToPromise('cr-drawer-opened', drawer)
+        .then(() => {
+          assertFalse(drawer.wasCanceled());
+          drawer.cancel();
+          return test_util.eventToPromise('close', drawer);
+        })
+        .then(() => {
+          assertTrue(drawer.wasCanceled());
+          drawer.openDrawer();
+          assertFalse(drawer.wasCanceled());
+          return test_util.eventToPromise('cr-drawer-opened', drawer);
+        })
+        .then(() => {
+          drawer.close();
+          return test_util.eventToPromise('close', drawer);
+        })
+        .then(() => {
+          assertFalse(drawer.wasCanceled());
+          drawer.toggle();
+          assertFalse(drawer.wasCanceled());
+          return test_util.eventToPromise('cr-drawer-opened', drawer);
+        });
+  });
+
+  test('openDrawer/close/toggle can be called multiple times in a row', () => {
+    const drawer = createDrawer();
+    drawer.openDrawer();
+    drawer.close();
+    drawer.close();
+    drawer.openDrawer();
+    drawer.openDrawer();
+    drawer.toggle();
+    drawer.toggle();
+    drawer.toggle();
+    drawer.toggle();
+  });
+
+  test('cannot set open', () => {
+    const drawer = createDrawer();
+    assertThrows(() => {
+      drawer.open = true;
+    });
+  });
 });

chrome/test/data/webui/settings/settings_ui_browsertest.js

@@ -58,20 +58,7 @@ TEST_F('SettingsUIBrowserTest', 'MAYBE_All', function() {
       const drawer = ui.$.drawer;
       assertFalse(!!drawer.open);
 
-      const whenDone = test_util.eventToPromise('cr-drawer-opened', drawer)
-                           .then(function() {
-                             const whenClosed = test_util.eventToPromise(
-                                 'open-changed', drawer);
-                             drawer.closeDrawer();
-                             return whenClosed;
-                           })
-                           .then(function(e) {
-                             // Drawer is closed, but menu is still stamped so
-                             // its contents remain visible as the drawer slides
-                             // out.
-                             assertFalse(e.detail.value);
-                             assertTrue(!!ui.$$('settings-menu'));
-                           });
+      const whenDone = test_util.eventToPromise('cr-drawer-opened', drawer);
       drawer.openDrawer();
       Polymer.dom.flush();
 
@@ -79,7 +66,18 @@ TEST_F('SettingsUIBrowserTest', 'MAYBE_All', function() {
       assertTrue(drawer.open);
       assertTrue(!!ui.$$('settings-menu'));
 
-      return whenDone;
+      return whenDone
+          .then(function() {
+            const whenClosed = test_util.eventToPromise('close', drawer);
+            drawer.close();
+            return whenClosed;
+          })
+          .then(() => {
+            // Drawer is closed, but menu is still stamped so
+            // its contents remain visible as the drawer slides
+            // out.
+            assertTrue(!!ui.$$('settings-menu'));
+          });
     });
 
     test('advanced UIs stay in sync', function() {

ui/webui/resources/cr_elements/cr_drawer/BUILD.gn

@@ -11,4 +11,8 @@ js_type_check("closure_compile") {
 }
 
 js_library("cr_drawer") {
+  deps = [
+    "//ui/webui/resources/js:assert",
+    "//ui/webui/resources/js:util",
+  ]
 }

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

 <link rel="import" href="../../html/polymer.html">
 
+<link rel="import" href="../../html/assert.html">
+<link rel="import" href="../../html/util.html">
 <link rel="import" href="../shared_vars_css.html">
 
 <dom-module id="cr-drawer">
@@ -27,7 +29,7 @@
         word-break: break-word;
       }
 
-      :host(.opening) dialog {
+      :host([show_]) dialog {
         left: 0;
       }
 
@@ -37,7 +39,7 @@
         transition: right var(--transition-timing);
       }
 
-      :host(.opening[align=rtl]) dialog {
+      :host([show_][align=rtl]) dialog {
         right: 0;
       }
 
@@ -52,7 +54,7 @@
         transition: opacity var(--transition-timing);
       }
 
-      :host(.opening) dialog::backdrop {
+      :host([show_]) dialog::backdrop {
         opacity: 1;
       }
 
@@ -72,7 +74,7 @@
       }
     </style>
     <dialog id="dialog" on-cancel="onDialogCancel_" on-tap="onDialogTap_"
-        on-transitionend="onDialogTransitionEnd_" on-close="onDialogClose_">
+        on-close="onDialogClose_">
       <div id="container" on-tap="onContainerTap_">
         <div class="drawer-header" tabindex="-1">[[heading]]</div>
         <slot></slot>

ui/webui/resources/cr_elements/cr_drawer/cr_drawer.js

@@ -8,10 +8,10 @@ Polymer({
   properties: {
     heading: String,
 
-    open: {
+    /** @private */
+    show_: {
       type: Boolean,
-      // Enables 'open-changed' events.
-      notify: true,
+      reflectToAttribute: true,
     },
 
     /** The alignment of the drawer on the screen ('ltr' or 'rtl'). */
@@ -22,29 +22,61 @@ Polymer({
     },
   },
 
+  /** @type {boolean} */
+  get open() {
+    return this.$.dialog.open;
+  },
+
+  set open(value) {
+    assertNotReached('Cannot set |open|.');
+  },
+
   /** Toggles the drawer open and close. */
   toggle: function() {
-    if (this.$.dialog.open)
-      this.closeDrawer();
+    if (this.open)
+      this.cancel();
     else
       this.openDrawer();
   },
 
   /** Shows drawer and slides it into view. */
   openDrawer: function() {
-    if (!this.$.dialog.open) {
-      this.$.dialog.showModal();
-      this.open = true;
-      this.classList.add('opening');
-    }
+    if (this.open)
+      return;
+    this.$.dialog.showModal();
+    this.show_ = true;
+    this.fire('cr-drawer-opening');
+    listenOnce(this.$.dialog, 'transitionend', () => {
+      this.fire('cr-drawer-opened');
+    });
+  },
+
+  /**
+   * Slides the drawer away, then closes it after the transition has ended. It
+   * is up to the owner of this component to differentiate between close and
+   * cancel.
+   * @param {boolean} cancel
+   */
+  dismiss_: function(cancel) {
+    if (!this.open)
+      return;
+    this.show_ = false;
+    listenOnce(this.$.dialog, 'transitionend', () => {
+      this.$.dialog.close(cancel ? 'canceled' : 'closed');
+    });
   },
 
-  /** Slides the drawer away, then closes it after the transition has ended. */
-  closeDrawer: function() {
-    if (this.$.dialog.open) {
-      this.classList.remove('opening');
-      this.classList.add('closing');
-    }
+  cancel: function() {
+    this.dismiss_(true);
+  },
+
+  close: function() {
+    this.dismiss_(false);
+  },
+
+  /** @return {boolean} */
+  wasCanceled: function() {
+    return !this.open && this.$.dialog.returnValue == 'canceled';
   },
 
   /**
@@ -62,7 +94,7 @@ Polymer({
    * @private
    */
   onDialogTap_: function() {
-    this.closeDrawer();
+    this.cancel();
   },
 
   /**
@@ -72,7 +104,7 @@ Polymer({
    */
   onDialogCancel_: function(event) {
     event.preventDefault();
-    this.closeDrawer();
+    this.cancel();
   },
 
   /**
@@ -88,18 +120,4 @@ Polymer({
     // DOM v1.
     this.fire('close');
   },
-
-  /**
-   * Closes the dialog when the closing animation is over.
-   * @private
-   */
-  onDialogTransitionEnd_: function() {
-    if (this.classList.contains('closing')) {
-      this.classList.remove('closing');
-      this.$.dialog.close();
-      this.open = false;
-    } else if (this.classList.contains('opening')) {
-      this.fire('cr-drawer-opened');
-    }
-  },
 });