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