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: 2dppx) {
 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[allocations-hidden] .call-tree-cell[type="allocations"],
 197 .call-tree-cells-container[allocations-hidden] .call-tree-cell[type="self-allocations"],
 198 .call-tree-cells-container[categories-hidden] .call-tree-category {
 199   display: none;
 200 }
 201
 202 .call-tree-header[type="duration"],
 203 .call-tree-cell[type="duration"],
 204 .call-tree-header[type="self-duration"],
 205 .call-tree-cell[type="self-duration"] {
 206   width: 9em;
 207 }
 208
 209 .call-tree-header[type="percentage"],
 210 .call-tree-cell[type="percentage"],
 211 .call-tree-header[type="self-percentage"],
 212 .call-tree-cell[type="self-percentage"] {
 213   width: 6em;
 214 }
 215
 216 .call-tree-header[type="samples"],
 217 .call-tree-cell[type="samples"] {
 218   width: 5em;
 219 }
 220
 221 .call-tree-header[type="function"],
 222 .call-tree-cell[type="function"] {
 223   -moz-box-flex: 1;
 224 }
 225
 226 .call-tree-header,
 227 .call-tree-cell {
 228   -moz-box-align: center;
 229   overflow: hidden;
 230   padding: 1px 4px;
 231   color: var(--theme-body-color);
 232 }
 233
 234 .call-tree-header:not(:last-child),
 235 .call-tree-cell:not(:last-child) {
 236   -moz-border-end-width: 1px;
 237   -moz-border-end-style: solid;
 238 }
 239
 240 .call-tree-header,
 241 .call-tree-cell {
 242   -moz-border-end-color: var(--cell-border-color);
 243 }
 244
 245 .call-tree-header:not(:last-child) {
 246   text-align: center;
 247 }
 248
 249 .call-tree-cell:not(:last-child) {
 250   text-align: end;
 251 }
 252
 253 .call-tree-header {
 254   background-color: var(--theme-contrastsidebar-background);
 255   color: var(--theme-contrastsidebar-color);
 256 }
 257
 258 .call-tree-item:last-child:not(:focus) {
 259   border-bottom: 1px solid var(--cell-border-color);
 260 }
 261
 262 .call-tree-item:nth-child(2n) {
 263   background-color: var(--row-alt-background-color);
 264 }
 265
 266 .call-tree-item:hover {
 267   background-color: var(--row-hover-background-color);
 268 }
 269
 270 .call-tree-item:focus {
 271   background-color: var(--theme-selection-background);
 272   color: var(--theme-selection-color);
 273 }
 274
 275 .call-tree-item:focus label {
 276   color: var(--theme-selection-color) !important;
 277 }
 278
 279 .call-tree-item:focus .call-tree-cell {
 280   -moz-border-end-color: var(--focus-cell-border-color);
 281 }
 282
 283 .call-tree-item:not([origin="content"]) .call-tree-name,
 284 .call-tree-item:not([origin="content"]) .call-tree-url,
 285 .call-tree-item:not([origin="content"]) .call-tree-line,
 286 .call-tree-item:not([origin="content"]) .call-tree-column {
 287   /* Style chrome and non-JS nodes differently. */
 288   opacity: 0.6;
 289 }
 290
 291 .call-tree-url {
 292   -moz-margin-start: 4px !important;
 293   cursor: pointer;
 294 }
 295
 296 .call-tree-url:hover {
 297   text-decoration: underline;
 298 }
 299
 300 .call-tree-url {
 301   color: var(--theme-highlight-blue);
 302 }
 303
 304 .call-tree-line {
 305   color: var(--theme-content-color2);
 306 }
 307
 308 .call-tree-column {
 309   color: var(--theme-highlight-orange);
 310   opacity: 0.6;
 311 }
 312
 313 .call-tree-host {
 314   -moz-margin-start: 8px !important;
 315   font-size: 90%;
 316 }
 317
 318 .call-tree-host {
 319   color: var(--theme-highlight-pink);
 320 }
 321
 322 .call-tree-name[value=""],
 323 .call-tree-url[value=""],
 324 .call-tree-line[value=""],
 325 .call-tree-column[value=""],
 326 .call-tree-host[value=""] {
 327   display: none;
 328 }
 329
 330 .call-tree-zoom {
 331   -moz-appearance: none;
 332   background-color: transparent;
 333   background-position: center;
 334   background-repeat: no-repeat;
 335   background-size: 11px;
 336   min-width: 11px;
 337   -moz-margin-start: 8px !important;
 338   cursor: zoom-in;
 339   opacity: 0;
 340 }
 341
 342 .call-tree-zoom {
 343   background-image: url("magnifying-glass.png");
 344 }
 345
 346 @media (min-resolution: 2dppx) {
 347   .call-tree-zoom {
 348     background-image: url("magnifying-glass@2x.png");
 349   }
 350 }
 351
 352 .call-tree-item:hover .call-tree-zoom {
 353   transition: opacity 0.3s ease-in;
 354   opacity: 1;
 355 }
 356
 357 .call-tree-item:hover .call-tree-zoom:hover {
 358   opacity: 0;
 359 }
 360
 361 .call-tree-category {
 362   transform: scale(0.75);
 363   transform-origin: center right;
 364 }