PDF viewer: Add an HTML attribute for is-print-preview

This is a cleanup use an HTML attribute to position buttons when
Print Preview is hosting the plugin. This allows some simplification
compared to the previous implementation of using Polymer properties.

Change-Id: Icd73f2fa8969dc76579e477a7ad967f2b3ceeaaa
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1880151
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#709364}

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

@@ -97,7 +97,6 @@ js_library("viewer-zoom-toolbar") {
     ":viewer-zoom-button",
     "..:pdf_fitting_type",
     "//ui/webui/resources/js:assert.m",
-    "//ui/webui/resources/js:util.m",
   ]
 }
 

chrome/browser/resources/pdf/elements/viewer-zoom-button.html

@@ -3,7 +3,7 @@
         --translate-x-distance: 132px;
       }
 
-      :host([is-print-preview]) {
+      :host-context([is-print-preview]) {
         --translate-x-distance: 96px;
       }
 
@@ -19,13 +19,22 @@
         transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
       }
 
-      :host([show-on-left][closed_]) #wrapper {
+      :host-context([is-print-preview][dir='ltr']):host([closed_]) #wrapper {
         transform: translateX(calc(-1 * var(--translate-x-distance)));
       }
 
+      :host-context([dir='rtl']):host([closed_]) #wrapper {
+        transform: translateX(calc(-1 * var(--translate-x-distance)));
+      }
+
+      :host-context([is-print-preview][dir='rtl']):host([closed_]) #wrapper {
+        transform: translateX(var(--translate-x-distance));
+      }
+
       cr-icon-button {
         --cr-icon-button-size: 36px;
         --cr-icon-button-icon-size: 20px;
+        --cr-icon-button-ripple-opacity: .4;
         background-color: rgb(242, 242, 242);
         border-radius: 50%;
         color: var(--paper-grey-700);
@@ -33,28 +42,24 @@
         @apply --shadow-elevation-2dp;
       }
 
-      :host(:not([is-print-preview])) cr-icon-button {
-        --cr-icon-button-ripple-opacity: .4;
-      }
-
       cr-icon-button([disabled]) {
         box-shadow: none;
       }
 
-      :host([is-print-preview]) cr-icon-button {
+      :host-context([is-print-preview]) cr-icon-button {
         --cr-icon-button-size: 32px;
         background-color: var(--google-grey-600);
         color: white;
       }
 
       @media (prefers-color-scheme: light) {
-        :host([is-print-preview]) cr-icon-button {
+        :host-context([is-print-preview]) cr-icon-button {
           --cr-icon-button-ripple-opacity: .5;
         }
       }
 
       @media (prefers-color-scheme: dark) {
-        :host([is-print-preview]) cr-icon-button {
+        :host-context([is-print-preview]) cr-icon-button {
           background-color: var(--google-grey-900);
           color: var(--google-grey-200);
         }

chrome/browser/resources/pdf/elements/viewer-zoom-button.js

@@ -40,16 +40,6 @@ Polymer({
       reflectToAttribute: true,
     },
 
-    isPrintPreview: {
-      type: Boolean,
-      reflectToAttribute: true,
-    },
-
-    showOnLeft: {
-      type: Boolean,
-      reflectToAttribute: true,
-    },
-
     /** @type {?Array<string>} */
     tooltips: Array,
 

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

@@ -9,25 +9,37 @@
         z-index: 3;
       }
 
-      :host([is-print-preview]) {
+      :host-context([is-print-preview]) {
         --button-position-offset: 24px;
       }
 
-      :host([show-on-left_]) {
+      :host-context([is-print-preview][dir='ltr']),
+      :host-context([dir='rtl']) {
         left: 0;
         right: auto;
       }
 
+      :host-context([is-print-preview][dir='rtl']) {
+        left: auto;
+        right: 0;
+      }
+
       #zoom-buttons {
         position: relative;
         right: var(--button-position-offset);
       }
 
-      :host([show-on-left_]) #zoom-buttons {
+      :host-context([is-print-preview][dir='ltr']) #zoom-buttons,
+      :host-context([dir='rtl']) #zoom-buttons {
         left: var(--button-position-offset);
         right: auto;
       }
 
+      :host-context([is-print-preview][dir='rtl']) #zoom-buttons {
+        left: auto;
+        right: var(--button-position-offset);
+      }
+
       viewer-zoom-button {
         display: block;
       }
@@ -44,19 +56,13 @@
     </style>
     <div id="zoom-buttons">
       <viewer-zoom-button id="fit-button" on-fabclick="fitToggle" delay="100"
-          is-print-preview="[[isPrintPreview]]"
-          show-on-left="[[showOnLeft_]]"
           keyboard-navigation-active="[[keyboardNavigationActive_]]"
           icons="pdf:fullscreen-exit cr:fullscreen">
       </viewer-zoom-button>
       <viewer-zoom-button id="zoom-in-button" icons="pdf:add"
-          is-print-preview="[[isPrintPreview]]"
-          show-on-left="[[showOnLeft_]]"
           keyboard-navigation-active="[[keyboardNavigationActive_]]"
           on-fabclick="zoomIn" delay="50"></viewer-zoom-button>
       <viewer-zoom-button id="zoom-out-button" icons="pdf:remove"
-          is-print-preview="[[isPrintPreview]]"
-          show-on-left="[[showOnLeft_]]"
           keyboard-navigation-active="[[keyboardNavigationActive_]]"
           on-fabclick="zoomOut" delay="0"></viewer-zoom-button>
     </div>

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

@@ -7,7 +7,6 @@ import './icons.js';
 import './viewer-zoom-button.js';
 
 import {assert} from 'chrome://resources/js/assert.m.js';
-import {isRTL} from 'chrome://resources/js/util.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 import {FittingType} from '../pdf_fitting_type.js';
 
@@ -28,22 +27,13 @@ Polymer({
   _template: html`{__html_template__}`,
 
   properties: {
-    isPrintPreview: {
-      type: Boolean,
-      reflectToAttribute: true,
-    },
+    isPrintPreview: Boolean,
 
     /** @private */
     keyboardNavigationActive_: {
       type: Boolean,
       value: false,
     },
-
-    /** @private */
-    showOnLeft_: {
-      type: Boolean,
-      reflectToAttribute: true,
-    },
   },
 
   listeners: {
@@ -99,7 +89,6 @@ Polymer({
         [strings.tooltipFitToPage, strings.tooltipFitToWidth];
     this.$['zoom-in-button'].tooltips = [strings.tooltipZoomIn];
     this.$['zoom-out-button'].tooltips = [strings.tooltipZoomOut];
-    this.showOnLeft_ = isRTL() !== this.isPrintPreview;
   },
 
   /** Handle clicks of the fit-button. */

chrome/browser/resources/pdf/pdf_viewer.js

@@ -177,6 +177,8 @@ export class PDFViewer {
 
     /** @private {boolean} */
     this.isPrintPreview_ = location.origin === 'chrome://print';
+    document.documentElement.toggleAttribute(
+        'is-print-preview', this.isPrintPreview_);
 
     /** @private {boolean} */
     this.isPrintPreviewLoadingFinished_ = false;