PDF Viewer: Highlight download button when menu is open, match bookmarks

The download button should be highlighted when the action menu is open,
similar to the highlight on the bookmarks icon when the bookmarks menu
is open.

Also changing the menu to be light when the PDFViewerUpdate feature
flag is not enabled, for the same reason (matching the bookmarks menu).

Bug: 1113519
Change-Id: I86dc1b7a569688532a2bbce1b8b639e79932d325
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2340447
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#796144}

chrome/browser/resources/pdf/elements/shared-css.html

@@ -14,7 +14,7 @@
        ui/webui/resources/cr_elements/shared_vars_css.html. Unfortunately there
        seems to be no great way to share styles with the
        "prefers-color-scheme: dark" @media query selector. */
-    cr-action-menu[force-dark-mode] {
+    :host-context([pdf-viewer-update-enabled]) cr-action-menu {
         --cr-menu-background-color: var(--google-grey-900);
         --cr-menu-shadow: rgba(0, 0, 0, .3) 0 1px 2px 0,
                           rgba(0, 0, 0, .15) 0 3px 6px 2px;

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

@@ -3,12 +3,17 @@
     position: fixed;
     top: 48px;
   }
+
+  :host([menu-open_]) #download {
+    background-color: var(--active-button-bg);
+    border-radius: 50%;
+  }
 </style>
 <cr-icon-button id="download" iron-icon="cr:file-download"
     on-click="onDownloadClick_" aria-label$="$i18n{tooltipDownload}"
     aria-haspopup$="[[downloadHasPopup_]]"
     title="$i18n{tooltipDownload}"></cr-icon-button>
-<cr-action-menu id="menu" force-dark-mode>
+<cr-action-menu id="menu" on-close="onMenuClose_">
   <button class="dropdown-item" on-click="onDownloadEditedClick_">
     $i18n{downloadEdited}
   </button>

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

@@ -40,6 +40,13 @@ export class ViewerDownloadControlsElement extends PolymerElement {
         computed: 'computeDownloadHasPopup_(' +
             'pdfFormSaveEnabled, hasEdits, hasEnteredAnnotationMode)',
       },
+
+      /** @private */
+      menuOpen_: {
+        type: Boolean,
+        reflectToAttribute: true,
+        value: false,
+      },
     };
   }
 
@@ -69,13 +76,18 @@ export class ViewerDownloadControlsElement extends PolymerElement {
 
   /** @return {boolean} */
   isMenuOpen() {
-    return this.getDownloadMenu_().open;
+    return this.menuOpen_;
   }
 
   closeMenu() {
     this.getDownloadMenu_().close();
   }
 
+  /** @private */
+  onMenuClose_() {
+    this.menuOpen_ = false;
+  }
+
   /**
    * @return {boolean}
    * @private
@@ -105,6 +117,7 @@ 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

@@ -116,7 +116,7 @@
 
 <if expr="chromeos">
   :host([annotation-mode]) #annotate {
-    background-color: rgba(255, 255, 255, 0.24);
+    background-color: var(--active-button-bg);
     border-radius: 50%;
   }
 </if>
@@ -193,7 +193,7 @@
 <paper-progress id="progress" value="[[loadProgress]]" hidden="[[!loading_]]">
 </paper-progress>
 
-<cr-action-menu force-dark-mode>
+<cr-action-menu>
   <button id="single-page-view-button"
       class="dropdown-item" on-click="onSinglePageViewClick_"
       role="radio"

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

@@ -68,7 +68,7 @@
       }
 
       :host([annotation-mode]) #annotate {
-        background-color: rgba(255, 255, 255, 0.24);
+        background-color: var(--active-button-bg);
         border-radius: 50%;
       }
 

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

@@ -65,7 +65,7 @@
 
       }
       :host([dropdown-open]) #button {
-        background-color: rgba(255, 255, 255, 0.24);
+        background-color: var(--active-button-bg);
       }
 
       h1 {

chrome/browser/resources/pdf/pdf_viewer.html

@@ -4,6 +4,11 @@
     --pdf-toolbar-text-color: rgb(241, 241, 241);
   }
 
+  viewer-pdf-toolbar,
+  viewer-pdf-toolbar-new {
+    --active-button-bg: rgba(255, 255, 255, 0.24);
+  }
+
   #content-focus-rectangle {
     border: 2px solid var(--google-grey-600);
     border-radius: 2px;