tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

Tracer.css (10327B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
      4 
      5 /**
      6 * Store variable on the root element, as it may be used by HTMLTooltip elements,
      7 *  which are added outside of .tracer-container.
      8 */
      9 :root {
     10  --tracer-event-color: var(--grey-50);
     11  --tracer-mouse-event-color: var(--green-60);
     12  --tracer-key-event-color: var(--teal-60);
     13  --tracer-mutation-color: var(--purple-30);
     14  --tracer-mutation-darker-color: oklch(from var(--tracer-mutation-color) calc(l * 0.6) c h);
     15  --slider-bar-background: var(--blue-55);
     16 }
     17 
     18 .tracer-container {
     19  height: 100%;
     20  max-height: 100%;
     21 
     22  display: grid;
     23  grid-template-areas:
     24    "toolbar           toolbar"
     25    "timeline          tabs";
     26  grid-template-columns: auto 1fr;
     27  grid-template-rows: auto 1fr;
     28 
     29  & > .tracer-toolbar {
     30    grid-area: toolbar;
     31  }
     32  & > .tracer-timeline {
     33    grid-area: timeline;
     34  }
     35  & > :is(.tabs) {
     36    grid-area: tabs;
     37    overflow-y: auto;
     38    border-inline-start: 1px solid var(--theme-splitter-color);
     39  }
     40 }
     41 
     42 .tracer-toolbar .tracer-experimental-notice {
     43  --icon-size: 16px;
     44  --icon-inline-padding: 4px;
     45 
     46  background-color: var(--theme-body-alternate-emphasized-background);
     47  border-block-end: 1px solid var(--theme-splitter-color);
     48  padding: 1em;
     49  padding-inline-start: calc(var(--icon-inline-padding) * 2 + var(--icon-size));
     50  background-image: url("chrome://global/skin/icons/experiments.svg");
     51  background-position-x: var(--icon-inline-padding);
     52  background-position-y: 50%;
     53  background-repeat: no-repeat;
     54  background-size: var(--icon-size);
     55  -moz-context-properties: fill;
     56  fill: var(--theme-icon-checked-color);
     57 }
     58 
     59 .tracer-toolbar .tracer-runtime-version-mismatch {
     60  --icon-size: 16px;
     61  --icon-inline-padding: 4px;
     62 
     63  background-color: var(--theme-warning-background);
     64  color: var(--theme-warning-color);
     65  border-block-end: 1px solid var(--theme-splitter-color);
     66  padding: 1em;
     67  padding-inline-start: calc(var(--icon-inline-padding) * 2 + var(--icon-size));
     68  background-image: url(resource://devtools-shared-images/alert-small.svg);
     69  background-position-x: var(--icon-inline-padding);
     70  background-position-y: 50%;
     71  background-repeat: no-repeat;
     72  background-size: var(--icon-size);
     73  -moz-context-properties: fill;
     74  fill: var(--theme-warning-color);
     75 }
     76 
     77 .tracer-tab .tracer-message {
     78  display: flex;
     79  justify-content: center;
     80  align-items: center;
     81  font-style: italic;
     82  text-align: center;
     83  padding: 0.5em;
     84  font-size: 12px;
     85  user-select: none;
     86 }
     87 
     88 .tracer-tab .tab-panel > * {
     89  height: 100%;
     90 }
     91 
     92 .tracer-tab .event-listeners-container {
     93  display: flex;
     94  flex-direction: column;
     95 
     96  .event-listeners {
     97    flex: 1;
     98 
     99    .event-search-input {
    100      /* :focus-visible is cutoff on the right */
    101      outline-offset: -2px;
    102    }
    103  }
    104 
    105  footer {
    106    background: var(--theme-body-background);
    107    border-top: 1px solid var(--theme-splitter-color);
    108    min-height: var(--editor-footer-height);
    109    align-content: center;
    110    padding: 4px 6px;
    111  }
    112 }
    113 
    114 .tracer-tab .call-tree-container {
    115  display: flex;
    116  flex-direction: column;
    117 
    118  .search-outline {
    119    /* :focus-visible is cutoff on the right */
    120    outline-offset: -2px;
    121 
    122    input:not(:placeholder-shown) {
    123      font-family: var(--monospace-font-family);
    124    }
    125 
    126    input[disabled] {
    127      background-color: var(--theme-body-emphasized-background);
    128    }
    129  }
    130  .search-exception {
    131    color: var(--theme-text-color-error);
    132    background-color: var(--theme-toolbar-error-background);
    133    border-bottom: 1px solid var(--theme-splitter-color);
    134  }
    135  .search-exception,
    136  .search-value {
    137    padding: 5px 10px;
    138    border-bottom: 1px solid var(--theme-splitter-color);
    139  }
    140  .objectBox {
    141    margin-inline-start: 5px;
    142  }
    143 }
    144 
    145 .tracer-tab .tree {
    146  flex: 1;
    147  overflow-x: auto;
    148  overflow-y: auto;
    149  padding-inline-start: 4px !important;
    150 }
    151 
    152 .tracer-tab .tree-node {
    153  /* This matches `itemHeight` set on VirtualizedTree component */
    154  height: var(--tree-node-height);
    155  line-height: var(--tree-node-height);
    156  text-wrap: nowrap;
    157  margin-inline-start: calc(5px * var(--tree-node-depth));
    158  /* make the tree node at least as wide as its content so the hover style isn't weird */
    159  width: min-content;
    160  min-width: 100%;
    161 }
    162 
    163 .tracer-tab .tree-node .trace-line {
    164  flex: 1;
    165  display: flex;
    166  flex-direction: row;
    167  align-items: center;
    168 }
    169 
    170 .tracer-tab .frame-link {
    171  display: flex;
    172  width: 100%;
    173  padding: 0 10px;
    174  gap: 10px;
    175 }
    176 
    177 /* Force the smart trace link to be light color when the focused style make the background blue */
    178 .tracer-tab .tree-node.focused .frame-link-source {
    179  color: var(--theme-selection-color);
    180 }
    181 
    182 .tracer-tab .frame-link.match,
    183 .tracer-tab .frame-link.match .frame-link-source {
    184  background: var(--theme-contrast-background);
    185  color: var(--theme-contrast-color);
    186 }
    187 
    188 .tracer-tab .tree-node:has(.frame-link.onstack) {
    189  background-color: light-dark(lightblue, var(--theme-body-alternate-emphasized-background));
    190 }
    191 
    192 .tracer-tab .frame-link-source {
    193  max-width: 200px;
    194  overflow: hidden;
    195  text-overflow: ellipsis;
    196  text-wrap: nowrap;
    197  color: var(--theme-internal-link-color);
    198 }
    199 
    200 .tracer-tab .frame-link-function-display-name {
    201  flex: 1;
    202  text-overflow: ellipsis;
    203  overflow: hidden;
    204  text-wrap: nowrap;
    205  font-family: var(--monospace-font-family);
    206 }
    207 
    208 .tracer-dom-event,
    209 .tracer-dom-mutation {
    210  padding-inline: 4px;
    211  margin-inline: 5px;
    212 
    213  &.mouse {
    214    --event-color: var(--tracer-mouse-event-color);
    215  }
    216  &.key {
    217    --event-color: var(--tracer-key-event-color);
    218  }
    219  &.tracer-dom-mutation {
    220    --event-color: var(--tracer-mutation-color);
    221  }
    222 
    223  &::before {
    224    content: "";
    225    height: 8px;
    226    aspect-ratio: 1 / 1;
    227    margin-inline-end: 4px;
    228    background-color: var(--event-color, var(--tracer-event-color));
    229    display: inline-block;
    230    vertical-align: baseline;
    231    outline: 1px solid;
    232  }
    233 }
    234 
    235 .tracer-timeline {
    236  width: 50px;
    237  padding-inline: 2px 4px;
    238  display: flex;
    239  flex-direction: column;
    240  background-color: var(--theme-body-alternate-emphasized-background);
    241 
    242  &.hidden {
    243    display: none;
    244  }
    245 }
    246 
    247 .tracer-timeline-toolbar {
    248  border-bottom: 1px solid var(--theme-splitter-color);
    249 
    250  .tracer-reset-zoom {
    251    padding: 0.5em 2em;
    252    margin-inline: auto;
    253    display: block;
    254  }
    255 }
    256 
    257 .tracer-slider-box {
    258  flex: 1;
    259  position: relative;
    260 }
    261 
    262 /**
    263 * .selected-before and .selected-after are little blue arrows shown
    264 * on top and bottom of the slider to indicate when the selected trace
    265 * is outside of the current viewport.
    266 */
    267 .tracer-slider-box.selected-before .tracer-slice-slider::before,
    268 .tracer-slider-box.selected-after .tracer-slice-slider::after {
    269  content: "";
    270  position: absolute;
    271  width: 10px;
    272  height: 10px;
    273  left: 0;
    274  z-index: 10;
    275 
    276  background-image: url("chrome://devtools/skin/images/arrow.svg");
    277  background-position: top center;
    278  background-repeat: no-repeat;
    279  background-size: 10px;
    280 
    281  -moz-context-properties: fill;
    282 }
    283 
    284 .tracer-slider-box.selected-before .tracer-slice-slider::before {
    285  top: 0;
    286  transform: rotate(180deg);
    287  fill: var(--slider-bar-background);
    288 }
    289 
    290 .tracer-slider-box.selected-after .tracer-slice-slider::after {
    291  bottom: 0;
    292  left: -2px;
    293  fill: white;
    294 }
    295 
    296 .tracer-slider-box:is(.cut-start, .cut-end) {
    297  --shadow-size: 10px;
    298  --shadow-color: rgb(0 0 0 / 0.3);
    299 }
    300 
    301 .tracer-slider-box.cut-start::before {
    302  content: "";
    303  height: var(--shadow-size);
    304  position: absolute;
    305  top: 0;
    306  left: 0;
    307  right: 0;
    308  background: linear-gradient(to bottom, var(--shadow-color), transparent);
    309 }
    310 .tracer-slider-box.cut-end::after {
    311  content: "";
    312  height: var(--shadow-size);
    313  position: absolute;
    314  bottom: 0;
    315  left: 0;
    316  right: 0;
    317  background: linear-gradient(to top, var(--shadow-color), transparent);
    318 }
    319 
    320 .tracer-slice-slider {
    321  position: absolute;
    322  cursor: pointer;
    323  height: 100%;
    324  width: 100%;
    325  /* ignore overflows of mutations icons going over limits on top or bottom */
    326  overflow: hidden;
    327 }
    328 
    329 .tracer-slider-bar {
    330  width: 8px;
    331  height: 100%;
    332  background: linear-gradient(var(--slider-bar-background) var(--slider-bar-progress, 0%), transparent var(--slider-bar-progress, 0%));
    333  background-color: var(--theme-body-background);
    334  border: 1px solid var(--theme-splitter-color);
    335  position: absolute;
    336  z-index: 5;
    337 }
    338 
    339 .tracer-slider-position {
    340  position: absolute;
    341  top: var(--slider-bar-progress);
    342  z-index: 15;
    343  width: 100%;
    344  height: 3px;
    345  background-color: var(--slider-bar-background);
    346  border-inline-start: 1px solid var(--theme-splitter-color);
    347 }
    348 
    349 .tracer-slider-event,
    350 .tracer-slider-mutation {
    351  position: absolute;
    352  width: 3px;
    353  left: 12px;
    354 }
    355 
    356 .tracer-slider-event {
    357  background-color: var(--tracer-event-color);
    358  --top-line-height: 2px;
    359  --left-line-width: 10px;
    360  z-index: 5;
    361 
    362  clip-path: polygon(0% 0%, 100% 0%, 100% var(--top-line-height), var(--left-line-width) var(--top-line-height), var(--left-line-width) 100%, 0 100%);
    363 
    364  &.size-subpixel {
    365    /* Avoid involving clip-path when the item is really small as it requires lots of computation in the rendering engine */
    366    clip-path: none;
    367  }
    368 
    369  width: 30px;
    370 
    371  &.mouse {
    372    background-color: var(--tracer-mouse-event-color);
    373  }
    374  &.key {
    375    background-color: var(--tracer-key-event-color);
    376  }
    377  &:hover,
    378  &.highlighted {
    379    background-color: var(--blue-30);
    380    /* make the highlights and hover go over mutations, as well as non-highlighted events */
    381    z-index: 7;
    382  }
    383 }
    384 
    385 .tracer-slider-mutation {
    386  position: absolute;
    387  aspect-ratio: 1 / 1;
    388  width: 18px;
    389  align-content: center;
    390  text-align: center;
    391  /* make the mutation appear on top of events */
    392  z-index: 6;
    393 
    394  border: 1px solid var(--tracer-mutation-darker-color);
    395 
    396  /**
    397   * Move the element at its middle of its coordinate so that the JS code
    398   * defining its coordinate doesn't have to care about its size
    399   */
    400  transform: translateX(6px) translateY(-50%);
    401 
    402  font-size: 12px;
    403  font-weight: bold;
    404  border-radius: 50%;
    405 }
    406 
    407 .tracer-slider-mutation,
    408 .tracer-slider-mutation div {
    409  background-color: var(--tracer-mutation-color);
    410  color: var(--tracer-mutation-darker-color);
    411  font-size: 12px;
    412  font-weight: bold;
    413 }
    414 
    415 .event-tooltip .tooltip-panel {
    416  padding: 10px;
    417 
    418  hr {
    419    border: none;
    420    border-block-end: 1px solid var(--theme-splitter-color);
    421  }
    422 }