Draw focus rectangle around PDF document

This CL draws/hides the focus rectangle around the PDF document based
on whether the PDF document has the focus or not.

The focus rectangle color is currently white. It's a placeholder for now
and will most likely change in future.

Fixed: 1069370
Change-Id: Ib8446a2326924ff0fed59d8fd2b04db462c1488c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2211562
Commit-Queue: Ankit Kumar 🌪️ <ankk@microsoft.com>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#792439}

chrome/browser/resources/pdf/pdf_viewer.html

 <style include="pdf-viewer-shared-style">
+  #content-focus-rectangle {
+    border: 2px solid white;
+    border-radius: 2px;
+    box-sizing: border-box;
+    height: 100%;
+    pointer-events: none;
+    position: fixed;
+    width: 100%;
+    /* z-index for this should be higher than toolbar. */
+    z-index: 5;
+  }
+
   viewer-pdf-toolbar {
     position: fixed;
     width: 100%;
@@ -153,3 +165,5 @@
 <template is="dom-if" if="[[!pdfViewerUpdateEnabled_]]">
   <div id="content"></div>
 </template>
+
+<div id="content-focus-rectangle" hidden$="[[!documentHasFocus_]]"></div>
\ No newline at end of file

chrome/browser/resources/pdf/pdf_viewer.js

@@ -108,6 +108,11 @@ export class PDFViewerElement extends PDFViewerBaseElement {
 
       bookmarks_: Array,
 
+      documentHasFocus_: {
+        type: Boolean,
+        value: false,
+      },
+
       hasEdits_: {
         type: Boolean,
         value: false,
@@ -163,6 +168,9 @@ export class PDFViewerElement extends PDFViewerBaseElement {
     /** @private {!Array<!Bookmark>} */
     this.bookmarks_ = [];
 
+    /** @private {boolean} */
+    this.documentHasFocus_ = false;
+
     /** @private {boolean} */
     this.hasEdits_ = false;
 
@@ -702,7 +710,8 @@ export class PDFViewerElement extends PDFViewerBaseElement {
         });
         return;
       case 'documentFocusChanged':
-        // TODO(crbug.com/1069370): Draw a focus rect around plugin.
+        this.documentHasFocus_ =
+            /** @type {{ hasFocus: boolean }} */ (data).hasFocus;
         return;
     }
     assertNotReached('Unknown message type received: ' + data.type);