[cr webui] cr-link-row in appearance

This CL adds a slot to cr-link-row (currently used for policy indicator),
removes the border on cr-link-row, adds .hr class, and completes the
changeover to cr-link-row in the appearance_page.

Bug: 757663
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Ic4fca205c855c077b53b487e7db1f54d0d2f47f8
Reviewed-on: https://chromium-review.googlesource.com/679482
Commit-Queue: Dave Schuyler <dschuyler@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#505442}

chrome/browser/resources/md_extensions/detail_view.html

@@ -240,7 +240,8 @@
           <button class="icon-external" is="paper-icon-button-light"></button>
         </div>
       </div>
-      <button is="cr-link-row" hidden="[[isControlled_(data.controlledInfo)]]"
+      <button class="hr" is="cr-link-row"
+          hidden="[[isControlled_(data.controlledInfo)]]"
           icon-class="subpage-arrow" id="remove-extension"
           label="$i18n{itemRemoveExtension}" on-tap="onRemoveTap_">
       </button>

chrome/browser/resources/settings/appearance_page/appearance_page.html

@@ -37,51 +37,46 @@
         };
         width: 100%;  /* Pushes policy indicators to end. */
       }
+
+      /* The theme mixes a link and a paper-button divided by a separator with
+       * grit expressions and dom-if templates. That leads to a tricky thing
+       * to style correctly, these are a workaround. */
+      #themeRow paper-button {
+        -webkit-margin-end: 8px;
+      }
+
+      #themeRow .separator {
+         -webkit-margin-start: 0;
+      }
+
+      #useSystem {
+        -webkit-margin-start: calc(var(--cr-button-edge-spacing) * -1);
+      }
     </style>
     <settings-animated-pages id="pages" section="appearance"
         focus-config="[[focusConfig_]]">
       <neon-animatable route-path="default">
 <if expr="chromeos">
-        <div class="settings-box first two-line" id="wallpaperButton"
-            on-tap="openWallpaperManager_" actionable
-            hidden="[[!pageVisibility.setWallpaper]]">
-          <div class="start">
-            $i18n{setWallpaper}
-            <div class="secondary" id="wallpaperSecondary">
-              $i18n{openWallpaperApp}
-            </div>
-          </div>
+        <button icon-class="icon-external" id="wallpaperButton"
+            is="cr-link-row"
+            hidden="[[!pageVisibility.setWallpaper]]"
+            on-tap="openWallpaperManager_"
+            label="$i18n{setWallpaper}" sub-label="$i18n{openWallpaperApp}"
+            disabled="[[isWallpaperPolicyControlled_]]">
           <template is="dom-if" if="[[isWallpaperPolicyControlled_]]">
             <cr-policy-indicator id="wallpaperPolicyIndicator"
                 indicator-type="devicePolicy">
             </cr-policy-indicator>
           </template>
-          <button class="icon-external" id="showWallpaperManager"
-              is="paper-icon-button-light" aria-label="$i18n{setWallpaper}"
-              disabled="[[isWallpaperPolicyControlled_]]"
-              aria-describedby="wallpaperSecondary">
-          </button>
-        </div>
-        <div class="settings-box two-line"
-            hidden="[[!pageVisibility.setTheme]]">
+        </button>
+        <div class="hr"></div>
 </if>
-<if expr="not chromeos">
-        <div class="settings-box two-line first"
+        <div class="settings-row continuation" id="themeRow"
             hidden="[[!pageVisibility.setTheme]]">
-</if>
-          <a class="start two-line inherit-color no-outline" tabindex="-1"
-              target="_blank" href$="[[getThemeHref_(themeUrl_)]]">
-            <div class="flex">
-              $i18n{themes}
-              <div class="secondary" id="themesSecondary">
-                [[themeSublabel_]]
-              </div>
-            </div>
-            <button class="icon-external" is="paper-icon-button-light"
-                actionable aria-label="$i18n{themes}"
-                aria-describedby="themesSecondary">
-            </button>
-          </a>
+          <button class="first" icon-class="icon-external" is="cr-link-row"
+              hidden="[[!pageVisibility.setTheme]]"
+              label="$i18n{themes}" sub-label="[[themeSublabel_]]"
+              on-tap="openThemeUrl_"></button>
 <if expr="not is_linux or chromeos">
           <template is="dom-if" if="[[prefs.extensions.theme.id.value]]">
             <div class="separator"></div>
@@ -92,7 +87,8 @@
           </template>
 </if>
 <if expr="is_linux and not chromeos">
-          <div class="settings-row" hidden="[[!showThemesSecondary_(
+          <div class="settings-row continuation"
+              hidden="[[!showThemesSecondary_(
               prefs.extensions.theme.id.value, useSystemTheme_)]]"
               id="themesSecondaryActions">
             <div class="separator"></div>
@@ -170,7 +166,7 @@
               menu-options="[[fontSizeOptions_]]">
           </settings-dropdown-menu>
         </div>
-        <button is="cr-link-row"
+        <button class="hr" is="cr-link-row"
             icon-class="subpage-arrow" id="customize-fonts-subpage-trigger"
             label="$i18n{customizeFonts}" on-tap="onCustomizeFontsTap_">
         </button>

chrome/browser/resources/settings/appearance_page/appearance_page.js

@@ -197,12 +197,11 @@ Polymer({
   },
 
   /**
-   * URL for either current theme or the theme gallery.
-   * @return {string}
+   * Open URL for either current theme or the theme gallery.
    * @private
    */
-  getThemeHref_: function() {
-    return this.themeUrl_ || loadTimeData.getString('themesGalleryUrl');
+  openThemeUrl_: function() {
+    window.open(this.themeUrl_ || loadTimeData.getString('themesGalleryUrl'));
   },
 
   // <if expr="chromeos">

chrome/browser/resources/settings/device_page/display.html

@@ -170,7 +170,7 @@ <h2>[[selectedDisplay.name]]</h2>
         </div>
       </template>
 
-      <button is="cr-link-row" icon-class="subpage-arrow" class="indented"
+      <button is="cr-link-row" icon-class="subpage-arrow" class="indented hr"
           id="overscan" label="$i18n{displayOverscanPageTitle}"
           sub-label="$i18n{displayOverscanPageText}" on-tap="onOverscanTap_">
       </button>

chrome/browser/resources/settings/settings_shared_css.html

@@ -90,7 +90,7 @@
       }
 
       /* Adjust the margin between the separator and the first button. */
-      .settings-box .separator + paper-button {
+      .separator + paper-button {
         -webkit-margin-start: calc(var(--cr-button-edge-spacing) * -1);
       }
 
@@ -339,7 +339,7 @@
       /* The separator a vertical line like a horizontal rule <hr> tag, but goes
        * the other way. An example is near the |sign out| button on the People
        * settings. */
-      :-webkit-any(.settings-box, .list-item) .separator {
+      .separator {
         -webkit-border-start: var(--settings-separator-line);
         -webkit-margin-end: var(--settings-box-row-padding);
         -webkit-margin-start: var(--settings-box-row-padding);
@@ -349,7 +349,7 @@
             var(--settings-separator-gaps));
       }
 
-      :-webkit-any(.settings-box, .list-item).two-line .separator {
+      .two-line .separator {
         height: calc(var(--settings-row-two-line-min-height) -
             2 * var(--settings-separator-gaps));
       }

chrome/test/data/webui/settings/appearance_page_test.js

@@ -149,10 +149,18 @@ suite('AppearanceHandler', function() {
 
   if (cr.isChromeOS) {
     test('wallpaperManager', function() {
-      var button = appearancePage.$.wallpaperButton;
-      assertTrue(!!button);
-      MockInteractions.tap(button);
-      return appearanceBrowserProxy.whenCalled('openWallpaperManager');
+      appearanceBrowserProxy.setIsWallpaperPolicyControlled(false);
+      // TODO(dschuyler): This should notice the policy change without needing
+      // the page to be recreated.
+      createAppearancePage();
+      return appearanceBrowserProxy.whenCalled('isWallpaperPolicyControlled')
+          .then(() => {
+            var button = appearancePage.$.wallpaperButton;
+            assertTrue(!!button);
+            assertFalse(button.disabled);
+            MockInteractions.tap(button);
+            return appearanceBrowserProxy.whenCalled('openWallpaperManager');
+          });
     });
 
     test('wallpaperSettingVisible', function() {
@@ -173,7 +181,7 @@ suite('AppearanceHandler', function() {
           .then(function() {
             Polymer.dom.flush();
             assertFalse(appearancePage.$$('#wallpaperPolicyIndicator').hidden);
-            assertTrue(appearancePage.$$('#showWallpaperManager').disabled);
+            assertTrue(appearancePage.$$('#wallpaperButton').disabled);
           });
     });
   } else {

ui/webui/resources/cr_elements/cr_link_row/cr_link_row.html

@@ -10,23 +10,21 @@
   <template strip-whitespace="">
     <style include="cr-hidden-style cr-icons">
       :host {
+        align-items: center;
         align-self: stretch;
         background: none;
         border: none;
         color: inherit;
         cursor: pointer;
+        display: flex;
+        flex: 1;
         font-size: 100%;  /* Specifically for Mac OSX, harmless elsewhere. */
         line-height: 154%;  /* 20px. */
         margin: 0;
+        min-height: var(--cr-section-min-height);
         outline: none;
-        padding: 0;
+        padding: 0 var(--cr-section-padding);
         position: relative;
-        @apply(--cr-section);
-      }
-
-      :host(.continuation),
-      :host(.first) {
-        border-top: none;
       }
 
       :host([disabled]) {
@@ -77,6 +75,7 @@
         <div id="label" class="label">[[label]]</div>
         <div id="subLabel" class="secondary label">[[subLabel]]</div>
       </div>
+      <slot></slot>
       <div id="icon" class$="cr-icon [[iconClass]]" aria-label$="[[label]]">
       </div>
     </div>

ui/webui/resources/cr_elements/shared_style_css.html

@@ -57,6 +57,11 @@
         display: block;
       }
 
+      /* Horizontal rule line. */
+      .hr {
+        border-top: var(--cr-separator-line);
+      }
+
       [scrollable] {
         border-color: transparent;
         border-style: solid;