WebUI: Replace --cr-form-field-label with a cr-form-field-label class

https://imgur.com/a/x0iNkYr Bug: 973674 Change-Id: I817474ff3a681f625c86be9cc1e6eb57f04eea26 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1700260Reviewed-by: Luciano Pacheco <lucmult@chromium.org> Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org> Commit-Queue: John Lee <johntlee@chromium.org> Cr-Commit-Position: refs/heads/master@{#678381}

WebUI: Replace --cr-form-field-label with a cr-form-field-label class
https://imgur.com/a/x0iNkYr Bug: 973674 Change-Id: I817474ff3a681f625c86be9cc1e6eb57f04eea26 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1700260Reviewed-by: Luciano Pacheco <lucmult@chromium.org> Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org> Commit-Queue: John Lee <johntlee@chromium.org> Cr-Commit-Position: refs/heads/master@{#678381}
e2e7a400 · John Lee · Commit Bot · c49f8dba · e2e7a400 · e2e7a400
Commit e2e7a400 authored Jul 17, 2019 by John Lee Committed by Commit Bot Jul 17, 2019
17 changed files
--- a/chrome/browser/resources/chromeos/password_change/confirm_password_change.html
+++ b/chrome/browser/resources/chromeos/password_change/confirm_password_change.html
@@ -29,10 +29,6 @@
          width: 100%;
        }
-        .label {
-          @apply --cr-form-field-label;
-        }
        #prompt {
          margin-bottom: 20px;
        }
@@ -95,4 +91,4 @@
 <body>
  <confirm-password-change id="main-element"></confirm-password-change>
 </body>
 </html>
\ No newline at end of file
--- a/chrome/browser/resources/settings/autofill_page/address_edit_dialog.html
+++ b/chrome/browser/resources/settings/autofill_page/address_edit_dialog.html
@@ -3,6 +3,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
@@ -13,7 +14,7 @@
 <dom-module id="settings-address-edit-dialog">
  <template>
-    <style include="settings-shared md-select">
+    <style include="cr-shared-style settings-shared md-select">
      :host {
        white-space: nowrap;
      }
@@ -37,14 +38,6 @@
        --md-select-width: var(--settings-input-max-width);
      }
-      #select-label {
-        @apply --cr-form-field-label;
-      }
-      :host-context([dir=rtl]) #select-label {
-        transform-origin: right;
-      }
      .long {
        width: var(--settings-input-max-width);
      }
@@ -93,7 +86,9 @@
          </div>
        </template>
        <div id="select-row" class="address-row">
-          <div id="select-label">$i18n{addressCountry}</div>
+          <label id="select-label" class="cr-form-field-label">
+            $i18n{addressCountry}
+          </label>
          <select class="md-select" aria-labelledby="select-label"
              value="[[countryCode_]]" on-change="onCountryChange_">
            <option value=""></option>

--- a/chrome/browser/resources/settings/autofill_page/credit_card_edit_dialog.html
+++ b/chrome/browser/resources/settings/autofill_page/credit_card_edit_dialog.html
@@ -3,6 +3,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/md_select_css.html">
@@ -11,7 +12,7 @@
 <dom-module id="settings-credit-card-edit-dialog">
  <template>
-    <style include="settings-shared md-select">
+    <style include="cr-shared-style settings-shared md-select">
      cr-input {
        --cr-input-error-display: none;
        margin-bottom: var(--cr-form-field-bottom-spacing);
@@ -56,10 +57,6 @@
      #year {
        width: 100px;
      }
-      label {
-        @apply --cr-form-field-label;
-      }
    </style>
    <cr-dialog id="dialog" close-text="$i18n{close}">
      <div slot="title">[[title_]]</div>
@@ -72,10 +69,12 @@
            value="{{creditCard.cardNumber}}"
            on-input="onCreditCardNameOrNumberChanged_">
        </cr-input>
-        <label>$i18n{creditCardExpiration}</label>
+        <label id="creditCardExpiration" class="cr-form-field-label">
+          $i18n{creditCardExpiration}
+        </label>
        <select class="md-select" id="month" value="[[expirationMonth_]]"
            on-change="onMonthChange_"
-            aria-label="$i18n{creditCardExpirationMonth}">
+            aria-labelledby="creditCardExpiration">
          <template is="dom-repeat" items="[[monthList_]]">
            <option>[[item]]</option>
          </template>

--- a/chrome/browser/resources/settings/controls/settings_textarea.html
+++ b/chrome/browser/resources/settings/controls/settings_textarea.html
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input_style_css.html">
 <dom-module id="settings-textarea">
  <template>
-    <style include="cr-hidden-style cr-input-style">
+    <style include="cr-hidden-style cr-input-style cr-shared-style">
      textarea {
        display: block;
        resize: none;
@@ -19,7 +20,9 @@
        position: static;
      }
    </style>
-    <div id="label" hidden="[[!label]]">[[label]]</div>
+    <div id="label" class="cr-form-field-label" hidden="[[!label]]">
+      [[label]]
+    </div>
    <div id="input-container">
      <!-- The textarea is limited to |rows| height. If the content exceeds the
           bounds, it scrolls by default. No space or comments are allowed

--- a/chrome/browser/resources/settings/people_page/kerberos_add_account_dialog.html
+++ b/chrome/browser/resources/settings/people_page/kerberos_add_account_dialog.html
@@ -19,10 +19,6 @@
 <dom-module id="kerberos-add-account-dialog">
  <template>
    <style include="settings-shared action-link">
-      .label {
-        @apply --cr-form-field-label;
-      }
      #advancedConfigDesc {
        align-items: center;
        display: flex;
@@ -141,4 +137,4 @@
    </template>
  </template>
  <script src="kerberos_add_account_dialog.js"></script>
 </dom-module>
\ No newline at end of file
--- a/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog.html
+++ b/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog.html
@@ -4,6 +4,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.html">
 <link rel="import" href="chrome://resources/cr_elements/md_select_css.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">
@@ -15,7 +16,7 @@
 <dom-module id="add-printer-discovery-dialog">
  <template>
-    <style include="cups-printer-shared">
+    <style include="cr-shared-style cups-printer-shared">
      add-printer-list {
        max-height: 310px;
        overflow-y: auto;
@@ -101,7 +102,9 @@
        </div>
        <div class="settings-box two-line">
          <div class="start">
-            <div id="printerProtocol" class="label">$i18n{printerProtocol}</div>
+            <div id="printerProtocol" class="cr-form-field-label">
+              $i18n{printerProtocol}
+            </div>
            <div class="secondary">
              <select class="md-select" aria-labelledby="printerProtocol"
                  value="[[newPrinter.printerProtocol]]"
@@ -186,7 +189,7 @@
              value="{{activePrinter.ppdModel}}">
          </cr-searchable-drop-down>
        </div>
-        <div id="ppdLabel" class="field-label">
+        <div id="ppdLabel" class="cr-form-field-label">
          <span>$i18n{selectDriver}</span>
          <a href="$i18n{printingCUPSPrintPpdLearnMoreUrl}" target="_blank">
              $i18n{learnMore}

--- a/chrome/browser/resources/settings/printing_page/cups_edit_printer_dialog.html
+++ b/chrome/browser/resources/settings/printing_page/cups_edit_printer_dialog.html
@@ -6,6 +6,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_scrollable_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/html/chromeos/onc_mojo.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="cups_add_printer_dialog_elements.html">
@@ -15,7 +16,7 @@
 <dom-module id="settings-cups-edit-printer-dialog">
  <template>
-    <style include="cups-printer-shared"></style>
+    <style include="cr-shared-style cups-printer-shared"></style>
    <add-printer-dialog>
      <div slot="dialog-title">$i18n{editPrinterDialogTitle}
        <div id="general-error-container" hidden="[[!errorText_]]">
@@ -49,7 +50,9 @@
        </div>
        <div class="settings-box two-line">
          <div class="start">
-            <div id="printerProtocol" class="label">$i18n{printerProtocol}</div>
+            <div id="printerProtocol" class="cr-form-field-label">
+              $i18n{printerProtocol}
+            </div>
            <div class="secondary">
              <select class="md-select" aria-labelledby="printerProtocol"
                  value="[[pendingPrinter_.printerProtocol]]"
@@ -114,7 +117,7 @@
              readonly="[[!isOnline_]]">
          </cr-searchable-drop-down>
        </div>
-        <div id="ppdLabel" class="field-label">
+        <div id="ppdLabel" class="cr-form-field-label">
          <span>$i18n{selectDriver}</span>
          <a href="$i18n{printingCUPSPrintPpdLearnMoreUrl}" target="_blank">
              $i18n{learnMore}

--- a/chrome/browser/resources/settings/printing_page/cups_printer_shared_css.html
+++ b/chrome/browser/resources/settings/printing_page/cups_printer_shared_css.html
@@ -17,10 +17,6 @@
        align-items: flex-start;
      }
-      [slot='dialog-body'] .settings-box .start .label {
-        @apply --cr-form-field-label;
-      }
      [slot='dialog-body'] .settings-box cr-input {
        width: 100%;
      }
@@ -94,9 +90,8 @@
        font: inherit;
      }
-      .field-label {
+      #ppdLabel {
        padding-inline-start: 20px;
-        @apply --cr-form-field-label;
      }
      #general-error-container {

--- a/chrome/test/data/webui/cr_elements/cr_input_test.js
+++ b/chrome/test/data/webui/cr_elements/cr_input_test.js
@@ -146,7 +146,7 @@ suite('cr-input', function() {
    assertEquals('none', getComputedStyle(crInput.$.label).display);
    crInput.label = 'foobar';
    assertEquals('block', getComputedStyle(crInput.$.label).display);
-    assertEquals('foobar', label.textContent);
+    assertEquals('foobar', label.textContent.trim());
  });
  test('valueSetCorrectly', function() {

--- a/chrome/test/data/webui/settings/settings_textarea_tests.js
+++ b/chrome/test/data/webui/settings/settings_textarea_tests.js
@@ -38,7 +38,7 @@ suite('SettingsTextarea', function() {
    assertTrue(label.hidden);
    settingsTextarea.label = 'foobar';
    assertFalse(label.hidden);
-    assertEquals('foobar', label.textContent);
+    assertEquals('foobar', label.textContent.trim());
    assertEquals('foobar', textarea.getAttribute('aria-label'));
  });

--- a/ui/file_manager/file_manager/foreground/elements/files_format_dialog.html
+++ b/ui/file_manager/file_manager/foreground/elements/files_format_dialog.html
@@ -11,20 +11,17 @@
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/cr_elements/md_select_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <dom-module id="files-format-dialog">
  <template>
-    <style include="md-select">
+    <style include="cr-shared-style md-select">
      .md-select {
        width: 100%;
      }
-      .label {
-        @apply --cr-form-field-label;
-      }
      [slot='body'] > div {
        margin-bottom: var(--cr-form-field-bottom-spacing);
      }
@@ -57,9 +54,9 @@
            id="label" value="{{label_}}" auto-validate="true">
        </cr-input>
        <div id="disk-format">
-          <div id="format-type-label" class="label">
+          <label id="format-type-label" class="cr-form-field-label">
            [[i18n('FORMAT_DIALOG_FORMAT_LABEL')]]
-          </div>
+          </label>
          <select class="md-select" aria-labelledby="format-type-label"
              value="{{formatType_::change}}">
            <option value="vfat">FAT32</option>

--- a/ui/webui/resources/cr_components/chromeos/network/network_config_select.html
+++ b/ui/webui/resources/cr_components/chromeos/network/network_config_select.html
@@ -4,22 +4,19 @@
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_indicator.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_tooltip_icon.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/md_select_css.html">
 <link rel="import" href="network_config_element_behavior.html">
 <link rel="import" href="network_shared_css.html">
 <dom-module id="network-config-select">
  <template>
-    <style include="network-shared md-select">
+    <style include="cr-shared-style network-shared md-select">
      .md-select {
        color: var(--cr-primary-text-color);
        width: 100%;
      }
-      #label {
-        @apply --cr-form-field-label;
-      }
      #outer {
        align-items: stretch;
        display: flex;
@@ -41,7 +38,7 @@
    </style>
    <div id="outer">
-      <div id="label">[[label]]</div>
+      <div id="label" class="cr-form-field-label">[[label]]</div>
      <div id="inner">
        <select class="md-select"
            disabled="[[getDisabled_(disabled, property)]]"

--- a/ui/webui/resources/cr_components/chromeos/smb_shares/add_smb_share_dialog.html
+++ b/ui/webui/resources/cr_components/chromeos/smb_shares/add_smb_share_dialog.html
@@ -6,6 +6,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/md_select_css.html">
@@ -15,7 +16,7 @@
 <dom-module id="add-smb-share-dialog">
  <template>
-    <style include="md-select">
+    <style include="cr-shared-style md-select">
      #dialog [slot=body] {
        height: 440px;
      }
@@ -24,10 +25,6 @@
        width: 100%;
      }
-      .label {
-        @apply --cr-form-field-label;
-      }
      cr-searchable-drop-down {
        display: block;
      }
@@ -86,9 +83,9 @@
            value="{{mountName_}}" maxlength="64">
        </cr-input>
        <div id="authentication-method" hidden="[[!isActiveDirectory_]]">
-          <div id="authentication-label" class="label">
+          <label id="authentication-label" class="cr-form-field-label">
            [[i18n('smbShareAuthenticationMethod')]]
-          </div>
+          </label>
          <select class="md-select" aria-labelledby="authentication-label"
              value="{{authenticationMethod_::change}}">
            <option value="kerberos">

--- a/ui/webui/resources/cr_elements/cr_input/cr_input.html
+++ b/ui/webui/resources/cr_elements/cr_input/cr_input.html
@@ -3,12 +3,13 @@
 <link rel="import" href="../../html/assert.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 <link rel="import" href="../hidden_style_css.html">
+<link rel="import" href="../shared_style_css.html">
 <link rel="import" href="../shared_vars_css.html">
 <link rel="import" href="cr_input_style_css.html">
 <dom-module id="cr-input">
  <template>
-    <style include="cr-hidden-style cr-input-style">
+    <style include="cr-hidden-style cr-input-style cr-shared-style">
      /*
        A 'suffix' element will be outside the underlined space, while a
        'prefix' element will be inside the underlined space by default.
@@ -103,7 +104,10 @@
        -webkit-appearance: none;
      }
    </style>
-    <div id="label" hidden="[[!label]]" aria-hidden="true">[[label]]</div>
+    <div id="label" class="cr-form-field-label" hidden="[[!label]]"
+        aria-hidden="true">
+      [[label]]
+    </div>
    <div id="row-container" part="row-container">
      <div id="input-container">
        <div id="inner-input-container">

--- a/ui/webui/resources/cr_elements/cr_input/cr_input_style_css.html
+++ b/ui/webui/resources/cr_elements/cr_input/cr_input_style_css.html
@@ -27,11 +27,6 @@
        }
      }
-      /* Label styling below. */
-      #label {
-        @apply --cr-form-field-label;
-      }
      :host([focused_]:not([readonly]):not([invalid])) #label {
        color: var(--cr-input-focus-color);
      }

--- a/ui/webui/resources/cr_elements/shared_style_css.html
+++ b/ui/webui/resources/cr_elements/shared_style_css.html
@@ -100,6 +100,16 @@
      #cr-container-shadow-bottom.has-shadow {
        opacity: var(--cr-container-shadow-max-opacity);
      }
+      .cr-form-field-label {
+        color: var(--cr-form-field-label-color);
+        display: block;
+        font-size: var(--cr-form-field-label-font-size);
+        font-weight: 500;
+        letter-spacing: .4px;
+        line-height: var(--cr-form-field-label-line-height);
+        margin-bottom: 8px;
+      }
    </style>
  </template>
 </dom-module>
--- a/ui/webui/resources/cr_elements/shared_vars_css.html
+++ b/ui/webui/resources/cr_elements/shared_vars_css.html
@@ -245,15 +245,6 @@
    --cr-form-field-label-font-size: .625rem;
    --cr-form-field-label-height: 1em;
    --cr-form-field-label-line-height: 1em;
-    --cr-form-field-label: {
-      color: var(--cr-form-field-label-color);
-      display: block;
-      font-size: var(--cr-form-field-label-font-size);
-      font-weight: 500;
-      letter-spacing: .4px;
-      line-height: var(--cr-form-field-label-line-height);
-      margin-bottom: 8px;
-    }
  }
 </style>
 </custom-style>