LCARStrek/browser/devtools/profiler.css

   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 /* === file identical to profiler.inc.css === */
   6
   7 /* CSS Variables specific to this panel that aren't defined by the themes */
   8 .theme-dark,
   9 .theme-light {
  10   --cell-border-color: #9C9CFF;
  11   --focus-cell-border-color: #9C9CFF;
  12   --row-alt-background-color: #402800;
  13   --row-hover-background-color: #795900;
  14 }
  15
  16 window {
  17   padding: 0;
  18 }
  19
  20 /* Reload and waiting notices */
  21
  22 .notice-container {
  23   margin-top: -50vh;
  24   font-size: 120%;
  25   background-color: var(--theme-toolbar-background);
  26   color: var(--theme-body-color);
  27 }
  28
  29 #empty-notice button,
  30 #recording-notice button {
  31   min-width: 30px;
  32   min-height: 28px;
  33   margin: 0;
  34   list-style-image: url("profiler-stopwatch.svg");
  35 }
  36
  37 #empty-notice button[checked],
  38 #recording-notice button[checked] {
  39   list-style-image: url("profiler-stopwatch-checked.svg");
  40 }
  41
  42 #empty-notice button .button-text,
  43 #recording-notice button .button-text {
  44   display: none;
  45 }
  46
  47 #loading-notice {
  48   font-size: 250%;
  49   color: #9C9CFF;
  50 }
  51
  52 /* Recordings pane */
  53
  54 #recordings-pane > tabs,
  55 #recordings-pane .devtools-toolbar {
  56   -moz-border-end-width: 1px;
  57 }
  58
  59 #recordings-pane > tabs,
  60 #recordings-pane .devtools-toolbar {
  61   -moz-border-end-color: var(--theme-splitter-color);
  62 }
  63
  64 #record-button {
  65   list-style-image: url("profiler-stopwatch.svg");
  66 }
  67
  68 #record-button[checked] {
  69   list-style-image: url("profiler-stopwatch-checked.svg");
  70 }
  71
  72 #record-button[locked] {
  73   pointer-events: none;
  74 }
  75
  76 /* Recording items */
  77
  78 .recording-item {
  79   padding: 4px;
  80 }
  81
  82 .recording-item-title {
  83   font-size: 110%;
  84 }
  85
  86 .recording-item-footer {
  87   padding-top: 4px;
  88   font-size: 90%;
  89 }
  90
  91 .recording-item-save {
  92   text-decoration: underline;
  93   cursor: pointer;
  94 }
  95
  96 .recording-item-duration,
  97 .recording-item-save {
  98   color: var(--theme-body-color-alt);
  99 }
 100
 101 #recordings-list .selected label {
 102   /* Text inside a selected item should not be custom colored. */
 103   color: inherit !important;
 104 }
 105
 106 /* Profile pane */
 107
 108 #profile-content tabs {
 109   -moz-box-align: stretch;
 110   height: 24px;
 111   font: inherit;
 112 }
 113
 114 #profile-content tab {
 115   -moz-box-flex: 0;
 116   background-color: transparent;
 117   border: none;
 118   border-radius: 0;
 119   padding: 0;
 120   text-shadow: none;
 121   transition-duration: 0.25s;
 122   transition-timing-function: ease-in-out;
 123   transition-property: opacity, transform;
 124 }
 125
 126 #profile-content tab {
 127   color: var(--theme-body-color);
 128 }
 129
 130 #profile-content tab:not([selected]) {
 131   cursor: pointer;
 132 }
 133
 134 #profile-content tab[covered] {
 135   opacity: 0;
 136   transform: translateY(100%);
 137 }
 138
 139 #profile-content tab {
 140   -moz-appearance: none;
 141   -moz-border-end: 1px solid var(--theme-splitter-color);
 142 }
 143
 144 #profile-content tab:hover {
 145   background-color: var(--theme-hover-background);
 146   color: var(--theme-hover-color);
 147 }
 148
 149 #profile-content tab[selected] {
 150   background-color: var(--theme-selection-background);
 151   color: var(--theme-selection-color);
 152 }
 153
 154 #profile-content tabpanel {
 155   -moz-box-orient: vertical;
 156   transform: translateZ(1px); /* Make sure the tabpanel appears above the tab */
 157 }
 158
 159 #profile-newtab-button {
 160   -moz-appearance: none;
 161   background-color: transparent;
 162   background-position: 4px 2px;
 163   background-size: 54px 20px;
 164   min-width: 26px;
 165   margin: 0;
 166   border: none;
 167   cursor: pointer;
 168 }
 169
 170 #profile-newtab-button {
 171   background-color: #C09070;
 172 }
 173
 174 #profile-newtab-button {
 175   background-image: url("newtab.png");
 176 }
 177
 178 @media (min-resolution: 1.25dppx) {
 179   #profile-newtab-button {
 180     background-image: url("newtab@2x.png");
 181   }
 182 }
 183
 184 /* Profile call tree */
 185
 186 .call-tree-headers-container {
 187   border-top: 1px solid var(--theme-splitter-color);
 188 }
 189
 190 .call-tree-cells-container {
 191   /* Hack: force hardware acceleration */
 192   transform: translateZ(1px);
 193   overflow: auto;
 194 }
 195
 196 .call-tree-cells-container[categories-hidden] .call-tree-category {
 197   display: none;
 198 }
 199
 200 .call-tree-header[type="duration"],
 201 .call-tree-cell[type="duration"],
 202 .call-tree-header[type="self-duration"],
 203 .call-tree-cell[type="self-duration"] {
 204   width: 9em;
 205 }
 206
 207 .call-tree-header[type="percentage"],
 208 .call-tree-cell[type="percentage"],
 209 .call-tree-header[type="self-percentage"],
 210 .call-tree-cell[type="self-percentage"] {
 211   width: 6em;
 212 }
 213
 214 .call-tree-header[type="samples"],
 215 .call-tree-cell[type="samples"] {
 216   width: 5em;
 217 }
 218
 219 .call-tree-header[type="function"],
 220 .call-tree-cell[type="function"] {
 221   -moz-box-flex: 1;
 222 }
 223
 224 .call-tree-header,
 225 .call-tree-cell {
 226   -moz-box-align: center;
 227   overflow: hidden;
 228   padding: 1px 4px;
 229   color: var(--theme-body-color);
 230 }
 231
 232 .call-tree-header:not(:last-child),
 233 .call-tree-cell:not(:last-child) {
 234   -moz-border-end-width: 1px;
 235   -moz-border-end-style: solid;
 236 }
 237
 238 .call-tree-header,
 239 .call-tree-cell {
 240   -moz-border-end-color: var(--cell-border-color);
 241 }
 242
 243 .call-tree-header:not(:last-child) {
 244   text-align: center;
 245 }
 246
 247 .call-tree-cell:not(:last-child) {
 248   text-align: end;
 249 }
 250
 251 .call-tree-header {
 252   background-color: var(--theme-contrastsidebar-background);
 253   color: var(--theme-contrastsidebar-color);
 254 }
 255
 256 .call-tree-item:last-child:not(:focus) {
 257   border-bottom: 1px solid var(--cell-border-color);
 258 }
 259
 260 .call-tree-item:nth-child(2n) {
 261   background-color: var(--row-alt-background-color);
 262 }
 263
 264 .call-tree-item:hover {
 265   background-color: var(--row-hover-background-color);
 266 }
 267
 268 .call-tree-item:focus {
 269   background-color: var(--theme-selection-background);
 270   color: var(--theme-selection-color);
 271 }
 272
 273 .call-tree-item:focus label {
 274   color: var(--theme-selection-color) !important;
 275 }
 276
 277 .call-tree-item:focus .call-tree-cell {
 278   -moz-border-end-color: var(--focus-cell-border-color);
 279 }
 280
 281 .call-tree-item:not([origin="content"]) .call-tree-name,
 282 .call-tree-item:not([origin="content"]) .call-tree-url,
 283 .call-tree-item:not([origin="content"]) .call-tree-line,
 284 .call-tree-item:not([origin="content"]) .call-tree-column {
 285   /* Style chrome and non-JS nodes differently. */
 286   opacity: 0.6;
 287 }
 288
 289 .call-tree-url {
 290   -moz-margin-start: 4px !important;
 291   cursor: pointer;
 292 }
 293
 294 .call-tree-url:hover {
 295   text-decoration: underline;
 296 }
 297
 298 .call-tree-url {
 299   color: var(--theme-highlight-blue);
 300 }
 301
 302 .call-tree-line {
 303   color: var(--theme-content-color2);
 304 }
 305
 306 .call-tree-column {
 307   color: var(--theme-highlight-orange);
 308   opacity: 0.6;
 309 }
 310
 311 .call-tree-host {
 312   -moz-margin-start: 8px !important;
 313   font-size: 90%;
 314 }
 315
 316 .call-tree-host {
 317   color: var(--theme-highlight-pink);
 318 }
 319
 320 .call-tree-name[value=""],
 321 .call-tree-url[value=""],
 322 .call-tree-line[value=""],
 323 .call-tree-column[value=""],
 324 .call-tree-host[value=""] {
 325   display: none;
 326 }
 327
 328 .call-tree-zoom {
 329   -moz-appearance: none;
 330   background-color: transparent;
 331   background-position: center;
 332   background-repeat: no-repeat;
 333   background-size: 11px;
 334   min-width: 11px;
 335   -moz-margin-start: 8px !important;
 336   cursor: zoom-in;
 337   opacity: 0;
 338 }
 339
 340 .call-tree-zoom {
 341   background-image: url("magnifying-glass.png");
 342 }
 343
 344 @media (min-resolution: 1.25dppx) {
 345   .call-tree-zoom {
 346     background-image: url("magnifying-glass@2x.png");
 347   }
 348 }
 349
 350 .call-tree-item:hover .call-tree-zoom {
 351   transition: opacity 0.3s ease-in;
 352   opacity: 1;
 353 }
 354
 355 .call-tree-item:hover .call-tree-zoom:hover {
 356   opacity: 0;
 357 }
 358
 359 .call-tree-category {
 360   transform: scale(0.75);
 361   transform-origin: center right;
 362 }