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 {
18 #notice-perf-message {
22 #requests-menu-perf-notice-button {
26 list-style-image: url("profiler-stopwatch.svg");
29 #requests-menu-perf-notice-button .button-text {
33 #requests-menu-reload-notice-button {
38 /* Network requests table */
40 #requests-menu-toolbar {
43 #requests-menu-toolbar > .toolbar-box > .toolbar-startcap,
44 #requests-menu-toolbar > .toolbar-box > .toolbar-endcap {
48 .requests-menu-header:first-child {
49 -moz-padding-start: 4px;
50 -moz-margin-start: 4px;
53 .requests-menu-subitem {
57 .requests-menu-header:not(:last-child),
58 .requests-menu-subitem:not(:last-child) {
59 -moz-border-end: 1px solid #9C9CFF;
62 .requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
63 .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
66 .requests-menu-header-button,
67 #requests-menu-status-button {
68 background-color: transparent;
72 font-weight: inherit !important;
73 transition: background-color 0.1s ease-in-out;
76 .requests-menu-header-button > .button-box,
77 #requests-menu-status-button > .button-box {
79 -moz-padding-start: 0;
84 .requests-menu-header-button:hover {
85 background-color: #FFCF00;
88 .requests-menu-header-button:hover:active {
89 background-color: #FF9F00;
92 .requests-menu-header-button:not(:active)[sorted] {
93 background-color: #008484;
96 .requests-menu-header-button:not(:active)[sorted=ascending] {
97 background-image: radial-gradient(farthest-side at center top, rgba(0,0,0,.7), rgba(0,0,0,0.3));
98 background-size: 100% 1px;
99 background-repeat: no-repeat;
102 .requests-menu-header-button:not(:active)[sorted=descending] {
103 background-image: radial-gradient(farthest-side at center bottom, rgba(0,0,0,.7), rgba(0,0,0,0.3));
104 background-size: 100% 1px;
105 background-repeat: no-repeat;
106 background-position: bottom;
109 #requests-menu-status-button {
113 #requests-menu-status-button > .button-box {
117 /* Network requests table: specific column dimensions */
119 .requests-menu-status-and-method {
123 .requests-menu-status {
129 .requests-menu-method {
134 .requests-menu-icon-and-file {
139 .requests-menu-icon {
141 width: calc(1em + 4px);
142 height: calc(1em + 4px);
144 -moz-margin-end: 4px;
147 .requests-menu-icon {
148 outline: 1px solid #A09090;
151 .requests-menu-file {
155 .requests-menu-security-and-domain {
160 .requests-security-state-icon {
161 -moz-margin-end: 4px;
162 -moz-image-region:rect(0px, 16px, 16px, 0px);
165 .requests-security-state-icon:hover {
166 -moz-image-region: rect(0px, 32px, 16px, 16px);
169 .requests-security-state-icon:active {
170 -moz-image-region: rect(0px, 48px, 16px, 32px);
173 .security-state-insecure {
174 list-style-image: url("chrome://browser/skin/identity-icons-generic.png");
177 .security-state-secure {
179 list-style-image: url("chrome://browser/skin/identity-icons-https.png");
182 .security-state-weak {
184 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-display.png");
187 .security-state-broken {
189 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-active.png");
192 .requests-menu-type {
197 .requests-menu-size {
202 .requests-menu-transferred {
207 /* Network requests table: status codes */
209 box.requests-menu-status {
210 background-color: #A09090;
212 -moz-margin-start: 5px;
213 -moz-margin-end: 5px;
215 border: 1px solid #000000;
216 transition: background-color 0.5s ease-in-out;
219 label.requests-menu-status-code {
220 -moz-margin-start: 3px !important;
222 -moz-margin-end: -3em !important;
225 box.requests-menu-status:not([code]) {
226 background-color: #A09090; /* dark grey */
229 box.requests-menu-status[code^="1"] {
230 background-color: #9C9CFF; /* light blue */
233 box.requests-menu-status[code^="2"] {
234 background-color: #008484; /* green */
237 /* 3xx are triangles */
238 box.requests-menu-status[code^="3"] {
239 background-color: transparent;
242 border-left: 5px solid transparent;
243 border-right: 5px solid transparent;
244 border-bottom: 10px solid #FF9F00; /* light orange */
248 /* 4xx and 5xx are squares - error codes */
249 box.requests-menu-status[code^="4"] {
250 background-color: #FF0000; /* red */
251 border-radius: 0; /* squares */
254 box.requests-menu-status[code^="5"] {
255 background-color: #6000CF; /* pink? */
257 transform: rotate(45deg);
260 /* Network requests table: waterfall header */
262 #requests-menu-waterfall-label {
263 -moz-padding-start: 8px;
264 -moz-padding-end: 8px;
267 .requests-menu-timings-division {
270 -moz-padding-start: 4px;
271 -moz-border-start: 1px dotted #000000;
273 pointer-events: none;
276 .requests-menu-timings-division:not(:first-child) {
277 -moz-border-start: 1px dotted;
278 -moz-margin-start: -100px !important; /* Don't affect layout. */
281 .requests-menu-timings-division:-moz-locale-dir(ltr) {
282 transform-origin: left center;
285 .requests-menu-timings-division:-moz-locale-dir(rtl) {
286 transform-origin: right center;
289 .requests-menu-timings-division[division-scale=millisecond] {
290 -moz-border-start-color: var(--theme-body-color) !important;
293 .requests-menu-timings-division[division-scale=second] {
294 -moz-border-start-color: var(--theme-body-color) !important;
298 .requests-menu-timings-division[division-scale=minute] {
299 -moz-border-start-color: var(--theme-body-color) !important;
303 /* Network requests table: waterfall items */
305 .requests-menu-subitem.requests-menu-waterfall {
306 -moz-padding-start: 0px;
307 -moz-padding-end: 4px;
308 /* Background created on a <canvas> in js. */
309 /* @see browser/devtools/netmonitor/netmonitor-view.js */
310 background-image: -moz-element(#waterfall-background);
311 background-repeat: repeat-y;
312 background-position: -1px center;
315 .requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
316 background-position: right center;
319 .requests-menu-timings:-moz-locale-dir(ltr) {
320 transform-origin: left center;
323 .requests-menu-timings:-moz-locale-dir(rtl) {
324 transform-origin: right center;
327 .requests-menu-timings-total:-moz-locale-dir(ltr) {
328 transform-origin: left center;
331 .requests-menu-timings-total:-moz-locale-dir(rtl) {
332 transform-origin: right center;
335 .requests-menu-timings-total {
336 -moz-padding-start: 4px;
341 .requests-menu-timings-box {
345 .requests-menu-timings-box.blocked {
346 background-color: #FF0000; /* red */
349 .requests-menu-timings-box.dns {
350 background-color: #E7ADE7; /* pink */
353 .requests-menu-timings-box.connect {
354 background-color: #FF9F00; /* orange */
357 .requests-menu-timings-box.send {
358 background-color: #FFCF00; /* light blue */
361 .requests-menu-timings-box.wait {
362 background-color: #9C9CFF; /* blue grey */
365 .requests-menu-timings-box.receive {
366 background-color: #A09090; /* green */
371 .side-menu-widget-item-contents {
375 .side-menu-widget-container {
376 box-shadow: none !important;
379 .side-menu-widget-item:not(.selected)[odd] {
380 background: rgba(255,159,0,0.1);
383 /* Network request details */
385 #details-pane-toggle {
386 list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
387 -moz-image-region: rect(0px,16px,16px,0px);
390 #details-pane-toggle > .toolbarbutton-icon {
395 #details-pane-toggle[pane-collapsed] {
396 list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
399 #details-pane-toggle:hover,
400 #details-pane-toggle:hover:active {
401 -moz-image-region: rect(0px,32px,16px,16px);
404 @media (min-resolution: 2dppx) {
405 #details-pane-toggle {
406 list-style-image: url("chrome://browser/skin/devtools/debugger-collapse@2x.png");
407 -moz-image-region: rect(0px,32px,32px,0px);
410 #details-pane-toggle[pane-collapsed] {
411 list-style-image: url("chrome://browser/skin/devtools/debugger-expand@2x.png");
414 #details-pane-toggle:active {
415 -moz-image-region: rect(0px,64px,32px,32px);
419 /* Network request details tabpanels */
422 background-color: var(--theme-toolbar-background);
423 color: var(--theme-body-color);
426 /* Summary tabpanel */
428 .tabpanel-summary-container {
432 .tabpanel-summary-label {
433 -moz-padding-start: 4px;
434 -moz-padding-end: 3px;
438 .tabpanel-summary-value {
440 -moz-padding-start: 3px;
443 /* Headers tabpanel */
445 #headers-summary-status,
446 #headers-summary-version {
450 #headers-summary-size {
454 #headers-summary-resend {
456 /* min-height: 20px;*/
459 #toggle-raw-headers {
461 -moz-margin-end: 6px;
464 .raw-response-textarea {
468 /* Response tabpanel */
470 #response-content-info-header {
473 background-color: var(--theme-highlight-red);
474 color: var(--theme-selection-color);
477 #response-content-image-box {
479 padding-bottom: 10px;
482 #response-content-image {
484 border: 1px dashed #A09090;
488 /* Preview tabpanel */
499 /* Timings tabpanel */
501 #timings-tabpanel .tabpanel-summary-label {
505 #timings-tabpanel .requests-menu-timings-box {
506 transition: transform 0.2s ease-out;
511 #timings-tabpanel .requests-menu-timings-total {
512 transition: transform 0.2s ease-out;
515 /* Security tabpanel */
517 .security-info-section {
518 -moz-padding-start: 1em;
525 .security-warning-icon {
526 background-image: url("alerticon-warning.png");
527 background-size: 13px 12px;
528 -moz-margin-start: 5px;
534 @media (min-resolution: 2dppx) {
535 .security-warning-icon {
536 background-image: url("alerticon-warning@2x.png");
540 /* Custom request form */
543 padding: 0.6em 0.5em;
554 #custom-method-value {
560 #requests-menu-footer {
561 border-top: 1px solid #9C9CFF;
563 background-color: var(--theme-toolbar-background);
566 .requests-menu-footer-button,
567 .requests-menu-footer-label {
570 -moz-margin-end: 3px;
573 /* color: var(--theme-body-color);*/
576 .requests-menu-footer-spacer {
580 .requests-menu-footer-spacer,
581 .requests-menu-footer-button {
584 .requests-menu-footer-button {
587 .requests-menu-footer-button:hover {
590 .requests-menu-footer-button:hover:active {
593 .requests-menu-footer-button:not(:active)[checked] {
596 .requests-menu-footer-label {
600 /* Performance analysis buttons */
602 #requests-menu-network-summary-button {
603 list-style-image: url("profiler-stopwatch.svg");
608 #requests-menu-network-summary-label {
609 -moz-padding-start: 0;
613 #requests-menu-network-summary-label:hover {
614 text-decoration: underline;
617 /* Performance analysis view */
619 #network-statistics-toolbar {
620 /* Make the toolbar invisible, it only hold the back button */
621 -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar");
622 background-color: #000000;
625 #network-statistics-back-button {
630 #network-statistics-view-splitter {
632 pointer-events: none;
635 #network-statistics-charts {
637 background-color: var(--theme-toolbar-background);
640 #network-statistics-charts .pie-chart-container {
641 -moz-margin-start: 3vw;
642 -moz-margin-end: 1vw;
645 #network-statistics-charts .table-chart-container {
646 -moz-margin-start: 1vw;
647 -moz-margin-end: 3vw;
650 .chart-colored-blob[name=html] {
651 fill: var(--theme-highlight-bluegrey);
652 background: var(--theme-highlight-bluegrey);
655 .chart-colored-blob[name=css] {
656 fill: var(--theme-highlight-blue);
657 background: var(--theme-highlight-blue);
660 .chart-colored-blob[name=js] {
661 fill: var(--theme-highlight-lightorange);
662 background: var(--theme-highlight-lightorange);
665 .chart-colored-blob[name=xhr] {
666 fill: var(--theme-highlight-orange);
667 background: var(--theme-highlight-orange);
670 .chart-colored-blob[name=fonts] {
671 fill: var(--theme-highlight-darkpurple);
672 background: var(--theme-highlight-darkpurple);
675 .chart-colored-blob[name=images] {
676 fill: var(--theme-highlight-pink);
677 background: var(--theme-highlight-pink);
680 .chart-colored-blob[name=media] {
681 fill: var(--theme-highlight-green);
682 background: var(--theme-highlight-green);
685 .chart-colored-blob[name=flash] {
686 fill: var(--theme-highlight-red);
687 background: var(--theme-highlight-red);
690 .table-chart-row-label[name=cached] {
694 .table-chart-row-label[name=count] {
699 .table-chart-row-label[name=label] {
703 .table-chart-row-label[name=size] {
707 .table-chart-row-label[name=time] {
711 /* Responsive sidebar */
712 @media (max-width: 700px) {
713 #requests-menu-toolbar {
717 .requests-menu-header-button {
722 margin: 0 !important;
723 /* To prevent all the margin hacks to hide the sidebar. */
726 .requests-menu-status-and-method {
730 .requests-menu-icon-and-file,
731 .requests-menu-security-and-domain {
735 .requests-menu-type {
739 .requests-menu-size {
741 border-width: 0 !important;
742 box-shadow: none !important;
743 /* The "Timeline" header is not visible anymore, and thus the
744 right border and box-shadow of "Size" column should be hidden. */
748 /* === END netmonitor.inc.css === */