chromeos: Always show hamburger menu in OS settings drawer

UX prefers the icon to always be visible. Clicking on the icon closes
the drawer.

http://screen/5CjhZ4caxB1

Bug: 988012
Test: added to browser_tests
Change-Id: I1c593619126ca6394ccdf7bf93e3479dad1a8b33
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1764758
Commit-Queue: James Cook <jamescook@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Cr-Commit-Position: refs/heads/master@{#690407}

chrome/browser/resources/settings/chromeos/os_settings_ui/os_settings_ui.html

@@ -120,7 +120,8 @@
         show-menu="[[isNarrow]]">
     </os-toolbar>
     <cr-drawer id="drawer" on-close="onMenuClose_" heading="$i18n{settings}"
-        align="$i18n{textdirection}">
+        align="$i18n{textdirection}" icon-name="cr20:menu"
+        icon-title="$i18n{close}">
       <div class="drawer-content">
         <template is="dom-if" id="drawerTemplate">
           <os-settings-menu show-apps="[[showApps_]]"

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

@@ -52,6 +52,24 @@ suite('cr-drawer', function() {
         });
   });
 
+  test('tapping icon closes drawer', async () => {
+    // Create a drawer with an icon and open it.
+    document.body.innerHTML = `
+      <cr-drawer id="drawer" align="ltr" icon-name="menu" icon-title="close">
+      </cr-drawer>
+    `;
+    Polymer.dom.flush();
+    const drawer = document.getElementById('drawer');
+    drawer.openDrawer();
+    await test_util.eventToPromise('cr-drawer-opened', drawer);
+
+    // Tapping the icon closes the drawer.
+    MockInteractions.tap(drawer.$.iconButton);
+    await test_util.eventToPromise('close', drawer);
+    assertFalse(drawer.open);
+    assertTrue(drawer.wasCanceled());
+  });
+
   test('align=ltr', function() {
     const drawer = createDrawer('ltr');
     drawer.openDrawer();

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

 <link rel="import" href="../../html/polymer.html">
 
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="../../html/assert.html">
 <link rel="import" href="../../html/util.html">
 <link rel="import" href="../shared_vars_css.html">
@@ -73,7 +74,6 @@
         font-size: 123.08%;  /* go to 16px from 13px */
         font-weight: var(--cr-drawer-header-font-weight, inherit);
         min-height: 56px;
-        outline: none;
         padding-inline-start: var(--cr-drawer-header-padding, 24px);
       }
 
@@ -83,6 +83,17 @@
         }
       }
 
+      #heading {
+        outline: none;
+      }
+
+      #iconButton {
+        cursor: pointer;
+        margin-inline-end: 14px;
+        margin-inline-start: 0;
+        outline: none;
+      }
+
       :host ::slotted(.drawer-content) {
         height: calc(100% - 56px);
         overflow: auto;
@@ -91,7 +102,15 @@
     <dialog id="dialog" on-cancel="onDialogCancel_" on-tap="onDialogTap_"
         on-close="onDialogClose_">
       <div id="container" on-tap="onContainerTap_">
-        <div class="drawer-header" tabindex="-1">[[heading]]</div>
+        <div class="drawer-header">
+          <!-- Hidden from a11y because this icon is decorative. Clicking closes
+              the dialog, but screen reader users can do this by pressing ESC,
+              so aria-hidden is OK here. -->
+          <iron-icon id="iconButton" icon="[[iconName]]" on-tap="onIconTap_"
+              title="[[iconTitle]]" hidden="[[!iconName]]" aria-hidden="true">
+          </iron-icon>
+          <div id="heading" tabindex="-1">[[heading]]</div>
+        </div>
         <slot></slot>
       </div>
     </dialog>

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

@@ -20,6 +20,18 @@ Polymer({
       value: 'ltr',
       reflectToAttribute: true,
     },
+
+    /**
+     * An iron-icon resource name, e.g. "cr20:menu". If null, no icon will
+     * be shown.
+     */
+    iconName: {
+      type: String,
+      value: null,
+    },
+
+    /** Title attribute for the icon, if shown. */
+    iconTitle: String,
   },
 
   /** @type {boolean} */
@@ -82,6 +94,15 @@ Polymer({
     return !this.open && this.$.dialog.returnValue == 'canceled';
   },
 
+  /**
+   * Handles a tap on the (optional) icon.
+   * @param {!Event} event
+   * @private
+   */
+  onIconTap_: function(event) {
+    this.cancel();
+  },
+
   /**
    * Stop propagation of a tap event inside the container. This will allow
    * |onDialogTap_| to only be called when clicked outside the container.