chrome/browser/resources/browser_switch/internals/app.html

<style>
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  table {
    border-collapse: collapse;
    font-family: monospace;
  }

  pre,
  table {
    font-size: 1.25em;
  }

  th {
    background: black;
    color: white;
  }

  th,
  td {
    border: 1px solid black;
    padding: 6px 10px;
    text-align: center;
  }

  .url {
    text-align: start;
  }

  #url-checker-input {
    display: block;
    margin: 1em 0;
    width: 400px;
  }

  #xml-not-fetched-yet,
  #xml-last-fetch {
    display: none;
  }

  .policy-prop {
    background-color: rgba(175, 184, 193, 0.2);
    color: rgb(36, 41, 47);
  }

  .tooltip {
    border-bottom: 1px dotted #666;
    display: inline-block;
    position: relative;
  }

  .tooltip .right {
    background-color: #eee;
    border-radius: 8px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    color: #444;
    font-size: 0.8rem;
    font-weight: normal;
    left: 100%;
    margin-inline-start: 20px;
    min-width: 200px;
    padding: 10px 20px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    visibility: hidden;
  }

  .tooltip:hover .right {
    visibility: visible;
  }

  .container {
    padding: 10px;
  }
</style>

<cr-toolbar
  page-name="$i18n{switchInternalTitle}"
  clear-label="clear"
  role="banner"
  show-search="[[showSearch_]]"
>
</cr-toolbar>

<div class="container">
  <p>
    $i18n{switchInternalDescription}
  </p>
</div>
<hr></hr>

<section class="container" hidden$="[[isBrowserSwitcherEnabled_]]">
  <h2>$i18n{nothingShown}</h2>

  <p>
    $i18nRaw{switcherDisabled}
  </p>
</section>

<section class="container" hidden$="[[!isBrowserSwitcherEnabled_]]">
  <section>
    <h2>$i18n{urlCheckerTitle}</h2>

    <label>
      $i18n{urlCheckerDesc}
      <input
        type="text"
        value="{{urlCheckerInput_::input}}"
        placeholder="http://example.com/"
      ></input>
    </label>

    <ul>
      <template is="dom-repeat" items="[[urlCheckerOutput_]]">
        <li>[[item]]</li>
      </template>
    </ul>
  </section>
  <hr></hr>

  <section>
    <h2 class="tooltip">
      $i18n{xmlTitle}
      <span class="right">
        $i18n{xmlDesc}
      </span>
    </h2>

    <table>
      <tr>
        <th>$i18n{xmlSource}</th>
        <th>URL</th>
      </tr>
      <template is="dom-repeat" items="[[xmlSiteLists_]]">
        <tr>
          <td>[[item.policyName]]</td>
          <td class="url">[[item.url]]</td>
        </tr>
      </template>
    </table>

    <template is="dom-if" if="[[xmlSiteLists_.length]]">
      <p>
        <template is="dom-if" if="[[!lastFetch_]]">
          $i18n{sitelistNotFetched}
        </template>
        <template is="dom-if" if="[[lastFetch_]]">
          [[getXMLSitelistsLastDownloadLabel()]]
        </template>
      </p>
      <template is="dom-if" if="[[nextFetch_]]">
        <p>[[getXMLSitelistsNextDownloadLabel()]]</p>
      </template>
      <p>
        <button on-click="refreshXml">$i18n{sitelistDownloadButton}</button>
      </p>
    </template>
  </section>

  <hr></hr>

  <section>
    <h2 class="tooltip">
      $i18n{forceOpenTitle}
      <span class="right">
        $i18n{forceOpenDescription}
      </span>
    </h2>
    <h4>
      $i18nRaw{forceOpenParagraph1}
    </h4>

    <p>
      $i18n{forceOpenParagraph2}
    </p>
    <table>
      <tr>
        <th>$i18n{forceOpenTableColumnRule}</th>
        <th>$i18n{forceOpenTableColumnOpensIn}</th>
        <th>$i18n{forceOpenTableColumnSource}</th>
      </tr>
      <template is="dom-repeat" items="[[siteListRules_]]">
        <tr>
          <td class="url">[[item.rule]]</td>
          <td>[[getRuleBrowserName(item.rule)]]</td>
          <td>
            <span class="tooltip">
              [[item.rulesetName]]
              <span class="right">
                [[getPolicyFromRuleset(item.rulesetName)]]
              </span>
            </span>
          </td>
        </tr>
      </template>
    </table>
  </section>

  <hr></hr>

  <section>
    <h2 class="tooltip">
      $i18n{ignoreTitle}
      <span class="right">
        $i18n{ignoreDescription}
      </span>
    </h2>
    <h4>
      $i18nRaw{ignoreParagraph1}
    </h4>

    <p>
      <p>[[getIgnoreURLMatchingLabel()]]</p>
    </p>
    <table>
      <tr>
        <th>$i18n{ignoreTableColumnRule}</th>
        <th>$i18n{ignoreTableColumnSource}</th>
      </tr>
      <template is="dom-repeat" items="[[greyListRules_]]">
        <tr>
          <td class="url">[[item.rule]]</td>
          <td>
            <span class="tooltip">
              [[item.rulesetName]]
              <span class="right"
                >[[getPolicyFromRuleset(item.rulesetName)]]</span
              >
            </span>
          </td>
        </tr>
      </template>
    </table>
  </section>
</section>