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-file {
132 .requests-menu-domain {
136 .requests-menu-type {
141 .requests-menu-size {
146 /* Network requests table: status codes */
148 box.requests-menu-status {
149 background-color: #A09090;
151 -moz-margin-start: 5px;
152 -moz-margin-end: 5px;
154 border: 1px solid #000000;
155 transition: background-color 0.5s ease-in-out;
158 label.requests-menu-status-code {
159 -moz-margin-start: 3px !important;
161 -moz-margin-end: -3em !important;
164 box.requests-menu-status:not([code]) {
165 background-color: #A09090; /* dark grey */
168 box.requests-menu-status[code^="1"] {
169 background-color: #9C9CFF; /* light blue */
172 box.requests-menu-status[code^="2"] {
173 background-color: #008484; /* green */
176 /* 3xx are triangles */
177 box.requests-menu-status[code^="3"] {
178 background-color: transparent;
181 border-left: 5px solid transparent;
182 border-right: 5px solid transparent;
183 border-bottom: 10px solid #FF9F00; /* light orange */
187 /* 4xx and 5xx are squares - error codes */
188 box.requests-menu-status[code^="4"] {
189 background-color: #FF0000; /* red */
190 border-radius: 0; /* squares */
193 box.requests-menu-status[code^="5"] {
194 background-color: #6000CF; /* pink? */
196 transform: rotate(45deg);
199 /* Network requests table: waterfall header */
201 #requests-menu-waterfall-label {
202 -moz-padding-start: 8px;
203 -moz-padding-end: 8px;
206 .requests-menu-timings-division {
209 -moz-padding-start: 4px;
210 -moz-border-start: 1px dotted #000000;
212 pointer-events: none;
215 .requests-menu-timings-division:not(:first-child) {
216 -moz-border-start: 1px dotted;
217 -moz-margin-start: -100px !important; /* Don't affect layout. */
220 .requests-menu-timings-division:-moz-locale-dir(ltr) {
221 transform-origin: left center;
224 .requests-menu-timings-division:-moz-locale-dir(rtl) {
225 transform-origin: right center;
228 .requests-menu-timings-division[division-scale=millisecond] {
229 -moz-border-start-color: #FF9F00 !important; /* Light foreground text */
232 .requests-menu-timings-division[division-scale=second] {
233 -moz-border-start-color: #E7ADE7 !important; /* Light orange highlight color */
237 .requests-menu-timings-division[division-scale=minute] {
238 -moz-border-start-color: #FF0000 !important; /* Red highlight color */
242 /* Network requests table: waterfall items */
244 .requests-menu-subitem.requests-menu-waterfall {
245 -moz-padding-start: 0px;
246 -moz-padding-end: 4px;
247 background-repeat: repeat-y; /* Background created on a <canvas> in js. */
248 background-position: -1px center;
249 margin-top: -1px; /* Compensate borders. */
253 .requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
254 background-position: right center;
257 .requests-menu-timings:-moz-locale-dir(ltr) {
258 transform-origin: left center;
261 .requests-menu-timings:-moz-locale-dir(rtl) {
262 transform-origin: right center;
265 .requests-menu-timings-total:-moz-locale-dir(ltr) {
266 transform-origin: left center;
269 .requests-menu-timings-total:-moz-locale-dir(rtl) {
270 transform-origin: right center;
273 .requests-menu-timings-total {
274 -moz-padding-start: 4px;
279 .requests-menu-timings-box {
283 .requests-menu-timings-box.blocked {
284 background-color: #FF0000; /* red */
287 .requests-menu-timings-box.dns {
288 background-color: #E7ADE7; /* pink */
291 .requests-menu-timings-box.connect {
292 background-color: #FF9F00; /* orange */
295 .requests-menu-timings-box.send {
296 background-color: #FFCF00; /* light blue */
299 .requests-menu-timings-box.wait {
300 background-color: #9C9CFF; /* blue grey */
303 .requests-menu-timings-box.receive {
304 background-color: #A09090; /* green */
309 .side-menu-widget-item-contents {
313 .side-menu-widget-container {
314 box-shadow: none !important;
317 .side-menu-widget-item:not(.selected)[odd] {
318 background: rgba(255,159,0,0.1);
321 /* Network request details */
327 #details-pane-toggle {
328 list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
329 -moz-image-region: rect(0px,16px,16px,0px);
332 #details-pane-toggle[pane-collapsed] {
333 list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
336 #details-pane-toggle:hover,
337 #details-pane-toggle:hover:active {
338 -moz-image-region: rect(0px,32px,16px,16px);
341 /* Network request details tabpanels */
344 background-color: #000000;
348 /* Summary tabpanel */
350 .tabpanel-summary-container {
354 .tabpanel-summary-label {
355 -moz-padding-start: 4px;
356 -moz-padding-end: 3px;
360 .tabpanel-summary-value {
361 -moz-padding-start: 3px;
364 /* Headers tabpanel */
366 #headers-summary-status,
367 #headers-summary-version {
371 #headers-summary-size {
375 #headers-summary-resend {
377 /* min-height: 20px;*/
380 /* Response tabpanel */
382 #response-content-info-header {
386 background-color: #FF0000; /* Red highlight */
387 color: #000000; /* Light foreground text */
390 #response-content-image-box {
392 padding-bottom: 10px;
395 #response-content-image {
397 border: 1px dashed #A09090;
401 /* Timings tabpanel */
403 #timings-tabpanel .tabpanel-summary-label {
407 #timings-tabpanel .requests-menu-timings-box {
408 transition: transform 0.2s ease-out;
413 #timings-tabpanel .requests-menu-timings-total {
414 transition: transform 0.2s ease-out;
417 /* Custom request form */
420 padding: 0.6em 0.5em;
431 #custom-method-value {
437 #requests-menu-footer {
438 border-top: 1px solid #9C9CFF;
442 .requests-menu-footer-button,
443 .requests-menu-footer-label {
446 -moz-margin-end: 3px;
453 .requests-menu-footer-spacer {
457 .requests-menu-footer-spacer,
458 .requests-menu-footer-button {
461 .requests-menu-footer-button {
464 .requests-menu-footer-button:hover {
467 .requests-menu-footer-button:hover:active {
470 .requests-menu-footer-button:not(:active)[checked] {
473 .requests-menu-footer-label {
477 /* Performance analysis buttons */
479 #requests-menu-network-summary-button {
480 list-style-image: url("profiler-stopwatch.png");
481 -moz-image-region: rect(0px,32px,16px,16px);
486 #requests-menu-network-summary-label {
487 -moz-padding-start: 0;
491 #requests-menu-network-summary-label:hover {
492 text-decoration: underline;
495 /* Performance analysis view */
497 #network-statistics-toolbar {
498 /* Make the toolbar invisible, it only hold the back button */
499 -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar");
500 background-color: #000000;
503 #network-statistics-back-button {
508 #network-statistics-view-splitter {
510 pointer-events: none;
513 #network-statistics-charts {
516 background: #000000; /* Toolbars */
519 #network-statistics-charts .pie-chart-container {
520 -moz-margin-start: 3vw;
521 -moz-margin-end: 1vw;
524 #network-statistics-charts .table-chart-container {
525 -moz-margin-start: 1vw;
526 -moz-margin-end: 3vw;
529 .chart-colored-blob[name=html] {
530 fill: #A09090; /* Blue-Grey highlight */
534 .chart-colored-blob[name=css] {
535 fill: #9C9CFF; /* Blue highlight */
539 .chart-colored-blob[name=js] {
540 fill: #FFCF00; /* Light Orange highlight */
544 .chart-colored-blob[name=xhr] {
545 fill: #FF9F00; /* Orange highlight */
549 .chart-colored-blob[name=fonts] {
550 fill: #6000CF; /* Purple highlight */
554 .chart-colored-blob[name=images] {
555 fill: #E7ADE7; /* Pink highlight */
559 .chart-colored-blob[name=media] {
560 fill: #008484; /* Green highlight */
564 .chart-colored-blob[name=flash] {
565 fill: #FF0000; /* Red highlight */
569 .table-chart-row-label[name=cached] {
573 .table-chart-row-label[name=count] {
578 .table-chart-row-label[name=label] {
582 .table-chart-row-label[name=size] {
586 .table-chart-row-label[name=time] {
590 /* Responsive sidebar */
591 @media (max-width: 700px) {
592 #requests-menu-toolbar {
596 .requests-menu-header-button {
600 .requests-menu-footer-button,
601 .requests-menu-footer-label {
607 margin: 0 !important;
608 /* To prevent all the margin hacks to hide the sidebar. */
611 .requests-menu-status-and-method {
616 .requests-menu-domain {
620 .requests-menu-type {
624 .requests-menu-size {
626 border-width: 0 !important;
627 box-shadow: none !important;
628 /* The "Timeline" header is not visible anymore, and thus the
629 right border and box-shadow of "Size" column should be hidden. */
633 @media (min-width: 701px) {
634 #network-table[type-overflows] .requests-menu-domain {
635 border-width: 0 !important;
636 box-shadow: none !important;
637 /* The "Type" header is not visible anymore, and thus the
638 right border and box-shadow of "Domain" column should be hidden. */
641 #network-table[domain-overflows] .requests-menu-file {
642 border-width: 0 !important;
643 box-shadow: none !important;
644 /* The "Domain" header is not visible anymore, and thus the
645 right border and box-shadow of "File" column should be hidden. */
649 /* === END netmonitor.inc.css === */