chrome/browser/resources/management/management_ui.html

    <style include="cr-icons cr-hidden-style cr-page-host-style
        cr-shared-style">
      :host {
        color: var(--cr-secondary-text-color);
        display: flex;
        flex-direction: column;
        height: 100%;
      }

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

      cr-toolbar {
        flex-shrink: 0;
      }

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

      .card {
        background-color: var(--cr-card-background-color);
        box-shadow: var(--cr-card-shadow);
        margin: 0 3px;
        min-height: 100%;
      }

      .page-subtitle {
        align-items: center;
        box-sizing: border-box;
        flex-direction: row;
        justify-content: start;
        min-height: 73px;
        padding-bottom: 24px;
        padding-top: 6px;
      }

      .page-subtitle cr-icon-button {
        margin-inline-end: 10px;
        margin-inline-start: -10px;
      }

  <if expr="chromeos_ash">
      .eol-section {
        border: 1px solid var(--google-grey-300);
        border-radius: var(--cr-card-border-radius);
        flex-direction: row;
        justify-content: start;
        margin-inline-end: 20px;
        margin-inline-start: 20px;
        padding: 16px var(--cr-section-padding);
      }

      .eol-section .eol-warning-icon {
        --google-yellow-50-rgb: 254, 247, 224;  /* #fef7e0 */
        --google-yellow-50: rgb(var(--google-yellow-50-rgb));
        align-items: center;
        background: var(--google-yellow-50);
        border-radius: 50%;
        display: flex;
        height: 40px;
        justify-content: center;
        margin-inline-end: 20px;
        width: 40px;
      }

      .eol-section iron-icon {
        --iron-icon-fill-color: #E8710A;
        height: var(--cr-icon-size);
        width: var(--cr-icon-size);
      }

      .eol-section .eol-admin-title {
        font-weight: 500;
      }
  </if>

      .overview-section div + div {
        margin-top: 16px;
      }

      .overview-container {
        align-items: center;
        display: flex;
      }

      .overview-container img {
        float: left;
        margin-inline-end: 10px;
        vertical-align: top;
        width: 20%;
      }

      .overview-container div {
        display: block;
        overflow: hidden;
        width: auto;
      }

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

      .overview-messages li {
        margin-top: 8px;
      }

      th {
        font-weight: 500;
      }

      .subtitle {
        margin-top: 16px;
      }

      section {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: var(--cr-section-min-height);
        padding: 12px var(--cr-section-padding);
      }

      section:not(.page-subtitle) h2 {
        font-size: 100%;
        margin: 0;
      }

      .report iron-icon {
        height: 20px;
        margin-inline-end: 16px;
        width: 20px;
      }

      .report {
        align-items: start;
        display: flex;
        margin-top: 16px;
      }

      .content-indented {
        padding-inline-start: 24px;
      }

      table {
        border-spacing: 0 16px;
        box-sizing: border-box;
        width: 100%;
      }

      th,
      td {
        text-align: start;
      }

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

      .extension-name,
      .protection-name {
        width: 40%;
      }

      .extension-name span {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .extension-permissions,
      .protection-permissions {
        width: 60%;
      }

      .protection-name,
      .protection-permissions {
        vertical-align: top;
      }

      .extension-name img {
        height: 20px;
        margin-inline-end: 12px;
        width: 20px;
      }

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

    <cr-toolbar page-name="$i18n{toolbarTitle}" role="banner" autofocus
        on-search-changed="onSearchChanged_" clear-label="$i18n{clearSearch}"
        search-prompt="$i18n{searchPrompt}">
    </cr-toolbar>
    <div id="cr-container-shadow-top"
        class="cr-container-shadow has-shadow"></div>
    <main id="mainContent">
      <div class="cr-centered-card-container">
        <div class="card">
          <section hidden="[[!managed_]]" class="page-subtitle">
            <cr-icon-button class="icon-arrow-back" id="closeButton"
                on-click="onTapBack_" aria-label="$i18n{backButton}">
            </cr-icon-button>
            <h2 class="cr-title-text">
              [[subtitle_]]
            </h2>
          </section>
<if expr="chromeos_ash">
          <section class="eol-section" hidden="[[!eolMessage_]]">
            <div class="eol-warning-icon">
              <iron-icon icon="cr20:banner-warning"></iron-icon>
            </div>
            <div class="eol-message">
              <div>[[eolMessage_]]</div>
              <div hidden="[[isEmpty_(eolAdminMessage_)]]">
                <div class="eol-admin-title">
                  $i18n{updateRequiredEolAdminMessageTitle}
                </div>
                <div>[[eolAdminMessage_]]</div>
              </div>
            </div>
          </section>
</if>
          <section class="overview-section" hidden="[[!managementOverview_]]">
<if expr="not chromeos_ash">
            <div inner-h-t-m-l="[[managementNoticeHtml_]]"></div>
</if>
<if expr="chromeos_ash">
            <div class="overview-container">
              <img src="[[customerLogo_]]" alt="" aria-hidden="true"
                  hidden="[[!customerLogo_]]">
              <div>[[managementOverview_]]</div>
            </div>
</if>
          </section>
          <template is="dom-if"
              if="[[showThreatProtectionInfo_(threatProtectionInfo_)]]">
            <section>
              <h2 class="cr-title-text">$i18n{threatProtectionTitle}</h2>
              <div class="subtitle">
                [[threatProtectionInfo_.description]]
              </div>
              <table class="content-indented">
                <tr>
                  <th class="protection-name">$i18n{connectorEvent}</th>
                  <th class="protection-permissions">
                    $i18n{connectorVisibleData}
                  </th>
                </tr>
                <template is="dom-repeat"
                    items="[[threatProtectionInfo_.info]]">
                  <tr>
                    <td class="protection-name">[[i18n(item.title)]]</td>
                    <td class="protection-permissions">
                      [[i18n(item.permission)]]
                    </td>
                  </tr>
                </template>
              </table>
            </section>
          </template>

<if expr="is_chromeos">
          <div hidden="[[!localTrustRoots_]]">
            <section>
              <h2 class="cr-title-text">$i18n{localTrustRoots}</h2>
              <div class="subtitle" id="trust-roots-configuration">
                [[localTrustRoots_]]</div>
            </section>
          </div>
          <template is="dom-if"
              if="[[showDeviceReportingInfo_(deviceReportingInfo_)]]">
            <section>
              <h2 class="cr-title-text">$i18n{deviceReporting}</h2>
              <div class="subtitle"
                hidden="[[!showProxyServerPrivacyDisclosure_]]">
                $i18n{proxyServerPrivacyDisclosure}
              </div>
              <div class="subtitle">
                $i18n{deviceConfiguration}
              </div>
              <div class="content-indented">
                <template is="dom-repeat" items="[[deviceReportingInfo_]]">
                  <div class="report">
                    <iron-icon icon="[[getIconForDeviceReportingType_(
                        item.reportingType)]]"></iron-icon>
                    <div inner-h-t-m-l="[[i18nAdvanced(item.messageId)]]"></div>
                  </div>
                </template>
              </div>
              <div class="subtitle"
                  hidden="[[!pluginVmDataCollectionEnabled_]]">
                $i18nRaw{pluginVmDataCollection}
              </div>
            </section>
          </template>
</if>
<if expr="not is_chromeos">
          <template is="dom-if"
              if="[[showBrowserReportingInfo_(browserReportingInfo_)]]">
            <section>
              <h2 class="cr-title-text">$i18n{browserReporting}</h2>
              <div class="subtitle">
                $i18n{browserReportingExplanation}
              </div>
              <div>
                <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>
</if>
          <template is="dom-if"
              if="[[showExtensionReportingInfo_(extensions_)]]">
            <section class="extension-reporting">
              <h2 class="cr-title-text">$i18n{extensionReporting}</h2>
              <div class="subtitle">
                [[extensionReportingSubtitle_]]
              </div>
              <table class="content-indented">
                <tr>
                  <th class="extension-name">$i18n{extensionName}</th>
                  <th class="extension-permissions">
                    $i18n{extensionPermissions}
                  </th>
                </tr>
                <template is="dom-repeat" items="[[extensions_]]">
                  <tr>
                    <td class="extension-name">
                      <div title="[[item.name]]" role="presentation">
                        <img src="[[item.icon]]" alt="" aria-hidden="true">
                        <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>
          <template is="dom-if"
                    if="[[showManagedWebsitesInfo_(managedWebsites_)]]">
            <section class="managed-webistes">
              <h2 class="cr-title-text">$i18n{managedWebsites}</h2>
              <div class="subtitle">
                [[managedWebsitesSubtitle_]]
              </div>
              <div class="content-indented">
              <template is="dom-repeat" items="[[managedWebsites_]]">
                  <div class="report">
                    [[item]]
                  </div>
                </template>
              </div>
            </section>
          </template>
        </div>
      </div>
    </main>