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
4 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
10 /* === BEGIN netmonitor.inc.css === */
12 #requests-menu-empty-notice {
20 #requests-menu-perf-notice-button {
24 list-style-image: url("profiler-stopwatch.png");
25 -moz-image-region: rect(0px,32px,16px,16px);
28 #requests-menu-perf-notice-button .button-text {
32 /* Network requests table */
34 #requests-menu-toolbar {
37 #requests-menu-toolbar > .toolbar-box > .toolbar-startcap,
38 #requests-menu-toolbar > .toolbar-box > .toolbar-endcap {
42 .requests-menu-header:first-child {
43 -moz-padding-start: 4px;
44 -moz-margin-start: 4px;
47 .requests-menu-subitem {
51 .requests-menu-header:not(:last-child),
52 .requests-menu-subitem:not(:last-child) {
53 -moz-border-end: 1px solid #9C9CFF;
56 .requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
57 .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
60 .requests-menu-header-button,
61 #requests-menu-status-button {
62 background-color: transparent;
66 font-weight: inherit !important;
67 transition: background-color 0.1s ease-in-out;
70 .requests-menu-header-button > .button-box,
71 #requests-menu-status-button > .button-box {
73 -moz-padding-start: 0;
78 .requests-menu-header-button:hover {
79 background-color: #FFCF00;
82 .requests-menu-header-button:hover:active {
83 background-color: #FF9F00;
86 .requests-menu-header-button:not(:active)[sorted] {
87 background-color: #008484;
90 .requests-menu-header-button:not(:active)[sorted=ascending] {
91 background-image: radial-gradient(farthest-side at center top, rgba(0,0,0,.7), rgba(0,0,0,0.3));
92 background-size: 100% 1px;
93 background-repeat: no-repeat;
96 .requests-menu-header-button:not(:active)[sorted=descending] {
97 background-image: radial-gradient(farthest-side at center bottom, rgba(0,0,0,.7), rgba(0,0,0,0.3));
98 background-size: 100% 1px;
99 background-repeat: no-repeat;
100 background-position: bottom;
103 #requests-menu-status-button {
107 #requests-menu-status-button > .button-box {
111 /* Network requests table: specific column dimensions */
113 .requests-menu-status-and-method {
117 .requests-menu-status {
123 .requests-menu-method {
128 .requests-menu-icon-and-file {
133 .requests-menu-icon {
135 width: calc(1em + 4px);
136 height: calc(1em + 4px);
138 -moz-margin-end: 4px;
141 .requests-menu-icon {
142 outline: 1px solid #A09090;
145 .requests-menu-file {
149 .requests-menu-domain {
154 .requests-menu-type {
159 .requests-menu-size {
164 /* Network requests table: status codes */
166 box.requests-menu-status {
167 background-color: #A09090;
169 -moz-margin-start: 5px;
170 -moz-margin-end: 5px;
172 border: 1px solid #000000;
173 transition: background-color 0.5s ease-in-out;
176 label.requests-menu-status-code {
177 -moz-margin-start: 3px !important;
179 -moz-margin-end: -3em !important;
182 box.requests-menu-status:not([code]) {
183 background-color: #A09090; /* dark grey */
186 box.requests-menu-status[code^="1"] {
187 background-color: #9C9CFF; /* light blue */
190 box.requests-menu-status[code^="2"] {
191 background-color: #008484; /* green */
194 /* 3xx are triangles */
195 box.requests-menu-status[code^="3"] {
196 background-color: transparent;
199 border-left: 5px solid transparent;
200 border-right: 5px solid transparent;
201 border-bottom: 10px solid #FF9F00; /* light orange */
205 /* 4xx and 5xx are squares - error codes */
206 box.requests-menu-status[code^="4"] {
207 background-color: #FF0000; /* red */
208 border-radius: 0; /* squares */
211 box.requests-menu-status[code^="5"] {
212 background-color: #6000CF; /* pink? */
214 transform: rotate(45deg);
217 /* Network requests table: waterfall header */
219 #requests-menu-waterfall-label {
220 -moz-padding-start: 8px;
221 -moz-padding-end: 8px;
224 .requests-menu-timings-division {
227 -moz-padding-start: 4px;
228 -moz-border-start: 1px dotted #000000;
230 pointer-events: none;
233 .requests-menu-timings-division:not(:first-child) {
234 -moz-border-start: 1px dotted;
235 -moz-margin-start: -100px !important; /* Don't affect layout. */
238 .requests-menu-timings-division:-moz-locale-dir(ltr) {
239 transform-origin: left center;
242 .requests-menu-timings-division:-moz-locale-dir(rtl) {
243 transform-origin: right center;
246 .requests-menu-timings-division[division-scale=millisecond] {
247 -moz-border-start-color: #FF9F00 !important; /* Light foreground text */
250 .requests-menu-timings-division[division-scale=second] {
251 -moz-border-start-color: #E7ADE7 !important; /* Light orange highlight color */
255 .requests-menu-timings-division[division-scale=minute] {
256 -moz-border-start-color: #FF0000 !important; /* Red highlight color */
260 /* Network requests table: waterfall items */
262 .requests-menu-subitem.requests-menu-waterfall {
263 -moz-padding-start: 0px;
264 -moz-padding-end: 4px;
265 background-repeat: repeat-y; /* Background created on a <canvas> in js. */
266 background-position: -1px center;
269 .requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
270 background-position: right center;
273 .requests-menu-timings:-moz-locale-dir(ltr) {
274 transform-origin: left center;
277 .requests-menu-timings:-moz-locale-dir(rtl) {
278 transform-origin: right center;
281 .requests-menu-timings-total:-moz-locale-dir(ltr) {
282 transform-origin: left center;
285 .requests-menu-timings-total:-moz-locale-dir(rtl) {
286 transform-origin: right center;
289 .requests-menu-timings-total {
290 -moz-padding-start: 4px;
295 .requests-menu-timings-box {
299 .requests-menu-timings-box.blocked {
300 background-color: #FF0000; /* red */
303 .requests-menu-timings-box.dns {
304 background-color: #E7ADE7; /* pink */
307 .requests-menu-timings-box.connect {
308 background-color: #FF9F00; /* orange */
311 .requests-menu-timings-box.send {
312 background-color: #FFCF00; /* light blue */
315 .requests-menu-timings-box.wait {
316 background-color: #9C9CFF; /* blue grey */
319 .requests-menu-timings-box.receive {
320 background-color: #A09090; /* green */
325 .side-menu-widget-item-contents {
329 .side-menu-widget-container {
330 box-shadow: none !important;
333 .side-menu-widget-item:not(.selected)[odd] {
334 background: rgba(255,159,0,0.1);
337 /* Network request details */
339 #details-pane-toggle {
340 list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
341 -moz-image-region: rect(0px,16px,16px,0px);
344 #details-pane-toggle[pane-collapsed] {
345 list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
348 #details-pane-toggle:hover,
349 #details-pane-toggle:hover:active {
350 -moz-image-region: rect(0px,32px,16px,16px);
353 /* Network request details tabpanels */
356 background-color: #000000;
360 /* Summary tabpanel */
362 .tabpanel-summary-container {
366 .tabpanel-summary-label {
367 -moz-padding-start: 4px;
368 -moz-padding-end: 3px;
372 .tabpanel-summary-value {
373 -moz-padding-start: 3px;
376 /* Headers tabpanel */
378 #headers-summary-status,
379 #headers-summary-version {
383 #headers-summary-size {
387 #headers-summary-resend {
389 /* min-height: 20px;*/
392 /* Response tabpanel */
394 #response-content-info-header {
398 background-color: #FF0000; /* Red highlight */
399 color: #000000; /* Light foreground text */
402 #response-content-image-box {
404 padding-bottom: 10px;
407 #response-content-image {
409 border: 1px dashed #A09090;
413 /* Preview tabpanel */
424 /* Timings tabpanel */
426 #timings-tabpanel .tabpanel-summary-label {
430 #timings-tabpanel .requests-menu-timings-box {
431 transition: transform 0.2s ease-out;
436 #timings-tabpanel .requests-menu-timings-total {
437 transition: transform 0.2s ease-out;
440 /* Custom request form */
443 padding: 0.6em 0.5em;
454 #custom-method-value {
460 #requests-menu-footer {
461 border-top: 1px solid #9C9CFF;
465 .requests-menu-footer-button,
466 .requests-menu-footer-label {
469 -moz-margin-end: 3px;
476 .requests-menu-footer-spacer {
480 .requests-menu-footer-spacer,
481 .requests-menu-footer-button {
484 .requests-menu-footer-button {
487 .requests-menu-footer-button:hover {
490 .requests-menu-footer-button:hover:active {
493 .requests-menu-footer-button:not(:active)[checked] {
496 .requests-menu-footer-label {
500 /* Performance analysis buttons */
502 #requests-menu-network-summary-button {
503 list-style-image: url("profiler-stopwatch.png");
504 -moz-image-region: rect(0px,32px,16px,16px);
509 #requests-menu-network-summary-label {
510 -moz-padding-start: 0;
514 #requests-menu-network-summary-label:hover {
515 text-decoration: underline;
518 /* Performance analysis view */
520 #network-statistics-toolbar {
521 /* Make the toolbar invisible, it only hold the back button */
522 -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar");
523 background-color: #000000;
526 #network-statistics-back-button {
531 #network-statistics-view-splitter {
533 pointer-events: none;
536 #network-statistics-charts {
539 background: #000000; /* Toolbars */
542 #network-statistics-charts .pie-chart-container {
543 -moz-margin-start: 3vw;
544 -moz-margin-end: 1vw;
547 #network-statistics-charts .table-chart-container {
548 -moz-margin-start: 1vw;
549 -moz-margin-end: 3vw;
552 .chart-colored-blob[name=html] {
553 fill: #A09090; /* Blue-Grey highlight */
557 .chart-colored-blob[name=css] {
558 fill: #9C9CFF; /* Blue highlight */
562 .chart-colored-blob[name=js] {
563 fill: #FFCF00; /* Light Orange highlight */
567 .chart-colored-blob[name=xhr] {
568 fill: #FF9F00; /* Orange highlight */
572 .chart-colored-blob[name=fonts] {
573 fill: #6000CF; /* Purple highlight */
577 .chart-colored-blob[name=images] {
578 fill: #E7ADE7; /* Pink highlight */
582 .chart-colored-blob[name=media] {
583 fill: #008484; /* Green highlight */
587 .chart-colored-blob[name=flash] {
588 fill: #FF0000; /* Red highlight */
592 .table-chart-row-label[name=cached] {
596 .table-chart-row-label[name=count] {
601 .table-chart-row-label[name=label] {
605 .table-chart-row-label[name=size] {
609 .table-chart-row-label[name=time] {
613 /* Responsive sidebar */
614 @media (max-width: 700px) {
615 #requests-menu-toolbar {
619 .requests-menu-header-button {
624 margin: 0 !important;
625 /* To prevent all the margin hacks to hide the sidebar. */
628 .requests-menu-status-and-method {
632 .requests-menu-icon-and-file,
633 .requests-menu-domain {
637 .requests-menu-type {
641 .requests-menu-size {
643 border-width: 0 !important;
644 box-shadow: none !important;
645 /* The "Timeline" header is not visible anymore, and thus the
646 right border and box-shadow of "Size" column should be hidden. */
650 @media (min-width: 701px) {
651 #network-table[type-overflows] .requests-menu-domain {
652 border-width: 0 !important;
653 box-shadow: none !important;
654 /* The "Type" header is not visible anymore, and thus the
655 right border and box-shadow of "Domain" column should be hidden. */
658 #network-table[domain-overflows] .requests-menu-icon-and-file {
659 border-width: 0 !important;
660 box-shadow: none !important;
661 /* The "Domain" header is not visible anymore, and thus the
662 right border and box-shadow of "File" column should be hidden. */
666 /* === END netmonitor.inc.css === */