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