PDF Viewer Update: Apply active thumbnail styling

Add a thicker highlight around the thumbnail when it corresponds to the
active PDF page.

Draw an even thicker highlight around the thumbnail when it corresponds
to the active PDF page and it is focused.

Also, do not draw focus outline on thumbnails that are clicked.

Bug: 652400
Change-Id: I30a790ad400a705d766099fb322b297913f48f3c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2434734
Commit-Queue: Daniel Hosseinian <dhoss@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#812221}

chrome/browser/resources/pdf/elements/BUILD.gn

@@ -153,6 +153,7 @@ js_library("viewer-pen-options") {
 js_library("viewer-thumbnail") {
   deps = [
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js/cr/ui:focus_outline_manager.m",
   ]
 }
 

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

@@ -15,13 +15,18 @@
     margin-inline-start: auto;
   }
 
-  :host(:focus) #thumbnail {
-    box-shadow: 0 0 0 2px var(--focus-border-color);
-  }
-
   :host([is-active]) #thumbnail {
     --active-background-color: white;
     background-color: var(--active-background-color);
+    box-shadow: 0 0 0 6px var(--focus-border-color);
+  }
+
+  :host-context(.focus-outline-visible):host(:focus) #thumbnail {
+    box-shadow: 0 0 0 2px var(--focus-border-color);
+  }
+
+  :host-context(.focus-outline-visible):host([is-active]:focus) #thumbnail {
+    box-shadow: 0 0 0 8px var(--focus-border-color);
   }
 
   canvas {

chrome/browser/resources/pdf/elements/viewer-thumbnail.js

@@ -4,6 +4,7 @@
 
 import './shared-css.js';
 
+import {FocusOutlineManager} from 'chrome://resources/js/cr/ui/focus_outline_manager.m.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 // The maximum widths of thumbnails for each layout (px).
@@ -39,6 +40,8 @@ export class ViewerThumbnailElement extends PolymerElement {
     super();
 
     this.addEventListener('keydown', this.onKeydown_);
+
+    FocusOutlineManager.forDocument(document);
   }
 
   /** @param {!ImageData} imageData */