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.svg");
27 #requests-menu-perf-notice-button .button-text {
31 /* Network requests table */
33 #requests-menu-toolbar {
36 #requests-menu-toolbar > .toolbar-box > .toolbar-startcap,
37 #requests-menu-toolbar > .toolbar-box > .toolbar-endcap {
41 .requests-menu-header:first-child {
42 -moz-padding-start: 4px;
43 -moz-margin-start: 4px;
46 .requests-menu-subitem {
50 .requests-menu-header:not(:last-child),
51 .requests-menu-subitem:not(:last-child) {
52 -moz-border-end: 1px solid #9C9CFF;
55 .requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
56 .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
59 .requests-menu-header-button,
60 #requests-menu-status-button {
61 background-color: transparent;
65 font-weight: inherit !important;
66 transition: background-color 0.1s ease-in-out;
69 .requests-menu-header-button > .button-box,
70 #requests-menu-status-button > .button-box {
72 -moz-padding-start: 0;
77 .requests-menu-header-button:hover {
78 background-color: #FFCF00;
81 .requests-menu-header-button:hover:active {
82 background-color: #FF9F00;
85 .requests-menu-header-button:not(:active)[sorted] {
86 background-color: #008484;
89 .requests-menu-header-button:not(:active)[sorted=ascending] {
90 background-image: radial-gradient(farthest-side at center top, rgba(0,0,0,.7), rgba(0,0,0,0.3));
91 background-size: 100% 1px;
92 background-repeat: no-repeat;
95 .requests-menu-header-button:not(:active)[sorted=descending] {
96 background-image: radial-gradient(farthest-side at center bottom, rgba(0,0,0,.7), rgba(0,0,0,0.3));
97 background-size: 100% 1px;
98 background-repeat: no-repeat;
99 background-position: bottom;
102 #requests-menu-status-button {
106 #requests-menu-status-button > .button-box {
110 /* Network requests table: specific column dimensions */
112 .requests-menu-status-and-method {
116 .requests-menu-status {
122 .requests-menu-method {
127 .requests-menu-icon-and-file {
132 .requests-menu-icon {
134 width: calc(1em + 4px);
135 height: calc(1em + 4px);
137 -moz-margin-end: 4px;
140 .requests-menu-icon {
141 outline: 1px solid #A09090;
144 .requests-menu-file {
148 .requests-menu-domain {
153 .requests-menu-type {
158 .requests-menu-size {
163 /* Network requests table: status codes */
165 box.requests-menu-status {
166 background-color: #A09090;
168 -moz-margin-start: 5px;
169 -moz-margin-end: 5px;
171 border: 1px solid #000000;
172 transition: background-color 0.5s ease-in-out;
175 label.requests-menu-status-code {
176 -moz-margin-start: 3px !important;
178 -moz-margin-end: -3em !important;
181 box.requests-menu-status:not([code]) {
182 background-color: #A09090; /* dark grey */
185 box.requests-menu-status[code^="1"] {
186 background-color: #9C9CFF; /* light blue */
189 box.requests-menu-status[code^="2"] {
190 background-color: #008484; /* green */
193 /* 3xx are triangles */
194 box.requests-menu-status[code^="3"] {
195 background-color: transparent;
198 border-left: 5px solid transparent;
199 border-right: 5px solid transparent;
200 border-bottom: 10px solid #FF9F00; /* light orange */
204 /* 4xx and 5xx are squares - error codes */
205 box.requests-menu-status[code^="4"] {
206 background-color: #FF0000; /* red */
207 border-radius: 0; /* squares */
210 box.requests-menu-status[code^="5"] {
211 background-color: #6000CF; /* pink? */
213 transform: rotate(45deg);
216 /* Network requests table: waterfall header */
218 #requests-menu-waterfall-label {
219 -moz-padding-start: 8px;
220 -moz-padding-end: 8px;
223 .requests-menu-timings-division {
226 -moz-padding-start: 4px;
227 -moz-border-start: 1px dotted #000000;
229 pointer-events: none;
232 .requests-menu-timings-division:not(:first-child) {
233 -moz-border-start: 1px dotted;
234 -moz-margin-start: -100px !important; /* Don't affect layout. */
237 .requests-menu-timings-division:-moz-locale-dir(ltr) {
238 transform-origin: left center;
241 .requests-menu-timings-division:-moz-locale-dir(rtl) {
242 transform-origin: right center;
245 .requests-menu-timings-division[division-scale=millisecond] {
246 -moz-border-start-color: #FF9F00 !important; /* Light foreground text */
249 .requests-menu-timings-division[division-scale=second] {
250 -moz-border-start-color: #FF9F00 !important; /* Light foreground text */
254 .requests-menu-timings-division[division-scale=minute] {
255 -moz-border-start-color: #FF9F00 !important; /* Light foreground text */
259 /* Network requests table: waterfall items */
261 .requests-menu-subitem.requests-menu-waterfall {
262 -moz-padding-start: 0px;
263 -moz-padding-end: 4px;
264 background-repeat: repeat-y; /* Background created on a <canvas> in js. */
265 background-position: -1px center;
268 .requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
269 background-position: right center;
272 .requests-menu-timings:-moz-locale-dir(ltr) {
273 transform-origin: left center;
276 .requests-menu-timings:-moz-locale-dir(rtl) {
277 transform-origin: right center;
280 .requests-menu-timings-total:-moz-locale-dir(ltr) {
281 transform-origin: left center;
284 .requests-menu-timings-total:-moz-locale-dir(rtl) {
285 transform-origin: right center;
288 .requests-menu-timings-total {
289 -moz-padding-start: 4px;
294 .requests-menu-timings-box {
298 .requests-menu-timings-box.blocked {
299 background-color: #FF0000; /* red */
302 .requests-menu-timings-box.dns {
303 background-color: #E7ADE7; /* pink */
306 .requests-menu-timings-box.connect {
307 background-color: #FF9F00; /* orange */
310 .requests-menu-timings-box.send {
311 background-color: #FFCF00; /* light blue */
314 .requests-menu-timings-box.wait {
315 background-color: #9C9CFF; /* blue grey */
318 .requests-menu-timings-box.receive {
319 background-color: #A09090; /* green */
324 .side-menu-widget-item-contents {
328 .side-menu-widget-container {
329 box-shadow: none !important;
332 .side-menu-widget-item:not(.selected)[odd] {
333 background: rgba(255,159,0,0.1);
336 /* Network request details */
338 #details-pane-toggle {
339 list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
340 -moz-image-region: rect(0px,16px,16px,0px);
343 #details-pane-toggle > .toolbarbutton-icon {
348 #details-pane-toggle[pane-collapsed] {
349 list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
352 #details-pane-toggle:hover,
353 #details-pane-toggle:hover:active {
354 -moz-image-region: rect(0px,32px,16px,16px);
357 @media (min-resolution: 2dppx) {
358 #details-pane-toggle {
359 list-style-image: url("chrome://browser/skin/devtools/debugger-collapse@2x.png");
360 -moz-image-region: rect(0px,32px,32px,0px);
363 #details-pane-toggle[pane-collapsed] {
364 list-style-image: url("chrome://browser/skin/devtools/debugger-expand@2x.png");
367 #details-pane-toggle:active {
368 -moz-image-region: rect(0px,64px,32px,32px);
372 /* Network request details tabpanels */
375 background-color: #000000;
379 /* Summary tabpanel */
381 .tabpanel-summary-container {
385 .tabpanel-summary-label {
386 -moz-padding-start: 4px;
387 -moz-padding-end: 3px;
391 .tabpanel-summary-value {
392 -moz-padding-start: 3px;
395 /* Headers tabpanel */
397 #headers-summary-status,
398 #headers-summary-version {
402 #headers-summary-size {
406 #headers-summary-resend {
408 /* min-height: 20px;*/
411 /* Response tabpanel */
413 #response-content-info-header {
417 background-color: #FF0000; /* Red highlight */
418 color: #000000; /* Light foreground text */
421 #response-content-image-box {
423 padding-bottom: 10px;
426 #response-content-image {
428 border: 1px dashed #A09090;
432 /* Preview tabpanel */
443 /* Timings tabpanel */
445 #timings-tabpanel .tabpanel-summary-label {
449 #timings-tabpanel .requests-menu-timings-box {
450 transition: transform 0.2s ease-out;
455 #timings-tabpanel .requests-menu-timings-total {
456 transition: transform 0.2s ease-out;
459 /* Custom request form */
462 padding: 0.6em 0.5em;
473 #custom-method-value {
479 #requests-menu-footer {
480 border-top: 1px solid #9C9CFF;
484 .requests-menu-footer-button,
485 .requests-menu-footer-label {
488 -moz-margin-end: 3px;
495 .requests-menu-footer-spacer {
499 .requests-menu-footer-spacer,
500 .requests-menu-footer-button {
503 .requests-menu-footer-button {
506 .requests-menu-footer-button:hover {
509 .requests-menu-footer-button:hover:active {
512 .requests-menu-footer-button:not(:active)[checked] {
515 .requests-menu-footer-label {
519 /* Performance analysis buttons */
521 #requests-menu-network-summary-button {
522 list-style-image: url("profiler-stopwatch.svg");
527 #requests-menu-network-summary-label {
528 -moz-padding-start: 0;
532 #requests-menu-network-summary-label:hover {
533 text-decoration: underline;
536 /* Performance analysis view */
538 #network-statistics-toolbar {
539 /* Make the toolbar invisible, it only hold the back button */
540 -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar");
541 background-color: #000000;
544 #network-statistics-back-button {
549 #network-statistics-view-splitter {
551 pointer-events: none;
554 #network-statistics-charts {
557 background: #000000; /* Toolbars */
560 #network-statistics-charts .pie-chart-container {
561 -moz-margin-start: 3vw;
562 -moz-margin-end: 1vw;
565 #network-statistics-charts .table-chart-container {
566 -moz-margin-start: 1vw;
567 -moz-margin-end: 3vw;
570 .chart-colored-blob[name=html] {
571 fill: #A09090; /* Blue-Grey highlight */
575 .chart-colored-blob[name=css] {
576 fill: #9C9CFF; /* Blue highlight */
580 .chart-colored-blob[name=js] {
581 fill: #FFCF00; /* Light Orange highlight */
585 .chart-colored-blob[name=xhr] {
586 fill: #FF9F00; /* Orange highlight */
590 .chart-colored-blob[name=fonts] {
591 fill: #6000CF; /* Purple highlight */
595 .chart-colored-blob[name=images] {
596 fill: #E7ADE7; /* Pink highlight */
600 .chart-colored-blob[name=media] {
601 fill: #008484; /* Green highlight */
605 .chart-colored-blob[name=flash] {
606 fill: #FF0000; /* Red highlight */
610 .table-chart-row-label[name=cached] {
614 .table-chart-row-label[name=count] {
619 .table-chart-row-label[name=label] {
623 .table-chart-row-label[name=size] {
627 .table-chart-row-label[name=time] {
631 /* Responsive sidebar */
632 @media (max-width: 700px) {
633 #requests-menu-toolbar {
637 .requests-menu-header-button {
642 margin: 0 !important;
643 /* To prevent all the margin hacks to hide the sidebar. */
646 .requests-menu-status-and-method {
650 .requests-menu-icon-and-file,
651 .requests-menu-domain {
655 .requests-menu-type {
659 .requests-menu-size {
661 border-width: 0 !important;
662 box-shadow: none !important;
663 /* The "Timeline" header is not visible anymore, and thus the
664 right border and box-shadow of "Size" column should be hidden. */
668 /* === END netmonitor.inc.css === */