chromium/chrome/browser/resources/ash/settings/multidevice_page/multidevice_page.html

<style include="settings-shared">
  cr-policy-indicator {
    padding: 0 var(--cr-controlled-by-spacing);
  }

  :host-context(body.revamp-wayfinding-enabled) #betterTogetherSuiteIcon,
  :host-context(body.revamp-wayfinding-enabled) #nearbyShareIcon {
    --iron-icon-fill-color: var(--cros-sys-primary);
  }
</style>

<os-settings-animated-pages id="pages" section="[[section_]]">
  <div route-path="default">
    <settings-card header-text="$i18n{multidevicePageTitle}">
      <div id="multideviceItem"
          class="settings-box first two-line no-padding">
        <div class="link-wrapper" id="suiteLinkWrapper"
            actionable$="[[doesClickOpenSubpage_(pageContentData)]]"
            on-click="handleItemClick_">
          <iron-icon
              id="betterTogetherSuiteIcon"
              icon="[[getIconName(MultiDeviceFeature.BETTER_TOGETHER_SUITE)]]">
          </iron-icon>
          <div class="middle settings-box-text"
              aria-hidden$="[[getTextAriaHidden_(pageContentData)]]">
            <div id="multideviceLabel">
              [[getLabelText_(pageContentData)]]
            </div>
            <localized-link id="multideviceSubLabel"
                class="secondary"
                localized-string="[[getSubLabelInnerHtml_(pageContentData)]]">
            </localized-link>
          </div>
          <template is="dom-if"
                    if="[[doesClickOpenSubpage_(pageContentData)]]"
                    restamp>
            <cr-icon-button class="subpage-arrow"
                aria-labelledby="multideviceLabel"
                aria-describedby="multideviceSubLabel"
                aria-roledescription="$i18n{subpageArrowRoleDescription}">
            </cr-icon-button>
          </template>
        </div>
        <template is="dom-if"
                  if="[[!isSuiteAllowedByPolicy(pageContentData)]]"
                  restamp>
          <cr-policy-indicator id="suitePolicyIndicator"
              indicator-type="userPolicy">
          </cr-policy-indicator>
          <settings-multidevice-feature-toggle
              class="margin-matches-padding"
              toggle-aria-label="$i18n{multideviceSuiteToggleA11yLabel}"
              feature="[[MultiDeviceFeature.BETTER_TOGETHER_SUITE]]"
              page-content-data="[[pageContentData]]"
              deep-link-focus-id$="[[Setting.kMultiDeviceOnOff]]">
          </settings-multidevice-feature-toggle>
        </template>
        <template is="dom-if"
            if="[[shouldShowSeparatorAndSubpageArrow_(pageContentData)]]"
            restamp>
          <div class="separator"></div>
        </template>
        <template is="dom-if"
            if="[[shouldShowButton_(pageContentData)]]"
            restamp>
          <cr-button class="margin-matches-padding"
              on-click="handleButtonClick_"
              aria-label="[[getButtonA11yLabel_(pageContentData)]]"
              deep-link-focus-id$="[[Setting.kSetUpMultiDevice]]
                  [[Setting.kVerifyMultiDeviceSetup]]">
            [[getButtonText_(pageContentData)]]
          </cr-button>
        </template>
        <template is="dom-if"
            if="[[shouldShowToggle_(pageContentData)]]"
            restamp>
          <settings-multidevice-feature-toggle
              class="margin-matches-padding"
              toggle-aria-label="$i18n{multideviceSuiteToggleA11yLabel}"
              feature="[[MultiDeviceFeature.BETTER_TOGETHER_SUITE]]"
              page-content-data="[[pageContentData]]"
              deep-link-focus-id$="[[Setting.kMultiDeviceOnOff]]">
          </settings-multidevice-feature-toggle>
        </template>
      </div>
      <template is="dom-if" if="[[isNearbyShareSupported_]]" restamp>
        <div id="nearbyshare-item" class="settings-box two-line no-padding">
          <div class="link-wrapper" id="nearbyLinkWrapper"
              actionable$=
                  "[[!isNearbyShareDisallowedByPolicy_(pageContentData)]]"
              on-click="nearbyShareClick_">
            <if expr="_google_chrome">
              <template is="dom-if" if="[[isNameEnabled_]]" restamp>
                <iron-icon id="nearbyShareIcon"
                    icon="nearby-share-internal:nearby-share">
                </iron-icon>
              </template>
              <template is="dom-if" if="[[!isNameEnabled_]]" restamp>
                <iron-icon id="nearbyShareIcon"
                    icon="os-settings:nearby-share">
                </iron-icon>
              </template>
            </if>
            <if expr="not _google_chrome">
              <iron-icon id="nearbyShareIcon"
                  icon="os-settings:nearby-share">
              </iron-icon>
            </if>
            <div class="middle settings-box-text">
              <div id="nearbyShareLabel" aria-hidden="true">
                $i18n{nearbyShareTitle}
              </div>
              <template is="dom-if" if="[[showNearbyShareOnOffString_(
                        prefs.nearby_sharing.onboarding_complete.value,
                        pageContentData)]]" restamp>
                  <template is="dom-if" if="[[prefs.nearby_sharing.enabled.value]]">
                    <div class="secondary" id="nearbyShareSecondary">
                    [[getNearbyShareDescription_(settings.visibility)]]
                  </div>
                  </template>
                  <template is="dom-if" if="[[!prefs.nearby_sharing.enabled.value]]">
                    <div class="secondary" id="nearbyShareSecondary">
                      <localized-link
                        localized-string="$i18n{nearbyShareDescriptionOff}"
                        link-url="$i18n{nearbyShareLearnMoreLink}">
                      </localized-link>
                    </div>
                  </template>
              </template>
              <template is="dom-if" if="[[showNearbyShareSetUpDescription_(
                        prefs.nearby_sharing.onboarding_complete.value,
                        pageContentData)]]" restamp>
                <div class="secondary" id="nearbyShareSecondary">
                  <localized-link
                      id="setupDescription"
                      localized-string="$i18n{nearbyShareDescription}"
                      link-url="$i18n{nearbyShareLearnMoreLink}">
                  </localized-link>
                </div>
              </template>
            </div>
            <template is="dom-if" if="[[shouldShowNearbyShareSubpageArrow_(
                prefs.nearby_sharing.enabled.value,
                shouldEnableNearbyShareBackgroundScanningRevamp_,
                pageContentData)]]" restamp>
              <cr-icon-button id="nearbyShareSubpageArrow"
                  class="subpage-arrow"
                  aria-labelledby="nearbyShareLabel"
                  aria-describedby="nearbyShareSecondary"
                  aria-roledescription="$i18n{subpageArrowRoleDescription}">
              </cr-icon-button>
            </template>
          </div>
          <template is="dom-if"
              if="[[isNearbyShareDisallowedByPolicy_(pageContentData)]]"
              restamp>
            <cr-policy-indicator id="nearbyPolicyIndicator"
                                  indicator-type="userPolicy">
            </cr-policy-indicator>
          </template>
          <template is="dom-if"
              if="[[!isNearbyShareDisallowedByPolicy_(pageContentData)]]"
              restamp>
            <div class="separator"></div>
          </template>
          <template is="dom-if" if="[[showNearbyShareToggle_(
                    prefs.nearby_sharing.onboarding_complete.value,
                    pageContentData)]]" restamp>
            <cr-toggle id="nearbySharingToggleButton"
                class="margin-matches-padding"
                aria-label="$i18n{nearbyShareTitle}"
                checked="{{prefs.nearby_sharing.enabled.value}}"
                disabled=
                    "[[isNearbyShareDisallowedByPolicy_(pageContentData)]]"
                deep-link-focus-id$="[[Setting.kNearbyShareOnOff]]">
            </cr-toggle>
          </template>
          <template is="dom-if" if="[[showNearbyShareSetupButton_(
                    prefs.nearby_sharing.onboarding_complete.value,
                    pageContentData)]]" restamp>
            <cr-button class="margin-matches-padding"
                id="nearbySetUp"
                on-click="handleNearbySetUpClick_"
                disabled=
                    "[[isNearbyShareDisallowedByPolicy_(pageContentData)]]">
              $i18n{nearbyShareSetUpButtonTitle}
            </cr-button>
          </template>
        </div>
      </template>
    </div>
  </div>

  <template is="dom-if" route-path="/multidevice/features" restamp>
    <os-settings-subpage
        page-title="[[getMultideviceSubpageTitle_(pageContentData)]]">
      <template is="dom-if" if="[[isRevampWayfindingEnabled_]]">
        <div slot="subpage-title-extra">
          <cr-button id="forgetDeviceButton" on-click="showForgetDeviceDialog_"
              deep-link-focus-id$="[[Setting.kForgetPhone]]">
            $i18n{multideviceForgetDeviceDisconnect}
          </cr-button>
        </div>
      </template>
      <div id="settingsMultideviceSubpageWrapper" tabindex="-1">
        <settings-multidevice-subpage
            page-content-data="[[pageContentData]]">
        </settings-multidevice-subpage>
      </div>
    </os-settings-subpage>
  </template>
  <template is="dom-if" if="[[isNearbyShareSupported_]]" restamp>
    <template is="dom-if" route-path="/multidevice/nearbyshare" restamp>
      <os-settings-subpage page-title="$i18n{nearbyShareTitle}">
        <settings-nearby-share-subpage settings="{{settings}}"
            prefs="{{prefs}}"
            is-settings-retreived="[[isSettingsRetreived]]">
        </settings-nearby-share-subpage>
      </os-settings-subpage>
    </template>
  </template>
</os-settings-animated-pages>
<template is="dom-if" if="[[showPasswordPromptDialog_]]" restamp>
  <settings-password-prompt-dialog id="multidevicePasswordPrompt"
      on-token-obtained="onTokenObtained_">
  </settings-password-prompt-dialog>
</template>
<template is="dom-if" if="[[showPermissionsSetupDialog_(
    showPhonePermissionSetupDialog_)]]"
    restamp>
  <settings-multidevice-notification-access-setup-dialog
      is-password-dialog-showing="{{isPasswordDialogShowing_}}"
      on-close="onHidePhonePermissionsSetupDialog_">
  </settings-multidevice-notification-access-setup-dialog>
</template>
<template is="dom-if"
    if="[[showNewPermissionsSetupDialog_(
    showPhonePermissionSetupDialog_)]]"
    restamp>
  <settings-multidevice-permissions-setup-dialog
      is-password-dialog-showing="{{isPasswordDialogShowing_}}"
      on-pin-number-selected="onPinNumberSelected_"
      is-chromeos-screen-lock-enabled="[[isChromeosScreenLockEnabled_]]"
      is-phone-screen-lock-enabled="[[isPhoneScreenLockEnabled_]]"
      show-camera-roll="[[isPhoneHubCameraRollSetupRequired(
                                        pageContentData)]]"
      show-notifications="[[isPhoneHubNotificationsSetupRequired(
                                          pageContentData)]]"
      show-app-streaming="[[isPhoneHubAppsSetupRequired(
                                          pageContentData)]]"
      combined-setup-supported="[[isCombinedSetupSupported_(
                                          pageContentData)]]"
      on-close="onHidePhonePermissionsSetupDialog_">
  </settings-multidevice-permissions-setup-dialog>
</template>

<template is="dom-if" if="[[isRevampWayfindingEnabled_]]">
  <template is="dom-if"
      if="[[shouldShowForgetDeviceDialog_]]" restamp>
    <settings-multidevice-forget-device-dialog
        on-close="closeForgetDeviceDialog_">
    </settings-multidevice-forget-device-dialog>
  </template>
</template>