[MD settings] css for row separator

This CL adds CSS for .separator which is a grey separator line
between controls on a row (e.g. settings-box). The intent is to replace
.secondary-action (a TODO has been added to that effect). This initial
CL changes the separator lines seen in the basic main page of MD
settings.

(a step to fix, but not complete fix).
BUG=714320
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2847583002
Cr-Commit-Position: refs/heads/master@{#468471}

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

@@ -75,17 +75,18 @@
           </a>
 <if expr="not is_linux or chromeos">
           <template is="dom-if" if="[[prefs.extensions.theme.id.value]]">
-            <div class="secondary-action">
-              <paper-button id="useDefault" on-tap="onUseDefaultTap_"
-                  class="secondary-button">
-                $i18n{resetToDefaultTheme}
-              </paper-button>
-            </div>
+            <div class="separator"></div>
+            <paper-button id="useDefault" on-tap="onUseDefaultTap_"
+                class="secondary-button">
+              $i18n{resetToDefaultTheme}
+            </paper-button>
           </template>
 </if>
 <if expr="is_linux and not chromeos">
-          <div class="secondary-action" hidden="[[!showThemesSecondary_(
-            prefs.extensions.theme.id.value, useSystemTheme_)]]">
+          <div class="layout horizontal center" hidden="[[!showThemesSecondary_(
+              prefs.extensions.theme.id.value, useSystemTheme_)]]"
+              id="themesSecondaryActions">
+            <div class="separator"></div>
             <template is="dom-if" if="[[showUseClassic_(
                 prefs.extensions.theme.id.value, useSystemTheme_)]]" restamp>
               <paper-button id="useDefault" on-tap="onUseDefaultTap_"
@@ -177,7 +178,7 @@
         <div class="settings-box" hidden="[[!pageVisibility.pageZoom]]">
           <div id="pageZoom" class="start">$i18n{pageZoom}</div>
           <div class="md-select-wrapper">
-            <select id="zoomLevel" class="md-select" aria-labelledy="pageZoom"
+            <select id="zoomLevel" class="md-select" aria-labelledby="pageZoom"
                 on-change="onZoomLevelChange_">
               <template is="dom-repeat" items="[[pageZoomLevels_]]">
                 <option value="[[item]]"

chrome/browser/resources/settings/default_browser_page/default_browser_page.html

@@ -14,12 +14,11 @@
           <div id="canBeDefaultBrowser">$i18n{defaultBrowser}</div>
           <div class="secondary">$i18n{defaultBrowserMakeDefault}</div>
         </div>
-        <div class="secondary-action">
-          <paper-button class="secondary-button"
-              on-tap="onSetDefaultBrowserTap_">
-            $i18n{defaultBrowserMakeDefaultButton}
-          </paper-button>
-        </div>
+        <div class="separator"></div>
+        <paper-button class="secondary-button"
+            on-tap="onSetDefaultBrowserTap_">
+          $i18n{defaultBrowserMakeDefaultButton}
+        </paper-button>
       </div>
     </template>
     <template is="dom-if" if="[[!maySetDefaultBrowser_]]">

chrome/browser/resources/settings/people_page/people_page.html

@@ -124,21 +124,19 @@
             </div>
 <if expr="not chromeos">
             <template is="dom-if" if="[[showSignin_(syncStatus)]]">
-              <span class="secondary-action">
-                <paper-button class="primary-button" on-tap="onSigninTap_"
-                    disabled="[[syncStatus.setupInProgress]]">
-                  $i18n{syncSignin}
-                </paper-button>
-              </span>
+              <div class="separator"></div>
+              <paper-button class="primary-button" on-tap="onSigninTap_"
+                  disabled="[[syncStatus.setupInProgress]]">
+                $i18n{syncSignin}
+              </paper-button>
             </template>
             <template is="dom-if" if="[[syncStatus.signedIn]]">
-              <span class="secondary-action">
-                <paper-button id="disconnectButton" class="secondary-button"
-                    on-tap="onDisconnectTap_"
-                    disabled="[[syncStatus.setupInProgress]]">
-                  $i18n{syncDisconnect}
-                </paper-button>
-              </span>
+              <div class="separator"></div>
+              <paper-button id="disconnectButton" class="secondary-button"
+                  on-tap="onDisconnectTap_"
+                  disabled="[[syncStatus.setupInProgress]]">
+                $i18n{syncDisconnect}
+              </paper-button>
             </template>
 </if>
           </template>

chrome/browser/resources/settings/settings_shared_css.html

@@ -320,8 +320,8 @@
         outline: none;
       }
 
-      /* The secondary-action wraps a clickable sub-area of a .settings-box.
-       * An example is the |sign out| button on the People settings.
+      /* TODO(dschuyler): replace with .separator.
+       * The secondary-action wraps a clickable sub-area of a .settings-box.
        * Here is an example with and without a secondary action box:
        *
        *  +-------------------------------------------------------+
@@ -348,6 +348,24 @@
         border-top: var(--settings-separator-line);
       }
 
+      /* 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 {
+        -webkit-border-start: var(--settings-separator-line);
+        -webkit-margin-end: var(--settings-box-row-padding);
+        -webkit-margin-start: var(--settings-box-row-padding);
+        flex-shrink: 0;
+        --settings-separator-gaps: 9px;
+        height: calc(var(--settings-row-min-height) -
+            var(--settings-separator-gaps));
+      }
+
+      :-webkit-any(.settings-box, .list-item).two-line .separator {
+        height: calc(var(--settings-row-two-line-min-height) -
+            2 * var(--settings-separator-gaps));
+      }
+
       .settings-checkbox-spacer {
         -webkit-margin-start: calc(
             var(--checkbox-margin-start) +

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

@@ -181,14 +181,14 @@ suite('AppearanceHandler', function() {
       assertFalse(!!appearancePage.$$('#useDefault'));
       assertFalse(!!appearancePage.$$('#useSystem'));
       // If there's no "USE" buttons, the container should be hidden.
-      assertTrue(appearancePage.$$('.secondary-action').hidden);
+      assertTrue(appearancePage.$$('#themesSecondaryActions').hidden);
 
       appearanceBrowserProxy.setIsSupervised(false);
       appearancePage.set(THEME_ID_PREF, 'fake theme id');
       Polymer.dom.flush();
       // If there's "USE" buttons again, the container should be visible.
       assertTrue(!!appearancePage.$$('#useDefault'));
-      assertFalse(appearancePage.$$('.secondary-action').hidden);
+      assertFalse(appearancePage.$$('#themesSecondaryActions').hidden);
 
       var button = appearancePage.$$('#useSystem');
       assertTrue(!!button);