toolkit/components/aboutperformance/content/aboutPerformance.xhtml
author Kestrel <ke5trel@protonmail.com>
Mon, 13 May 2019 09:35:18 +0000
changeset 532404 a0d20ab6be8b779fdd96a14f0cfd07ffe73c8e3d
parent 530022 70858ec04904f0b15fc718e67a092cf736e69a39
permissions -rw-r--r--
Bug 1551165 - Add context fill to about:performance icons for dark mode r=ntim Differential Revision: https://phabricator.services.mozilla.com/D30878

<?xml version="1.0"?>

<!-- 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/. -->

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title data-l10n-id="about-performance-title"/>
    <link rel="icon" type="image/svg+xml" id="favicon"
          href="chrome://global/skin/icons/performance.svg"/>
    <link rel="stylesheet" href="chrome://global/skin/in-content/common.css"
          type="text/css"/>
    <link rel="localization" href="toolkit/about/aboutPerformance.ftl"/>
    <script src="chrome://global/content/aboutPerformance.js"></script>
    <style>
      @import url("chrome://global/skin/in-content/common.css");

      html {
        background-color: var(--in-content-page-background);
      }
      body {
        overflow-x: hidden;
      }
      #dispatch-table {
        -moz-user-select: none;
        font-size: 1em;
        border-spacing: 0;
        background-color: var(--in-content-box-background);
        margin: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-width: 40em;
      }

      /* Avoid scrolling the header */
      #dispatch-tbody {
        display: block;
        margin-top: 2em;
      }
      #dispatch-thead {
        position: fixed;
        z-index: 1;
        height: 2em;
        border-bottom: 1px solid var(--in-content-border-color);
        min-width: 40em;
        background-color: var(--in-content-box-background);
      }
      tr {
        display: table;
        table-layout: fixed;
        width: 100%;
      }
      td:nth-child(2) {
        width: 8em;
      }
      td:nth-child(3) {
        width: 12em;
      }
      td:nth-child(4) {
        width: 5em;
      }
      #dispatch-tbody td:nth-child(4) {
        text-align: end;
      }
      td:nth-child(5) {
        width: 20px;
      }

      /* Show action icons on selected or hovered rows */
      tr:-moz-any([selected], :hover) > td > .action-icon {
        padding: 1px 10px;
        opacity: 1;
      }
      /* The action icons have a relative position, so that we can use
       * absolutely positioned ::before and ::after pseudo elements.
       * ::before is used to display the square background on hover/active
       * ::after is used to display the icons as a background that can be
       * flipped using a CSS transform in RTL mode. */
      .action-icon {
        position: relative;
        opacity: 0;
      }
      /* Ensure both pseudo elements have the same size and position. */
      .action-icon::before, .action-icon::after {
        height: 200%;
        position: absolute;
        top: -50%;
        left: -3px;
        padding-left: 13px;
        padding-right: 13px;
      }

      /* square background */
      .action-icon::before {
        content: "";
        background-color: currentColor;
        opacity: 0;
      }
      .action-icon:hover::before {
        opacity: 0.1;
      }
      .action-icon:hover:active::before {
        opacity: 0.2;
      }

      /* icons */
      .action-icon::after {
        -moz-context-properties: fill, fill-opacity;
        fill-opacity: 0;
        background-repeat: no-repeat;
        background-position: center;
        fill: currentColor;
        line-height: 100%;
      }
      .addon-icon::after {
        content: url("chrome://global/skin/icons/shortcut.svg");
        top: 2px;
        left: -11px;
        width: 16px;
      }
      .addon-icon:dir(rtl)::after {
        transform: scaleX(-1);
      }
      .close-icon::after {
        content: url("chrome://global/skin/icons/close.svg");
        height: 100%;
        top: 0;
        left: -13px;
        transform: scale(1.2);
      }

      #dispatch-thead > tr {
        height: inherit;
      }

      #dispatch-thead > tr > td {
        border: none;
        background-color: var(--in-content-box-background-hover);
      }
      #dispatch-thead > tr > td:not(:first-child) {
        border-inline-start-width: 1px;
        border-inline-start-style: solid;
        border-image: linear-gradient(transparent 0%, transparent 20%, #c1c1c1 20%, #c1c1c1 80%, transparent 80%, transparent 100%) 1 1;
        border-bottom: 1px solid var(--in-content-border-color);
      }
      td {
        padding: 5px 10px;
        min-height: 2em;
        color: var(--in-content-text-color);
        max-width: 70vw;
        overflow: hidden;
        white-space: nowrap;
      }
      #dispatch-tbody > tr > td:first-child {
        text-overflow: ellipsis;
        padding-inline-start: 32px;
        background-repeat: no-repeat;
        background-size: 16px 16px;
        background-position-y: center;
        -moz-context-properties: fill;
        fill: currentColor;
      }
      #dispatch-tbody > tr > td.root{
        background-position-x: left 36px;
        padding-inline-start: 62px;
      }
      #dispatch-tbody > tr > td.root:dir(rtl) {
        background-position-x: right 36px;
      }
      .twisty {
        margin-inline-start: -62px;
        margin-inline-end: 26px;
        padding-inline-end: 18px;
        padding-inline-start: 18px;
        position: relative;
      }
      /* Putting the background image in a positioned pseudo element lets us
       * use CSS transforms on the background image, which we need for rtl. */
      .twisty::before {
        content: url("chrome://global/skin/icons/twisty-collapsed.svg");
        position: absolute;
        display: block;
        line-height: 50%;
        top: 4px; /* Half the image's height */
        width: 100%;
        left: 0;
        text-align: center;
        -moz-context-properties: fill;
        fill: currentColor;
      }
      .twisty:dir(rtl)::before {
        transform: scaleX(-1);
      }
      .twisty.open::before {
        content: url("chrome://global/skin/icons/twisty-expanded.svg");
      }
      #dispatch-tbody > tr > td.indent {
        padding-inline-start: 88px;
        background-position-x: left 62px;
      }
      #dispatch-tbody > tr > td.indent:dir(rtl) {
        background-position-x: right 62px;
      }
      #dispatch-tbody > tr > td.tracker {
        background-image: url("chrome://browser/skin/controlcenter/trackers.svg");
        -moz-context-properties: fill;
        fill: rgb(224, 41, 29);
      }
      #dispatch-tbody > tr > td.worker {
        background-image: url("chrome://devtools/skin/images/debugging-workers.svg");
        -moz-context-properties: fill;
        fill: #808080;
      }

      #dispatch-tbody > tr[selected] > td {
        background-color: var(--in-content-item-selected);
        color: var(--in-content-selected-text);
      }
      #dispatch-tbody > tr:hover {
        background-color: var(--in-content-item-hover);
      }
    </style>
  </head>
  <body onload="go()">
    <table id="dispatch-table">
      <thead id="dispatch-thead">
        <tr>
          <td data-l10n-id="column-name"/>
          <td data-l10n-id="column-type"/>
          <td data-l10n-id="column-energy-impact"/>
          <td data-l10n-id="column-memory"/>
          <td></td><!-- actions -->
        </tr>
      </thead>
      <tbody id="dispatch-tbody"></tbody>
    </table>
  </body>
</html>