chrome/browser/resources/settings/controls/settings_toggle_button.html

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="settings_boolean_control_behavior.html">
<link rel="import" href="../settings_shared_css.html">

<dom-module id="settings-toggle-button">
  <template>
    <style include="settings-shared iron-flex">
      :host {
        align-items: center;
        display: flex;
        padding: 0 var(--cr-section-padding);
      }

      :host([elide-label]),
      :host([elide-label]) #outerRow,
      :host([elide-label]) #outerRow > div.flex {
        min-width: 0;
      }

      :host([elide-label]) .label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      #outerRow {
        align-items: center;
        display: flex;
        min-height: var(--settings-row-two-line-min-height);
        width: 100%;
      }

      #outerRow[noSubLabel] {
        min-height: var(--settings-row-min-height);
      }

      #labelWrapper {
        padding: var(--cr-section-vertical-padding) 0;
      }

      #labelWrapper,
      ::slotted([slot='more-actions']) {
        margin-inline-end: var(--settings-control-label-spacing) !important;
      }

      cr-policy-pref-indicator {
        margin-inline-end: var(--settings-controlled-by-spacing);
      }
    </style>
    <div id="outerRow" noSubLabel$="[[!subLabel]]">
      <div class="flex" id="labelWrapper" hidden$="[[!label]]">
        <div class="label" aria-hidden="true">[[label]]</div>
        <div class="secondary label" id="sub-label">
          <span id="sub-label-text" aria-hidden="true">
            [[subLabel]]
          </span>
          <template is="dom-if" if="[[learnMoreUrl]]">
            <a id="learn-more" href="[[learnMoreUrl]]" target="_blank"
                aria-labeledby="sub-label-text learn-more"
                on-click="onLearnMoreClicked_">
              $i18n{learnMore}
            </a>
          </template>
        </div>
      </div>
      <slot name="more-actions"></slot>
      <template is="dom-if" if="[[hasPrefPolicyIndicator(pref.*)]]">
        <cr-policy-pref-indicator pref="[[pref]]" icon-aria-label="[[label]]">
        </cr-policy-pref-indicator>
      </template>
      <cr-toggle id="control" checked="{{checked}}"
          on-change="onChange_"
          aria-label$="[[getAriaLabel_(label, ariaLabel)]]"
          aria-describedby="sub-label-text"
          disabled="[[controlDisabled(disabled, pref)]]">
      </cr-toggle>
    </div>
  </template>
  <script src="settings_toggle_button.js"></script>
</dom-module>