Print Preview: Move icon to right for checkbox settings

Bug: None
Change-Id: Idc21640edb5cce41094bf564ae9e3383e202dc91
Reviewed-on: https://chromium-review.googlesource.com/1244545
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#594777}

chrome/browser/resources/print_preview/new/other_options_settings.html

@@ -29,7 +29,7 @@
     </style>
     <template is="dom-repeat" items="[[options_]]">
       <print-preview-settings-section managed="[[item.managed]]"
-          hidden$="[[!item.available]]"
+          show-policy-on-end hidden$="[[!item.available]]"
           class$="[[getClass_(index, firstIndex_, lastIndex_)]]">
         <div slot="title">
           <span class="title">$i18n{optionsLabel}</span>

chrome/browser/resources/print_preview/new/settings_section.html

@@ -14,6 +14,8 @@
         margin-bottom: 16px;
         margin-top: 16px;
         padding: 0 20px;
+        --policy-icon-padding: 4px;
+        --policy-icon-size: 20px;
       }
 
       ::slotted([slot=controls]),
@@ -34,8 +36,8 @@
         color: var(--google-grey-900);
         flex: none;
         font-size: 1em;
-        padding-inline-end: 5px;
-        width: 70px;
+        padding-inline-end: var(--policy-icon-padding);
+        width: calc(75px - var(--policy-icon-padding));
         word-break: break-word;
       }
 
@@ -44,20 +46,33 @@
         padding-top: 10px;
       }
 
-      :host([managed]) ::slotted([slot=title]) {
-        width: 50px;
+      :host([managed]:not([show-policy-on-end])) ::slotted([slot=title]) {
+        width: calc(75px - var(--policy-icon-size)
+                    - var(--policy-icon-padding));
+      }
+
+      :host([managed][show-policy-on-end]) ::slotted([slot=controls]) {
+        padding-inline-end: var(--policy-icon-padding);
       }
 
       iron-icon {
         fill: var(--google-grey-600);
-        width: 20px;
+        flex: 0;
+        min-width: var(--policy-icon-size);
       }
     </style>
     <slot name="title"></slot>
-    <iron-icon hidden$="[[!managed]]" icon="print-preview:business"
-        alt="" aria-label="$i18n{managedOption}">
-    </iron-icon>
+    <template is="dom-if" if="[[showStartIcon_(showPolicyOnEnd, managed)]]">
+      <iron-icon hidden$="[[!managed]]" icon="print-preview:business"
+          alt="" aria-label="$i18n{managedOption}">
+      </iron-icon>
+    </template>
     <slot name="controls"></slot>
+    <template is="dom-if" if="[[showEndIcon_(showPolicyOnEnd, managed)]]">
+      <iron-icon hidden$="[[!managed]]" icon="print-preview:business"
+          alt="" aria-label="$i18n{managedOption}">
+      </iron-icon>
+    </template>
   </template>
   <script src="settings_section.js"></script>
 </dom-module>

chrome/browser/resources/print_preview/new/settings_section.js

@@ -12,5 +12,28 @@ Polymer({
       value: false,
       reflectToAttribute: true,
     },
+
+    /** @type {boolean} */
+    showPolicyOnEnd: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true,
+    },
+  },
+
+  /**
+   * @return {boolean} Whether to show the policy icon before the controls.
+   * @private
+   */
+  showStartIcon_: function() {
+    return this.managed && !this.showPolicyOnEnd;
+  },
+
+  /**
+   * @return {boolean} Whether to show the policy icon after the controls.
+   * @private
+   */
+  showEndIcon_: function() {
+    return this.managed && this.showPolicyOnEnd;
   },
 });

chrome/test/data/webui/print_preview/base_settings_section_test.js

@@ -18,20 +18,22 @@ cr.define('base_settings_section_test', function() {
       settingsSection =
           document.createElement('print-preview-settings-section');
       document.body.appendChild(settingsSection);
+      Polymer.dom.flush();
     });
 
     // Test that key events that would result in invalid values are blocked.
     test(assert(TestNames.ManagedShowsEnterpriseIcon), function() {
-      const icon = settingsSection.$$('iron-icon');
-
-      // Default initial state is that the section is not managed, so the icon
-      // is hidden.
-      assertTrue(icon.hidden);
+      // No icons until managed is set.
+      let icons = settingsSection.shadowRoot.querySelectorAll('iron-icon');
+      assertEquals(0, icons.length);
       assertFalse(settingsSection.managed);
 
       // Simulate setting the section to managed and verify icon appears.
       settingsSection.managed = true;
-      assertFalse(icon.hidden);
+      Polymer.dom.flush();
+      icons = settingsSection.shadowRoot.querySelectorAll('iron-icon');
+      assertEquals(1, icons.length);
+      assertFalse(icons[0].hidden);
     });
   });