<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

<!DOCTYPE html>

<html>
  <head>
    <title data-l10n-id="third-party-page-title"></title>
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src chrome:; object-src 'none'"
    />
    <meta name="color-scheme" content="light dark" />
    <link
      rel="stylesheet"
      href="chrome://global/skin/in-content/info-pages.css"
    />
    <link rel="stylesheet" href="chrome://global/content/aboutThirdParty.css" />
    <link rel="localization" href="branding/brand.ftl" />
    <link rel="localization" href="toolkit/global/processTypes.ftl" />
    <link rel="localization" href="toolkit/about/aboutThirdParty.ftl" />
    <script src="chrome://global/content/aboutThirdParty.js"></script>
  </head>
  <body class="wide-container">
    <h1 data-l10n-id="third-party-page-title"></h1>
    <p data-l10n-id="third-party-intro"></p>

    <div class="button-container">
      <button
        id="button-copy-to-clipboard"
        data-l10n-id="third-party-button-copy-to-clipboard"
      ></button>
      <img
        src="chrome://global/skin/icons/loading.png"
        class="svg-common"
        id="background-data-loading"
        data-l10n-id="third-party-loading-data"
      />
      <button
        id="button-reload"
        hidden
        data-l10n-id="third-party-button-reload"
      ></button>
    </div>

    <h2 data-l10n-id="third-party-section-title"></h2>
    <p id="no-data" data-l10n-id="third-party-message-empty" hidden></p>

    <div id="main"></div>

    <template name="module-detail-row">
      <div><label class="module-detail-label"></label><span></span></div>
    </template>

    <template name="event-table-row">
      <tr>
        <td>
          <span class="process-type"></span>
          (<span class="process-id"></span>)
        </td>
        <td>
          <span class="event-duration"></span>
          <span
            class="module-tag tag-background"
            hidden
            data-l10n-id="third-party-tag-background"
          ></span>
        </td>
        <td></td>
      </tr>
    </template>

    <template name="card-blocked">
      <div class="card card-no-hover">
        <div class="card-head">
          <h3 class="module-name"></h3>
          <button
            class="button-block"
            hidden
            data-l10n-id="third-party-button-to-block-module"
          ></button>
        </div>
      </div>
    </template>

    <template name="card">
      <div class="card card-no-hover">
        <div class="card-head">
          <h3 class="module-name"></h3>
          <img
            src="chrome://global/skin/icons/warning.svg"
            class="svg-common image-warning"
            hidden
            data-l10n-id="third-party-icon-warning"
          />
          <img
            src="chrome://global/skin/icons/security-broken.svg"
            class="svg-common image-unsigned"
            hidden
            data-l10n-id="third-party-icon-unsigned"
          />
          <div class="module-tags">
            <span
              class="module-tag tag-ime"
              hidden
              data-l10n-id="third-party-tag-ime"
            ></span>
            <span
              class="module-tag tag-shellex"
              hidden
              data-l10n-id="third-party-tag-shellex"
            ></span>
          </div>
          <button
            class="svg-common svg-button button-open-dir"
            data-l10n-id="third-party-button-open"
          ></button>
          <button
            class="button-block"
            hidden
            data-l10n-id="third-party-button-to-block-module"
          ></button>
          <img
            src="chrome://global/skin/icons/warning.svg"
            class="svg-common blocked-by-builtin"
            hidden
            data-l10n-id="third-party-blocked-by-builtin"
          />
          <div class="spacer"></div>
          <button
            class="svg-common svg-button button-expand"
            data-l10n-id="third-party-button-expand"
          ></button>
        </div>

        <div class="module-details"></div>

        <table class="event-table" hidden>
          <thead>
            <tr>
              <th data-l10n-id="third-party-th-process" />
              <th data-l10n-id="third-party-th-duration" />
              <th data-l10n-id="third-party-th-status" />
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </template>
  </body>
</html>
