pdf: Implement UX spec for icon states

* Adjusts size/location of icons and focus/hover/active states.
* Makes viewer-toolbar-dropdown use a single paper-button to avoid overlapping focus/ripple.
* Removes focus when a dropdown is cancelled by pointer events.

Spec: go/pdf-icon-states-spec
Impl: go/pdf-icon-states-impl

Bug: 902646
Change-Id: If3bee9f86c8fa9f50537c8ff3cc4e3a9011172eb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1508014
Commit-Queue: dstockwell <dstockwell@chromium.org>
Commit-Queue: dsinclair <dsinclair@chromium.org>
Reviewed-by: dsinclair <dsinclair@chromium.org>
Auto-Submit: dstockwell <dstockwell@chromium.org>
Cr-Commit-Position: refs/heads/master@{#638574}

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

@@ -50,11 +50,20 @@
       }
 
       paper-icon-button {
-        margin-inline-end: 12px;
+        height: 36px;
+        margin: 6px;
+        padding: 8px;
+        width: 36px;
+      }
+
+      paper-icon-button:hover {
+        background: rgba(255, 255, 255, 0.08);
+        border-radius: 50%;
       }
 
-      viewer-toolbar-dropdown {
-        margin-inline-end: 4px;
+      paper-icon-button:focus {
+        --paper-icon-button-ink-color:white;
+        --paper-ripple-opacity: 0.24;
       }
 
       paper-progress {
@@ -100,33 +109,45 @@
         --dropdown-width: 346px;
       }
 
-      #eraser:not([selected]),
-      #pen:not([selected]),
-      #highlighter:not([selected]) {
-        --pen-tip-fill: currentcolor !important;
-        --pen-tip-border: currentcolor !important;
-      }
-
       #pen,
       #highlighter {
         --dropdown-open-background: rgb(50, 54, 57);
       }
 
-      #eraser[selected] {
-        background-color: rgb(50, 54, 57);
-        border-radius: 4px;
+      #eraser {
+        opacity: 0.38;
+      }
+
+      #eraser[selected],
+      #eraser:focus,
+      #eraser:hover {
+        opacity: 1;
       }
 
       #annotation-separator {
-        background: rgb(151, 152, 152);
+        background: white;
         height: 30px;
         margin-inline-end: 12px;
+        margin-inline-start: 12px;
+        opacity: 0.38;
         width: 1px;
       }
 
       :host([annotation-mode]) #annotate {
-        background-color: rgb(25, 27, 29);
-        border-radius: 4px;
+        background-color: rgba(255, 255, 255, 0.24);
+        border-radius: 50%;
+      }
+
+      #bookmarks {
+        margin-inline-start: 8px;
+      }
+
+      #pen {
+        margin-inline-end: 10px;
+      }
+
+      #highlighter {
+        margin-inline-end: 6px;
       }
 
       .invisible {
@@ -200,6 +221,7 @@
           </paper-icon-button>
 
           <viewer-toolbar-dropdown id="bookmarks"
+                                   selected
                                    metrics-id="bookmarks"
                                    hidden$="[[!bookmarks.length]]"
                                    open-icon="pdf:bookmark"

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 
@@ -8,6 +8,7 @@
   <template>
     <style>
       :host {
+        display: inline-block;
         position: relative;
         text-align: start;
         --dropdown-width: 260px;
@@ -43,20 +44,37 @@
         padding: 6px 0 4px 0;
       }
 
-      #icon {
+      #button {
+        border-radius: 4px;
         cursor: pointer;
         display: inline-block;
+        height: 32px;
+        margin: 0;
+        min-width: 48px;
+        opacity: 0.38;
+        padding-bottom: 6px;
+        padding-inline-end: 2px;
+        padding-inline-start: 6px;
+        padding-top: 6px;
+        width: 48px;
       }
 
-      :host([dropdown-open]) #icon,
-      :host([selected]) #icon {
-        background-color: var(--dropdown-open-background, rgb(25, 27, 29));
-        border-radius: 4px;
+      #button:focus {
+        background-color: rgba(255, 255, 255, 0.24);
+        opacity: 1;
       }
 
-      #arrow {
-        margin-inline-start: -8px;
-        padding-inline-end: 4px;
+      #button:hover {
+        background-color: rgba(255, 255, 255, 0.08);
+        opacity: 1;
+      }
+
+      :host([selected]) #button {
+        opacity: 1;
+
+      }
+      :host([dropdown-open]) #button {
+        background-color: rgba(255, 255, 255, 0.24);
       }
 
       h1 {
@@ -67,12 +85,11 @@
         padding: 14px 28px;
       }
     </style>
-    <div on-click="toggleDropdown" id="icon">
-      <paper-icon-button id="main-icon" icon="[[dropdownIcon]]"
+    <paper-button on-click="toggleDropdown" id="button"
          aria-label$="{{header}}" title$="{{header}}">
-      </paper-icon-button>
-      <iron-icon icon="cr:arrow-drop-down" id="arrow"></iron-icon>
-    </div>
+      <iron-icon icon="[[dropdownIcon]]"></iron-icon>
+      <iron-icon icon="cr:arrow-drop-down"></iron-icon>
+    </paper-button>
 
     <div id="container">
       <div id="dropdown" style="display: none">

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

@@ -101,6 +101,7 @@ Polymer({
         }
         if (this.dropdownOpen) {
           this.toggleDropdown();
+          this.blur();
         }
         // Clean up the handler. The dropdown may already be closed.
         window.removeEventListener('pointerdown', listener);

chrome/test/data/pdf/basic_test.js

@@ -67,7 +67,7 @@ var tests = [
 
     // Clicking on the plugin should close the bookmarks menu.
     chrome.test.assertFalse(dropdown.dropdownOpen);
-    MockInteractions.tap(dropdown.$.icon);
+    MockInteractions.tap(dropdown.$.button);
     chrome.test.assertTrue(dropdown.dropdownOpen);
     // Generate pointer event manually, as MockInteractions doesn't include
     // this.
@@ -75,7 +75,7 @@ var tests = [
     chrome.test.assertFalse(dropdown.dropdownOpen,
         "Clicking plugin closes dropdown");
 
-    MockInteractions.tap(dropdown.$.icon);
+    MockInteractions.tap(dropdown.$.button);
     chrome.test.assertTrue(dropdown.dropdownOpen);
     MockInteractions.pressAndReleaseKeyOn(document, ESC_KEY);
     chrome.test.assertFalse(dropdown.dropdownOpen,

chrome/test/data/pdf/material_elements_test.js

@@ -97,12 +97,12 @@ var tests = [
     chrome.test.assertFalse(dropdown.dropdownOpen);
     chrome.test.assertEq('closedIcon', dropdown.dropdownIcon);
 
-    MockInteractions.tap(dropdown.$.icon);
+    MockInteractions.tap(dropdown.$.button);
 
     chrome.test.assertTrue(dropdown.dropdownOpen);
     chrome.test.assertEq('openIcon', dropdown.dropdownIcon);
 
-    MockInteractions.tap(dropdown.$.icon);
+    MockInteractions.tap(dropdown.$.button);
 
     chrome.test.assertFalse(dropdown.dropdownOpen);