tor-browser

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

SmartTrace.css (3840B)

      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 file,
      3 * You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 /**
      6 * SmartTrace Component
      7 * Styles for React component at `devtools/client/shared/components/SmartTrace.js`
      8 */
      9 
     10 .frames-group .frame {
     11  display: block;
     12  padding-inline-start: 16px;
     13 }
     14 
     15 .img.annotation-logo {
     16  background-color: var(--theme-body-color);
     17 }
     18 
     19 .frames .top-frames-list[role="listbox"] {
     20  display: inline-grid;
     21  grid-template-columns: auto 1fr;
     22  grid-column-gap: 8px;
     23  outline-offset: -2px;
     24 }
     25 
     26 .frames .frame {
     27  /* Parent is a grid container whose grid template we want to use, so span the whole line */
     28  grid-column: 1 / -1;
     29  display: grid;
     30  /* Grid is defined in `.frames [role="list"]` rule  */
     31  grid-template-columns: subgrid;
     32  cursor: pointer;
     33  white-space: normal;
     34  outline-offset: -2px;
     35 }
     36 
     37 .frames .title {
     38  text-overflow: ellipsis;
     39  white-space: nowrap;
     40  grid-column: 1 / 2;
     41  color: var(--console-output-color);
     42 }
     43 
     44 .frames .location {
     45  color: var(--theme-internal-link-color);
     46  grid-column: -1 / -2;
     47  /* Force the location to be on one line and crop at start */
     48  text-overflow: ellipsis;
     49  white-space: nowrap;
     50  direction: rtl;
     51  text-align: end;
     52 }
     53 
     54 .frames .location .line {
     55  color: var(--frame-link-line-color);
     56 }
     57 
     58 .frames .frames-list .frame:hover .location {
     59  text-decoration: underline;
     60 }
     61 
     62 .frames .location-async-cause {
     63  grid-column: 1 / -1;
     64  color: var(--theme-comment);
     65 }
     66 
     67 /******* Group styles *******/
     68 .frames-group {
     69  grid-column: 1 / -1;
     70 }
     71 
     72 .frames .frames-group {
     73  display: flex;
     74 }
     75 
     76 .group-description {
     77  display: flex;
     78  align-items: center;
     79  color: var(--console-output-color);
     80 }
     81 
     82 .frames .frames-list {
     83  margin-block-start: 2px;
     84  /*
     85   * We want to display each frame name on its own row, without having new lines in the
     86   * clipboard when copying it. This does the trick.
     87   */
     88  display: grid;
     89  grid-template-columns: 1fr;
     90 }
     91 
     92 .frames .frames-list .frame {
     93  padding-inline-start: 0;
     94  text-overflow: ellipsis;
     95 }
     96 
     97 .frames-list .title {
     98  grid-column: -1 / 1;
     99  padding-inline-start: 16px;
    100 }
    101 
    102 .frames .frames-list .frame:first-of-type {
    103  border-top: 1px solid var(--theme-splitter-color);
    104  padding-block-start: 4px;
    105 }
    106 
    107 .frames .frames-list .frame:last-of-type {
    108  margin-block-end: 4px;
    109  border-bottom: 1px solid var(--theme-splitter-color);
    110 }
    111 
    112 .badge {
    113  background: var(--theme-toolbar-background-hover);
    114  color: var(--theme-body-color);
    115  border-radius: 8px;
    116  padding: 1px 4px;
    117  font-size: 0.9em;
    118  display: inline-block;
    119  text-align: center;
    120  cursor: default;
    121  margin-inline-start: 4px;
    122 }
    123 
    124 .frames .frames-group.expanded .group-description,
    125 .frames .frames-group.expanded .badge {
    126  color: var(--theme-highlight-blue);
    127 }
    128 
    129 /** Images **/
    130 
    131 .frames .img.annotation-logo {
    132  /* FIXME: In order to display the Framework icons, we need to find a way to share CSS
    133   * from the debugger, where the background images are defined.
    134   * See https://github.com/firefox-devtools/debugger.html/issues/7782.
    135   */
    136  display: none;
    137  /*
    138  background-color:var(--theme-body-color);
    139  display: inline-block;
    140  width: 12px;
    141  height:12px;
    142  vertical-align: middle;
    143  margin-inline-end:4px;
    144  */
    145 }
    146 
    147 .expanded .img.annotation-logo {
    148  background-color: currentColor;
    149 }
    150 
    151 .frames-group .img.arrow {
    152  mask: url("chrome://devtools/content/debugger/images/arrow.svg");
    153  margin-inline-end: 4px;
    154  background-color: var(--theme-icon-dimmed-color);
    155  width: 10px;
    156  height: 10px;
    157  mask-size: 100%;
    158  display: inline-block;
    159  transform: rotate(-90deg);
    160  transition: transform 0.18s ease;
    161 }
    162 
    163 .frames-group .img.arrow.expanded {
    164  transform: rotate(0);
    165 }
    166 
    167 /* Frameworks */
    168 :root.theme-dark .annotation-logo:not(.angular) {
    169  background-color: var(--theme-highlight-blue);
    170 }