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 #notice-perf-message {
24 #requests-menu-perf-notice-button {
28 list-style-image: url("profiler-stopwatch.svg");
31 #requests-menu-perf-notice-button .button-text {
35 #requests-menu-reload-notice-button {
40 /* Network requests table */
42 #requests-menu-toolbar {
45 #requests-menu-toolbar > .toolbar-box > .toolbar-startcap,
46 #requests-menu-toolbar > .toolbar-box > .toolbar-endcap {
50 .requests-menu-header:first-child {
51 -moz-padding-start: 4px;
52 -moz-margin-start: 4px;
55 .requests-menu-subitem {
59 .requests-menu-header:not(:last-child),
60 .requests-menu-subitem:not(:last-child) {
61 -moz-border-end: 1px solid #9C9CFF;
64 .requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
65 .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
68 .requests-menu-header-button,
69 #requests-menu-status-button {
70 background-color: transparent;
74 font-weight: inherit !important;
75 transition: background-color 0.1s ease-in-out;
78 .requests-menu-header-button > .button-box,
79 #requests-menu-status-button > .button-box {
81 -moz-padding-start: 0;
86 .requests-menu-header-button:hover {
87 background-color: #FFCF00;
90 .requests-menu-header-button:hover:active {
91 background-color: #FF9F00;
94 .requests-menu-header-button:not(:active)[sorted] {
95 background-color: #008484;
98 .requests-menu-header-button:not(:active)[sorted=ascending] {
99 background-image: radial-gradient(farthest-side at center top, rgba(0,0,0,.7), rgba(0,0,0,0.3));
100 background-size: 100% 1px;
101 background-repeat: no-repeat;
104 .requests-menu-header-button:not(:active)[sorted=descending] {
105 background-image: radial-gradient(farthest-side at center bottom, rgba(0,0,0,.7), rgba(0,0,0,0.3));
106 background-size: 100% 1px;
107 background-repeat: no-repeat;
108 background-position: bottom;
111 #requests-menu-status-button {
115 #requests-menu-status-button > .button-box {
119 /* Network requests table: specific column dimensions */
121 .requests-menu-status-and-method {
125 .requests-menu-status {
131 .requests-menu-method {
136 .requests-menu-icon-and-file {
141 .requests-menu-icon {
143 width: calc(1em + 4px);
144 height: calc(1em + 4px);
146 -moz-margin-end: 4px;
149 .requests-menu-icon {
150 outline: 1px solid #A09090;
153 .requests-menu-file {
157 .requests-menu-domain {
162 .requests-menu-type {
167 .requests-menu-size {
172 /* Network requests table: status codes */
174 box.requests-menu-status {
175 background-color: #A09090;
177 -moz-margin-start: 5px;
178 -moz-margin-end: 5px;
180 border: 1px solid #000000;
181 transition: background-color 0.5s ease-in-out;
184 label.requests-menu-status-code {
185 -moz-margin-start: 3px !important;
187 -moz-margin-end: -3em !important;
190 box.requests-menu-status:not([code]) {
191 background-color: #A09090; /* dark grey */
194 box.requests-menu-status[code^="1"] {
195 background-color: #9C9CFF; /* light blue */
198 box.requests-menu-status[code^="2"] {
199 background-color: #008484; /* green */
202 /* 3xx are triangles */
203 box.requests-menu-status[code^="3"] {
204 background-color: transparent;
207 border-left: 5px solid transparent;
208 border-right: 5px solid transparent;
209 border-bottom: 10px solid #FF9F00; /* light orange */
213 /* 4xx and 5xx are squares - error codes */
214 box.requests-menu-status[code^="4"] {
215 background-color: #FF0000; /* red */
216 border-radius: 0; /* squares */
219 box.requests-menu-status[code^="5"] {
220 background-color: #6000CF; /* pink? */
222 transform: rotate(45deg);
225 /* Network requests table: waterfall header */
227 #requests-menu-waterfall-label {
228 -moz-padding-start: 8px;
229 -moz-padding-end: 8px;
232 .requests-menu-timings-division {
235 -moz-padding-start: 4px;
236 -moz-border-start: 1px dotted #000000;
238 pointer-events: none;
241 .requests-menu-timings-division:not(:first-child) {
242 -moz-border-start: 1px dotted;
243 -moz-margin-start: -100px !important; /* Don't affect layout. */
246 .requests-menu-timings-division:-moz-locale-dir(ltr) {
247 transform-origin: left center;
250 .requests-menu-timings-division:-moz-locale-dir(rtl) {
251 transform-origin: right center;
254 .requests-menu-timings-division[division-scale=millisecond] {
255 -moz-border-start-color: #FF9F00 !important; /* Light foreground text */
258 .requests-menu-timings-division[division-scale=second] {
259 -moz-border-start-color: #FF9F00 !important; /* Light foreground text */
263 .requests-menu-timings-division[division-scale=minute] {
264 -moz-border-start-color: #FF9F00 !important; /* Light foreground text */
268 /* Network requests table: waterfall items */
270 .requests-menu-subitem.requests-menu-waterfall {
271 -moz-padding-start: 0px;
272 -moz-padding-end: 4px;
273 /* Background created on a <canvas> in js. */
274 /* @see browser/devtools/netmonitor/netmonitor-view.js */
275 background-image: -moz-element(#waterfall-background);
276 background-repeat: repeat-y;
277 background-position: -1px center;
280 .requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
281 background-position: right center;
284 .requests-menu-timings:-moz-locale-dir(ltr) {
285 transform-origin: left center;
288 .requests-menu-timings:-moz-locale-dir(rtl) {
289 transform-origin: right center;
292 .requests-menu-timings-total:-moz-locale-dir(ltr) {
293 transform-origin: left center;
296 .requests-menu-timings-total:-moz-locale-dir(rtl) {
297 transform-origin: right center;
300 .requests-menu-timings-total {
301 -moz-padding-start: 4px;
306 .requests-menu-timings-box {
310 .requests-menu-timings-box.blocked {
311 background-color: #FF0000; /* red */
314 .requests-menu-timings-box.dns {
315 background-color: #E7ADE7; /* pink */
318 .requests-menu-timings-box.connect {
319 background-color: #FF9F00; /* orange */
322 .requests-menu-timings-box.send {
323 background-color: #FFCF00; /* light blue */
326 .requests-menu-timings-box.wait {
327 background-color: #9C9CFF; /* blue grey */
330 .requests-menu-timings-box.receive {
331 background-color: #A09090; /* green */
336 .side-menu-widget-item-contents {
340 .side-menu-widget-container {
341 box-shadow: none !important;
344 .side-menu-widget-item:not(.selected)[odd] {
345 background: rgba(255,159,0,0.1);
348 /* Network request details */
350 #details-pane-toggle {
351 list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
352 -moz-image-region: rect(0px,16px,16px,0px);
355 #details-pane-toggle > .toolbarbutton-icon {
360 #details-pane-toggle[pane-collapsed] {
361 list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
364 #details-pane-toggle:hover,
365 #details-pane-toggle:hover:active {
366 -moz-image-region: rect(0px,32px,16px,16px);
369 @media (min-resolution: 2dppx) {
370 #details-pane-toggle {
371 list-style-image: url("chrome://browser/skin/devtools/debugger-collapse@2x.png");
372 -moz-image-region: rect(0px,32px,32px,0px);
375 #details-pane-toggle[pane-collapsed] {
376 list-style-image: url("chrome://browser/skin/devtools/debugger-expand@2x.png");
379 #details-pane-toggle:active {
380 -moz-image-region: rect(0px,64px,32px,32px);
384 /* Network request details tabpanels */
387 background-color: #000000;
391 /* Summary tabpanel */
393 .tabpanel-summary-container {
397 .tabpanel-summary-label {
398 -moz-padding-start: 4px;
399 -moz-padding-end: 3px;
403 .tabpanel-summary-value {
404 -moz-padding-start: 3px;
407 /* Headers tabpanel */
409 #headers-summary-status,
410 #headers-summary-version {
414 #headers-summary-size {
418 #headers-summary-resend {
420 /* min-height: 20px;*/
423 /* Response tabpanel */
425 #response-content-info-header {
429 background-color: #FF0000; /* Red highlight */
430 color: #000000; /* Light foreground text */
433 #response-content-image-box {
435 padding-bottom: 10px;
438 #response-content-image {
440 border: 1px dashed #A09090;
444 /* Preview tabpanel */
455 /* Timings tabpanel */
457 #timings-tabpanel .tabpanel-summary-label {
461 #timings-tabpanel .requests-menu-timings-box {
462 transition: transform 0.2s ease-out;
467 #timings-tabpanel .requests-menu-timings-total {
468 transition: transform 0.2s ease-out;
471 /* Custom request form */
474 padding: 0.6em 0.5em;
485 #custom-method-value {
491 #requests-menu-footer {
492 border-top: 1px solid #9C9CFF;
496 .requests-menu-footer-button,
497 .requests-menu-footer-label {
500 -moz-margin-end: 3px;
507 .requests-menu-footer-spacer {
511 .requests-menu-footer-spacer,
512 .requests-menu-footer-button {
515 .requests-menu-footer-button {
518 .requests-menu-footer-button:hover {
521 .requests-menu-footer-button:hover:active {
524 .requests-menu-footer-button:not(:active)[checked] {
527 .requests-menu-footer-label {
531 /* Performance analysis buttons */
533 #requests-menu-network-summary-button {
534 list-style-image: url("profiler-stopwatch.svg");
539 #requests-menu-network-summary-label {
540 -moz-padding-start: 0;
544 #requests-menu-network-summary-label:hover {
545 text-decoration: underline;
548 /* Performance analysis view */
550 #network-statistics-toolbar {
551 /* Make the toolbar invisible, it only hold the back button */
552 -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar");
553 background-color: #000000;
556 #network-statistics-back-button {
561 #network-statistics-view-splitter {
563 pointer-events: none;
566 #network-statistics-charts {
569 background: #000000; /* Toolbars */
572 #network-statistics-charts .pie-chart-container {
573 -moz-margin-start: 3vw;
574 -moz-margin-end: 1vw;
577 #network-statistics-charts .table-chart-container {
578 -moz-margin-start: 1vw;
579 -moz-margin-end: 3vw;
582 .chart-colored-blob[name=html] {
583 fill: #A09090; /* Blue-Grey highlight */
587 .chart-colored-blob[name=css] {
588 fill: #9C9CFF; /* Blue highlight */
592 .chart-colored-blob[name=js] {
593 fill: #FFCF00; /* Light Orange highlight */
597 .chart-colored-blob[name=xhr] {
598 fill: #FF9F00; /* Orange highlight */
602 .chart-colored-blob[name=fonts] {
603 fill: #6000CF; /* Purple highlight */
607 .chart-colored-blob[name=images] {
608 fill: #E7ADE7; /* Pink highlight */
612 .chart-colored-blob[name=media] {
613 fill: #008484; /* Green highlight */
617 .chart-colored-blob[name=flash] {
618 fill: #FF0000; /* Red highlight */
622 .table-chart-row-label[name=cached] {
626 .table-chart-row-label[name=count] {
631 .table-chart-row-label[name=label] {
635 .table-chart-row-label[name=size] {
639 .table-chart-row-label[name=time] {
643 /* Responsive sidebar */
644 @media (max-width: 700px) {
645 #requests-menu-toolbar {
649 .requests-menu-header-button {
654 margin: 0 !important;
655 /* To prevent all the margin hacks to hide the sidebar. */
658 .requests-menu-status-and-method {
662 .requests-menu-icon-and-file,
663 .requests-menu-domain {
667 .requests-menu-type {
671 .requests-menu-size {
673 border-width: 0 !important;
674 box-shadow: none !important;
675 /* The "Timeline" header is not visible anymore, and thus the
676 right border and box-shadow of "Size" column should be hidden. */
680 /* === END netmonitor.inc.css === */