chrome/browser/resources/management/management_ui.html

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

<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.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/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/load_time_data.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="icons.html">
<link rel="import" href="management_browser_proxy.html">

<dom-module id="management-ui">
  <template>
    <style>
      :host {
        @apply --cr-page-host;
        display: flex;
        flex-direction: column;
        height: 100%;
      }

      a {
        color: var(--cr-link-color);
        text-decoration: none;
      }

      a iron-icon {
        color: var(--cr-primary-text-color);
      }

      cr-toolbar {
        flex-shrink: 0;
      }

      main {
        height: 100%;
        overflow: overlay;
      }

      .sections-container {
        @apply --cr-centered-card-container;
        height: 100%;
      }

      .card {
        @apply --cr-card-elevation;
        background-color: var(--cr-card-background-color);
        margin: 0 .1875em;
        min-height: 100%;
      }

      .page-subtitle {
        align-items: center;
        flex-direction: row;
        justify-content: start;
        padding-bottom: 0;
        padding-top: 0;
      }

      .page-subtitle a {
        margin-inline-end: 2em;
      }

      .page-subtitle iron-icon {
        color: var(--cr-title-text-color);
        padding-bottom: 0;
        padding-top: 0;
      }

      .overview-section {
        padding-inline-start: 2em;
      }

      .overview-section div + div {
        margin-top: 1em;
      }

      .overview-messages {
        margin-top: 0;
      }

      .overview-messages li {
        margin-top: .5em;
      }

      th {
        font-weight: 400;
      }

      h2 {
        @apply --cr-title-text;
        font-size: .8125em;
      }

      .page-subtitle h2 {
        font-size: .875em;
      }

      .subtitle {
        margin-top: 1em;
      }

      section {
        @apply --cr-section;
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        padding: 1.5em;
      }

      section:not(.page-subtitle):not(.overview-section) {
        padding-inline-start: 2em;
      }

      section:not(.page-subtitle) h2 {
        margin: 0;
      }

      .report iron-icon {
        height: 1.25em;
        margin-inline-end: 1em;
        width: 1.25em;
      }

      .report {
        align-items: start;
        display: flex;
        margin-top: 1em;
      }

      .content-indented {
        margin-inline-start: 1.5em;
      }

      table {
        border-spacing: 0 1em;
      }

      th,
      td {
        text-align: start;
      }

      td > div {
        align-items: center;
        display: flex;
      }

      .extension-name {
        width: 40%;
      }

      .extension-permissions {
        width: 60%;
      }

      .extension-name img {
        height: 1.25em;
        margin-inline-end: 0.75em;
        width: 1.25em;
      }

      .extension-permissions ul,
      .report ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
    </style>

    <cr-toolbar page-name="$i18n{toolbarTitle}" role="banner"
        on-search-changed="onSearchChanged_" clear-label="$i18n{clearSearch}"
        search-prompt="$i18n{searchPrompt}">
    </cr-toolbar>
    <main id="mainContent">
      <div class="sections-container">
        <div class="card">
          <section class="page-subtitle">
            <a href="chrome://settings/help" aria-label="$i18n{backButton}">
              <iron-icon icon="cr:arrow-back"></iron-icon>
            </a>
            <h2>
              [[subtitle_]]
            </h2>
          </section>
          <section class="overview-section">
<if expr="not chromeos">
            <div inner-h-t-m-l="[[managementNoticeHtml_]]"></div>
</if>
<if expr="chromeos">
            <div>[[managementOverview_]]</div>
            <div>[[deviceManagedInfo_.overview]]</div>
            <ul class="overview-messages"
                hidden="[[!deviceManagedInfo_]]">
              <li>
                [[deviceManagedInfo_.setup]]
                    <a href="$i18nRaw{managementDeviceLearnMoreUrl}"
                      target="_blank">$i18n{learnMore}</a>
              </li>
              <li>[[deviceManagedInfo_.data]]</li>
            </ul>
</if>
            <div>[[accountManagedInfo_.overview]]</div>
            <ul class="overview-messages" hidden="[[!accountManagedInfo_]]">
<if expr="chromeos">
              <li>[[accountManagedInfo_.setup]]
                    <a href="$i18nRaw{managementAccountLearnMoreUrl}"
                    target="_blank">$i18n{learnMore}</a>
              </li>
</if>
<if expr="not chromeos">
              <li>[[accountManagedInfo_.setup]]</li>
</if>
              <li>[[accountManagedInfo_.data]]</li>
            </ul>
          </section>
<if expr="chromeos">
          <div hidden="[[!localTrustRoots_]]">
            <section>
              <h2>$i18n{localTrustRoots}</h2>
              <div class="subtitle" id="trust-roots-configuration">
                [[localTrustRoots_]]</div>
            </section>
          </div>
          <template is="dom-if"
              if="[[showDeviceReportingInfo_(deviceReportingInfo_)]]">
            <section>
              <h2>$i18n{deviceReporting}</h2>
              <div class="subtitle content-indented">
                $i18n{deviceConfiguration}
              </div>
              <div class="content-indented">
                <template is="dom-repeat" items="[[deviceReportingInfo_]]">
                  <div class="report">
                    <iron-icon icon="[[getIconForDeviceReportingType_(
                        item.reportingType)]]"></iron-icon>
                    [[i18n(item.messageId)]]
                  </div>
                </template>
              </div>
            </section>
          </template>
</if>

          <template is="dom-if"
              if="[[showBrowserReportingInfo_(browserReportingInfo_)]]">
            <section>
              <h2>$i18n{browserReporting}</h2>
              <div class="subtitle content-indented">
                $i18n{browserReportingExplanation}
              </div>
              <div class="content-indented">
                <template is="dom-repeat" items="[[browserReportingInfo_]]">
                  <div class="report">
                    <iron-icon icon="[[item.icon]]"></iron-icon>
                    <ul>
                      <template is="dom-repeat" items="[[item.messageIds]]"
                          as="messageId">
                        <li inner-h-t-m-l="[[i18nAdvanced(messageId)]]"></li>
                      </template>
                    </ul>
                  </div>
                </template>
              </div>
            </section>
          </template>
          <template is="dom-if"
              if="[[showExtensionReportingInfo_(extensions_)]]">
            <section>
              <h2>$i18n{extensionReporting}</h2>
              <div class="subtitle content-indented">
                [[extensionReportingSubtitle_]]
              </div>
              <table class="content-indented">
                <tr>
                  <th class="extension-name">$i18n{extensionName}</td>
                  <th class="extension-permissions">
                    $i18n{extensionPermissions}
                  </td>
                </tr>
                <template is="dom-repeat" items="[[extensions_]]">
                  <tr>
                    <td class="extension-name">
                      <div>
                        <img src="[[item.icon]]" alt="">
                        <span>[[item.name]]</span>
                      </div>
                    </td>
                    <td class="extension-permissions">
                      <ul>
                        <template is="dom-repeat" items="[[item.permissions]]"
                            as="permission">
                          <li>[[permission]]</li>
                        </template>
                      </ul>
                    </td>
                  </tr>
                </template>
              </table>
            </section>
          </template>
        </div>
      </div>
    </main>
  </template>
  <script src="management_ui.js"></script>
</dom-module>