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[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   /* Style chrome and non-JS nodes differently. */
 285   opacity: 0.6;
 286 }
 287
 288 .call-tree-url {
 289   -moz-margin-start: 4px !important;
 290   cursor: pointer;
 291 }
 292
 293 .call-tree-url:hover {
 294   text-decoration: underline;
 295 }
 296
 297 .call-tree-url {
 298   color: var(--theme-highlight-blue);
 299 }
 300
 301 .call-tree-line {
 302   color: var(--theme-content-color2);
 303 }
 304
 305 .call-tree-host {
 306   -moz-margin-start: 8px !important;
 307   font-size: 90%;
 308 }
 309
 310 .call-tree-host {
 311   color: var(--theme-highlight-pink);
 312 }
 313
 314 .call-tree-url[value=""],
 315 .call-tree-line[value=""],
 316 .call-tree-host[value=""] {
 317   display: none;
 318 }
 319
 320 .call-tree-zoom {
 321   -moz-appearance: none;
 322   background-color: transparent;
 323   background-position: center;
 324   background-repeat: no-repeat;
 325   background-size: 11px;
 326   min-width: 11px;
 327   -moz-margin-start: 8px !important;
 328   cursor: zoom-in;
 329   opacity: 0;
 330 }
 331
 332 .call-tree-zoom {
 333   background-image: url("magnifying-glass.png");
 334 }
 335
 336 @media (min-resolution: 2dppx) {
 337   .call-tree-zoom {
 338     background-image: url("magnifying-glass@2x.png");
 339   }
 340 }
 341
 342 .call-tree-item:hover .call-tree-zoom {
 343   transition: opacity 0.3s ease-in;
 344   opacity: 1;
 345 }
 346
 347 .call-tree-item:hover .call-tree-zoom:hover {
 348   opacity: 0;
 349 }
 350
 351 .call-tree-category {
 352   transform: scale(0.75);
 353   transform-origin: center right;
 354 }