PDF Viewer update: Display "on" state while more menu is open.

 - Emit 'open-changed' events from cr-action-menu and add test.
 - Update viewer-pdf-toolbar-new to leverage these.
 - Change viewer-download-controls to use same approach.
   Previously relied on manually updating a boolean when
   the menu was triggered and when it was closed.

Fixed: 1130107
Change-Id: I9303cd4a6cc4befd5aaf99e7eff9b0b95a8ec5d0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2421184Reviewed-by: John Lee <johntlee@chromium.org>
Commit-Queue: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#808914}

chrome/browser/resources/pdf/elements/viewer-download-controls.html

@@ -13,7 +13,7 @@
     on-click="onDownloadClick_" aria-label="$i18n{tooltipDownload}"
     aria-haspopup$="[[downloadHasPopup_]]"
     title="$i18n{tooltipDownload}"></cr-icon-button>
-<cr-action-menu id="menu" on-close="onMenuClose_">
+<cr-action-menu id="menu" on-open-changed="onOpenChanged_">
   <button class="dropdown-item" on-click="onDownloadEditedClick_">
     $i18n{downloadEdited}
   </button>

chrome/browser/resources/pdf/elements/viewer-download-controls.js

@@ -83,9 +83,12 @@ export class ViewerDownloadControlsElement extends PolymerElement {
     this.getDownloadMenu_().close();
   }
 
-  /** @private */
-  onMenuClose_() {
-    this.menuOpen_ = false;
+  /**
+   * @param {!CustomEvent<!{value: boolean}>} e
+   * @private
+   */
+  onOpenChanged_(e) {
+    this.menuOpen_ = e.detail.value;
   }
 
   /**
@@ -117,7 +120,6 @@ export class ViewerDownloadControlsElement extends PolymerElement {
 
   /** @private */
   showDownloadMenu_() {
-    this.menuOpen_ = true;
     this.getDownloadMenu_().showAt(this.$.download, {
       anchorAlignmentX: AnchorAlignment.CENTER,
     });

chrome/browser/resources/pdf/elements/viewer-pdf-toolbar-new.html

@@ -10,6 +10,11 @@
     position: relative;
   }
 
+  :host([more-menu-open_]) #more {
+    background-color: var(--active-button-bg);
+    border-radius: 50%;
+  }
+
   #toolbar {
     align-items: center;
     background-color: var(--viewer-pdf-toolbar-background-color);
@@ -234,7 +239,7 @@
 <paper-progress id="progress" value="[[loadProgress]]" hidden="[[!loading_]]">
 </paper-progress>
 
-<cr-action-menu>
+<cr-action-menu on-open-changed="onMoreOpenChanged_">
   <button id="two-page-view-button"
       class="dropdown-item" on-click="toggleTwoPageViewClick_" role="checkbox"
 <if expr="chromeos">

chrome/browser/resources/pdf/elements/viewer-pdf-toolbar-new.js

@@ -72,6 +72,11 @@ export class ViewerPdfToolbarNewElement extends PolymerElement {
         observer: 'viewportZoomChanged_',
       },
 
+      moreMenuOpen_: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+
       twoUpViewEnabled_: Boolean,
 
       fittingType_: Number,
@@ -105,6 +110,9 @@ export class ViewerPdfToolbarNewElement extends PolymerElement {
     /** @private {boolean} */
     this.displayAnnotations_ = true;
 
+    /** @private {boolean} */
+    this.moreMenuOpen_ = false;
+
     /** @private {boolean} */
     this.twoUpViewEnabled_ = false;
 
@@ -321,6 +329,14 @@ export class ViewerPdfToolbarNewElement extends PolymerElement {
     });
   }
 
+  /**
+   * @param {!CustomEvent<!{value: boolean}>} e
+   * @private
+   */
+  onMoreOpenChanged_(e) {
+    this.moreMenuOpen_ = e.detail.value;
+  }
+
   // <if expr="chromeos">
   toggleAnnotation() {
     const newAnnotationMode = !this.annotationMode;

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

@@ -85,6 +85,18 @@ suite('CrActionMenu', function() {
     MockInteractions.keyDownOn(menu, 0, [], 'Enter');
   }
 
+  test('open-changed event fires', async function() {
+    let whenFired = test_util.eventToPromise('open-changed', menu);
+    menu.showAt(dots);
+    let event = await whenFired;
+    assertTrue(event.detail.value);
+
+    whenFired = test_util.eventToPromise('open-changed', menu);
+    menu.close();
+    event = await whenFired;
+    assertFalse(event.detail.value);
+  });
+
   test('close event bubbles', function() {
     menu.showAt(dots);
     const whenFired = test_util.eventToPromise('close', menu);

ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.js

@@ -162,6 +162,7 @@ Polymer({
 
     open: {
       type: Boolean,
+      notify: true,
       value: false,
     },