LCARStrek/browser/devtools/timeline.css

   1 /* vim:set ts=2 sw=2 sts=2 et: */
   2 /* This Source Code Form is subject to the terms of the Mozilla Public
   3  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
   4  * You can obtain one at http://mozilla.org/MPL/2.0/. */
   5
   6 #record-button {
   7   list-style-image: url("profiler-stopwatch.svg");
   8   min-width: 24px;
   9 }
  10
  11 #record-button[checked] {
  12   list-style-image: url("profiler-stopwatch-checked.svg");
  13 }
  14
  15 #record-button:not([checked]) ~ #record-label {
  16   visibility: hidden;
  17 }
  18
  19 #memory-checkbox .checkbox-label {
  20   line-height: 100%;
  21 }
  22
  23 #filter-button {
  24   list-style-image: url(timeline-filter.svg#filter);
  25   min-width: 24px;
  26 }
  27
  28 #filter-button[disabled] {
  29   list-style-image: url(timeline-filter.svg#filter-disabled);
  30 }
  31
  32 #filter-button:not([disabled]):hover,
  33 #filter-button[open] {
  34   list-style-image: url(timeline-filter.svg#filter-open);
  35 }
  36
  37 #timelineFilterPopup > menuitem:before {
  38   content: "";
  39   display: block;
  40   width: 8px;
  41   height: 8px;
  42   margin: 0 8px;
  43   border: 1px solid;
  44   border-radius: 1px;
  45   background-color: var(--bullet-bg);
  46   border-color: var(--bullet-border);
  47 }
  48
  49 .notice-container {
  50   font-size: 120%;
  51   padding-bottom: 35vh;
  52 }
  53
  54 .notice-container {
  55   background: #A09090; /* Toolbars */
  56   color: #000000; /* Light foreground text */
  57 }
  58
  59 #empty-notice button,
  60 #recording-notice button {
  61   min-width: 30px;
  62   min-height: 28px;
  63   margin: 0;
  64   list-style-image: url("profiler-stopwatch.svg");
  65 }
  66
  67 #empty-notice button[checked],
  68 #recording-notice button[checked] {
  69   list-style-image: url("profiler-stopwatch-checked.svg");
  70 }
  71
  72 #empty-notice button .button-text,
  73 #recording-notice button .button-text {
  74   display: none;
  75 }
  76
  77 #timeline-pane {
  78   border-top: 1px solid #9C9CFF;
  79 }
  80
  81 .waterfall-list-contents {
  82   /* Hack: force hardware acceleration */
  83   transform: translateZ(1px);
  84   overflow-x: hidden;
  85   overflow-y: auto;
  86 }
  87
  88 .waterfall-header-contents {
  89   overflow-x: hidden;
  90 }
  91
  92 .waterfall-background-ticks {
  93   /* Background created on a <canvas> in js. */
  94   /* @see browser/devtools/timeline/widgets/waterfall.js */
  95   background-image: -moz-element(#waterfall-background);
  96   background-repeat: repeat-y;
  97   background-position: -1px center;
  98 }
  99
 100 .waterfall-marker-container[is-spacer] {
 101   pointer-events: none;
 102 }
 103
 104 .waterfall-marker-container:not([is-spacer]):nth-child(2n) {
 105   background-color: var(--theme-contrast-background);
 106 }
 107
 108 .waterfall-marker-container:hover {
 109   background-color: var(--theme-hover-background) !important;
 110   color: var(--theme-hover-color) !important;
 111 }
 112
 113 .waterfall-marker-item {
 114   overflow: hidden;
 115 }
 116
 117 .waterfall-sidebar {
 118   -moz-border-end: 1px solid;
 119
 120   -moz-border-end-color: #9C9CFF;
 121 }
 122
 123 .waterfall-marker-container:hover > .waterfall-sidebar {
 124   background-color: transparent;
 125 }
 126
 127 .waterfall-header-name {
 128   padding: 4px;
 129 }
 130
 131 .waterfall-header-tick {
 132   width: 100px;
 133   font-size: 9px;
 134   transform-origin: left center;
 135 }
 136
 137 .waterfall-header-tick {
 138   color: #FF9F00;
 139 }
 140
 141 .waterfall-header-tick:not(:first-child) {
 142   -moz-margin-start: -100px !important; /* Don't affect layout. */
 143 }
 144
 145 .waterfall-marker-bullet {
 146   width: 8px;
 147   height: 8px;
 148   -moz-margin-start: 8px;
 149   -moz-margin-end: 6px;
 150   border: 1px solid;
 151   border-radius: 1px;
 152 }
 153
 154 .waterfall-marker-name {
 155   font-size: 95%;
 156   padding-bottom: 1px !important;
 157 }
 158
 159 .waterfall-marker-bar {
 160   height: 9px;
 161   border: 1px solid;
 162   border-radius: 1px;
 163   transform-origin: left center;
 164 }
 165
 166 .waterfall-marker-container.selected > .waterfall-sidebar,
 167 .waterfall-marker-container.selected > .waterfall-marker-item {
 168   background-color: #008484; /* Select Highlight Blue */
 169   color: #FFCF00; /* Light foreground text */
 170 }
 171
 172 .waterfall-marker-container.selected .waterfall-marker-bullet,
 173 .waterfall-marker-container.selected .waterfall-marker-bar {
 174   border-color: initial !important;
 175 }
 176
 177 .waterfall-marker-location {
 178    color: #3333FF;
 179 }
 180
 181 .waterfall-marker-location:hover,
 182 .waterfall-marker-location:focus {
 183    text-decoration: underline;
 184 }
 185
 186 #timeline-waterfall-details {
 187   -moz-padding-start: 8px;
 188   -moz-padding-end: 8px;
 189   padding-top: 2vh;
 190   overflow: auto;
 191 }
 192
 193 .marker-details-bullet {
 194   width: 8px;
 195   height: 8px;
 196   border: 1px solid;
 197   border-radius: 1px;
 198 }
 199
 200 #timeline-waterfall-details > * {
 201   padding-top: 3px;
 202 }
 203
 204 .marker-details-labelname {
 205   -moz-padding-end: 4px;
 206 }
 207
 208 .marker-details-type {
 209   font-size: 1.2em;
 210   font-weight: bold;
 211 }
 212
 213 .marker-details-duration {
 214   font-weight: bold;
 215 }