first part of syncing LCARStrek with Firefox 49/50 devtools theme changes
[themes.git] / LCARStrek / devtools / netmonitor.css
... / ...
CommitLineData
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/. */
5
6window {
7 padding: 0;
8}
9
10:root.theme-dark,
11:root.theme-light {
12 --table-splitter-color: #A09090;
13 --table-zebra-background: rgba(255,159,0,0.1);
14
15 --timing-blocked-color: #FF0000;
16 --timing-dns-color: #E7ADE7; /* pink */
17 --timing-connect-color: #FF9F00; /* orange */
18 --timing-send-color: #FFCF00; /* light blue */
19 --timing-wait-color: #9C9CFF; /* blue grey */
20 --timing-receive-color: #A09090; /* green */
21
22 --sort-ascending-image: url(chrome://devtools/skin/images/sort-arrows.svg#ascending);
23 --sort-descending-image: url(chrome://devtools/skin/images/sort-arrows.svg#descending);
24}
25
26#requests-menu-empty-notice {
27 margin: 0;
28 padding: 12px;
29 font-size: 120%;
30}
31
32#notice-perf-message {
33 margin-top: 2px;
34}
35
36#requests-menu-perf-notice-button {
37 min-width: 30px;
38 min-height: 26px;
39 margin: 0;
40 list-style-image: url("images/profiler-stopwatch.svg");
41}
42
43/* Make sure the icon is visible on Linux (to overwrite a rule
44 in xul.css that hides the icon if there is no label.
45 See also bug 1278050. */
46#requests-menu-perf-notice-button .button-icon {
47 display: block;
48}
49
50#requests-menu-perf-notice-button .button-text {
51 display: none;
52}
53
54#requests-menu-reload-notice-button {
55 min-height: 26px;
56 margin: 0;
57}
58
59/* Network requests table */
60
61#requests-menu-toolbar {
62}
63
64#requests-menu-toolbar > .toolbar-box > .toolbar-startcap,
65#requests-menu-toolbar > .toolbar-box > .toolbar-endcap {
66 display: none;
67}
68
69.requests-menu-subitem {
70 padding: 3px;
71}
72
73.requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
74.requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
75}
76
77#requests-menu-status-button,
78.requests-menu-header-button {
79 background-color: transparent;
80 border-image: linear-gradient(transparent 15%,
81 var(--theme-toolbar-background) 15%,
82 var(--theme-toolbar-background) 85%,
83 transparent 85%) 1 1;
84 border-style: solid;
85 border-width: 0;
86 border-inline-start-width: 1px;
87 border-radius: 0;
88 min-width: 1px;
89 min-height: 24px;
90 margin: 0;
91 padding-bottom: 2px;
92 padding-inline-start: 13px;
93 padding-top: 2px;
94 text-align: center;
95/* color: inherit;*/
96 font-weight: inherit !important;
97}
98
99.requests-menu-header:first-child .requests-menu-header-button {
100 border-width: 0;
101}
102
103.requests-menu-header-button:hover {
104 background-color: var(--theme-hover-background);
105 color: var(--theme-hover-color);
106}
107
108.requests-menu-header-button:hover:active {
109 background-color: var(--theme-active-background);
110 color: var(--theme-active-color);
111}
112
113.requests-menu-header-button > .button-box > .button-icon,
114#requests-menu-waterfall-image {
115 display: -moz-box;
116 height: 4px;
117 margin-inline-end: 6px;
118 -moz-box-ordinal-group: 2;
119 width: 7px;
120}
121
122.requests-menu-header-button[sorted=ascending] > .button-box > .button-icon,
123.requests-menu-header-button[sorted=ascending] #requests-menu-waterfall-image {
124 list-style-image: var(--sort-ascending-image);
125}
126
127.requests-menu-header-button[sorted=descending] > .button-box > .button-icon,
128.requests-menu-header-button[sorted=descending] #requests-menu-waterfall-image {
129 list-style-image: var(--sort-descending-image);
130}
131
132.requests-menu-header-button > .button-box > .button-text,
133#requests-menu-waterfall-label-wrapper {
134 -moz-box-flex: 1;
135}
136
137.requests-menu-header-button[sorted],
138.requests-menu-header-button[sorted]:hover {
139 background-color: var(--theme-selection-background);
140 color: var(--theme-selection-color);
141}
142
143.requests-menu-header-button[sorted],
144.requests-menu-header[active] + .requests-menu-header .requests-menu-header-button {
145 border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
146}
147
148#requests-menu-status-button {
149 border: none;
150}
151
152#requests-menu-status-button > .button-box {
153 padding: 0;
154}
155
156/* Network requests table: specific column dimensions */
157
158.requests-menu-status {
159 max-width: 6em;
160 text-align: center;
161 width: 10vw;
162}
163
164.requests-menu-method,
165.requests-menu-method-box {
166 max-width: 7em;
167 text-align: center;
168 width: 10vw;
169}
170
171.requests-menu-icon-and-file {
172 width: 22vw;
173}
174
175.requests-menu-icon {
176 background: #FFCF00;
177 width: calc(1em + 4px);
178 height: calc(1em + 4px);
179 margin: -4px 0px;
180 margin-inline-end: 4px;
181}
182
183.requests-menu-icon {
184 outline: 1px solid var(--table-splitter-color);
185}
186
187.requests-menu-security-and-domain {
188 width: 14vw;
189}
190
191.requests-security-state-icon {
192 width: 16px;
193 height: 16px;
194 margin-inline-end: 4px;
195 cursor: pointer;
196}
197
198.security-state-insecure {
199 list-style-image: url("chrome://devtools/skin/images/security-state-insecure.svg");
200}
201
202.security-state-secure {
203 list-style-image: url("chrome://devtools/skin/images/security-state-secure.svg");
204}
205
206.security-state-weak {
207 list-style-image: url("chrome://devtools/skin/images/security-state-weak.svg");
208}
209
210.security-state-broken {
211 list-style-image: url("chrome://devtools/skin/images/security-state-broken.svg");
212}
213
214.security-state-local {
215 list-style-image: url("chrome://devtools/skin/images/security-state-local.svg");
216}
217
218.requests-menu-type,
219.requests-menu-size {
220 max-width: 6em;
221 text-align: center;
222 width: 8vw;
223}
224
225.requests-menu-cause {
226 max-width: 8em;
227 width: 8vw;
228}
229
230.requests-menu-cause-stack {
231 background-color: var(--theme-body-color-alt);
232 color: var(--theme-body-background);
233 font-size: 8px;
234 font-weight: bold;
235 line-height: 10px;
236 border-radius: 3px;
237 padding: 0 2px;
238 margin: 0;
239 margin-inline-end: 3px;
240 -moz-user-select: none;
241}
242
243.requests-menu-transferred {
244 max-width: 8em;
245 text-align: center;
246 width: 8vw;
247}
248
249/* Network requests table: status codes */
250
251.requests-menu-status-code {
252 margin-inline-start: 3px !important;
253 width: 3em;
254 margin-inline-end: -3em !important;
255}
256
257.requests-menu-status-icon {
258 background-color: #A09090;
259 height: 10px;
260 width: 10px;
261 margin-inline-start: 5px;
262 margin-inline-end: 5px;
263 border-radius: 20px;
264 border: 1px solid #000000;
265 transition: background-color 0.5s ease-in-out;
266}
267
268.requests-menu-status-icon:not([code]) {
269 background-color: var(--theme-content-color2);
270}
271
272.requests-menu-status-icon[code="cached"] {
273 border: 2px solid var(--theme-content-color2);
274 background-color: transparent;
275}
276
277.requests-menu-status-icon[code^="1"] {
278 background-color: var(--theme-highlight-blue);
279}
280
281.requests-menu-status-icon[code^="2"] {
282 background-color: var(--theme-highlight-green);
283}
284
285/* 3xx are triangles */
286.requests-menu-status-icon[code^="3"] {
287 background-color: transparent;
288 width: 0;
289 height: 0;
290 border-left: 5px solid transparent;
291 border-right: 5px solid transparent;
292 border-bottom: 10px solid var(--theme-highlight-lightorange);
293 border-radius: 0;
294}
295
296/* 4xx and 5xx are squares - error codes */
297.requests-menu-status-icon[code^="4"] {
298 background-color: var(--theme-highlight-red);
299 border-radius: 0; /* squares */
300}
301
302.requests-menu-status-icon[code^="5"] {
303 background-color: var(--theme-highlight-pink);
304 border-radius: 0;
305 transform: rotate(45deg);
306}
307
308/* Network requests table: waterfall header */
309
310.requests-menu-waterfall {
311 padding-inline-start: 0;
312}
313
314#requests-menu-waterfall-label:not(.requests-menu-waterfall-visible) {
315 padding-inline-start: 13px;
316}
317
318.requests-menu-timings-division {
319 width: 100px;
320 padding-top: 2px;
321 padding-inline-start: 4px;
322 font-size: 75%;
323 pointer-events: none;
324 box-sizing: border-box;
325 text-align: start;
326}
327
328.requests-menu-timings-division:first-child {
329 width: 98px; /* Substract 2px for borders */
330}
331
332.requests-menu-timings-division:not(:first-child) {
333 border-inline-start: 1px dashed;
334 margin-inline-start: -100px !important; /* Don't affect layout. */
335}
336
337.requests-menu-timings-division:-moz-locale-dir(ltr) {
338 transform-origin: left center;
339}
340
341.requests-menu-timings-division:-moz-locale-dir(rtl) {
342 transform-origin: right center;
343}
344
345.requests-menu-timings-division {
346 border-inline-start-color: var(--theme-body-color) !important;
347}
348
349.requests-menu-timings-division[division-scale=second],
350.requests-menu-timings-division[division-scale=minute] {
351 font-weight: 600;
352}
353
354/* Network requests table: waterfall items */
355
356.requests-menu-subitem.requests-menu-waterfall {
357 padding-inline-start: 0px;
358 padding-inline-end: 4px;
359 /* Background created on a <canvas> in js. */
360 /* @see devtools/client/netmonitor/netmonitor-view.js */
361 background-image: -moz-element(#waterfall-background);
362 background-repeat: repeat-y;
363 background-position: -1px center;
364}
365
366.requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
367 background-position: right center;
368}
369
370.requests-menu-timings:-moz-locale-dir(ltr) {
371 transform-origin: left center;
372}
373
374.requests-menu-timings:-moz-locale-dir(rtl) {
375 transform-origin: right center;
376}
377
378.requests-menu-timings-total:-moz-locale-dir(ltr) {
379 transform-origin: left center;
380}
381
382.requests-menu-timings-total:-moz-locale-dir(rtl) {
383 transform-origin: right center;
384}
385
386.requests-menu-timings-total {
387 padding-inline-start: 4px;
388 font-size: 85%;
389 font-weight: 600;
390}
391
392.requests-menu-timings-box {
393 height: 9px;
394}
395
396.requests-menu-timings-box.blocked {
397 background-color: var(--timing-blocked-color);
398}
399
400.requests-menu-timings-box.dns {
401 background-color: var(--timing-dns-color);
402}
403
404.requests-menu-timings-box.connect {
405 background-color: var(--timing-connect-color);
406}
407
408.requests-menu-timings-box.send {
409 background-color: var(--timing-send-color);
410}
411
412.requests-menu-timings-box.wait {
413 background-color: var(--timing-wait-color);
414}
415
416.requests-menu-timings-box.receive {
417 background-color: var(--timing-receive-color);
418}
419
420/* SideMenuWidget */
421
422#network-table .side-menu-widget-empty-text,
423#network-table .side-menu-widget-container {
424 background-color: var(--theme-body-background);
425}
426
427#network-table .side-menu-widget-item {
428 border-top-color: transparent;
429 border-bottom-color: transparent;
430}
431
432.side-menu-widget-item-contents {
433 padding: 0px;
434}
435
436.side-menu-widget-container {
437 box-shadow: none !important;
438}
439
440.side-menu-widget-item:not(.selected)[odd] {
441 background-color: var(--table-zebra-background);
442}
443
444.side-menu-widget-item:not(.selected):hover {
445 background-color: var(--theme-selection-background-semitransparent);
446}
447
448/* Network request details */
449
450#details-pane-toggle {
451 list-style-image: var(--theme-pane-collapse-image);
452}
453
454#details-pane-toggle.pane-collapsed {
455 list-style-image: var(--theme-pane-expand-image);
456}
457
458/* Network request details tabpanels */
459
460.tabpanel-content {
461 background-color: var(--theme-sidebar-background);
462}
463
464.theme-dark .tabpanel-content {
465 color: var(--theme-body-color);
466}
467
468#headers-tabpanel {
469 background-color: var(--theme-toolbar-background);
470}
471
472/* Summary tabpanel */
473
474.tabpanel-summary-container {
475 padding: 1px;
476}
477
478.tabpanel-summary-label {
479 padding-inline-start: 4px;
480 padding-inline-end: 3px;
481 font-weight: 600;
482}
483
484.tabpanel-summary-value {
485 color: inherit;
486 padding-inline-start: 3px;
487}
488
489/* Headers tabpanel */
490
491#headers-summary-status,
492#headers-summary-version {
493 padding-bottom: 2px;
494}
495
496#headers-summary-size {
497 padding-top: 2px;
498}
499
500#headers-summary-resend {
501 margin-top: -10px;
502 margin-inline-end: 6px;
503}
504
505#toggle-raw-headers {
506 margin-top: -10px;
507 margin-inline-end: 6px;
508}
509
510.raw-response-textarea {
511 height: 50vh;
512}
513
514/* Response tabpanel */
515
516#response-content-info-header {
517 margin: 0;
518 padding: 3px 8px;
519 background-color: var(--theme-highlight-red);
520 color: var(--theme-selection-color);
521}
522
523#response-content-image-box {
524 padding-top: 10px;
525 padding-bottom: 10px;
526}
527
528#response-content-image {
529 background: #FFFFFF;
530 border: 1px dashed #A09090;
531 margin-bottom: 10px;
532}
533
534/* Preview tabpanel */
535
536#preview-tabpanel {
537 background: #fff;
538}
539
540#response-preview {
541 display: -moz-box;
542 -moz-box-flex: 1;
543}
544
545/* Timings tabpanel */
546
547#timings-tabpanel .tabpanel-summary-label {
548 width: 10em;
549}
550
551#timings-tabpanel .requests-menu-timings-box {
552 transition: transform 0.2s ease-out;
553 border: none;
554 min-width: 1px;
555}
556
557#timings-tabpanel .requests-menu-timings-total {
558 transition: transform 0.2s ease-out;
559}
560
561/* Security tabpanel */
562
563.security-info-section {
564 padding-inline-start: 1em;
565}
566
567#security-tabpanel {
568 overflow: auto;
569}
570
571.security-warning-icon {
572 background-image: url("images/alerticon-warning.png");
573 background-size: 13px 12px;
574 margin-inline-start: 5px;
575 vertical-align: top;
576 width: 13px;
577 height: 12px;
578}
579
580@media (min-resolution: 1.1dppx) {
581 .security-warning-icon {
582 background-image: url("images/alerticon-warning@2x.png");
583 }
584}
585
586/* Custom request form */
587
588#custom-pane {
589 padding: 0.6em 0.5em;
590}
591
592.custom-header {
593 font-size: 1.1em;
594}
595
596.custom-section {
597 margin-top: 0.5em;
598}
599
600#custom-method-value {
601 width: 4.5em;
602}
603
604/* Main toolbar */
605.requests-menu-filter-button {
606/* -moz-appearance: none;
607 background: rgba(128,128,128,0.1);
608 border: none;
609 border-radius: 2px;
610 min-width: 0;
611 padding: 0 5px;
612 margin: 2px;
613 color: var(--theme-body-color);*/
614 margin-top: 0;
615 margin-bottom: 0;
616}
617
618.requests-menu-filter-button:hover {
619/* background: rgba(128,128,128,0.2);*/
620}
621
622.requests-menu-filter-button:hover:active {
623/* background-color: var(--theme-selection-background-semitransparent);*/
624}
625
626/* Performance analysis buttons */
627
628#requests-menu-network-summary-button {
629 box-shadow: none;
630 border-color: transparent;
631 list-style-image: url("images/profiler-stopwatch-tbutton.svg");
632 cursor: pointer;
633 min-width: 0;
634}
635
636/* Performance analysis view */
637
638#network-statistics-toolbar {
639 /* Make the toolbar invisible, it only hold the back button */
640 -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar");
641 background-color: #000000;
642 border: none;
643 margin: 0;
644 padding: 0;
645}
646
647#network-statistics-back-button {
648 min-width: 4em;
649 min-height: 100vh;
650 margin: 0;
651 padding: 0;
652 border-radius: 0;
653 border-top: none;
654 border-bottom: none;
655 border-inline-start: none;
656}
657
658#network-statistics-view-splitter {
659/* border-color: rgba(0,0,0,0.2);*/
660 cursor: default;
661 pointer-events: none;
662}
663
664#network-statistics-charts {
665 min-height: 1px;
666}
667
668#network-statistics-charts {
669 background-color: var(--theme-sidebar-background);
670}
671
672#network-statistics-charts .pie-chart-container {
673 margin-inline-start: 3vw;
674 margin-inline-end: 1vw;
675}
676
677#network-statistics-charts .table-chart-container {
678 margin-inline-start: 1vw;
679 margin-inline-end: 3vw;
680}
681
682.chart-colored-blob[name=html] {
683 fill: var(--theme-highlight-bluegrey);
684 background: var(--theme-highlight-bluegrey);
685}
686
687.chart-colored-blob[name=css] {
688 fill: var(--theme-highlight-blue);
689 background: var(--theme-highlight-blue);
690}
691
692.chart-colored-blob[name=js] {
693 fill: var(--theme-highlight-lightorange);
694 background: var(--theme-highlight-lightorange);
695}
696
697.chart-colored-blob[name=xhr] {
698 fill: var(--theme-highlight-orange);
699 background: var(--theme-highlight-orange);
700}
701
702.chart-colored-blob[name=fonts] {
703 fill: var(--theme-highlight-darkpurple);
704 background: var(--theme-highlight-darkpurple);
705}
706
707.chart-colored-blob[name=images] {
708 fill: var(--theme-highlight-pink);
709 background: var(--theme-highlight-pink);
710}
711
712.chart-colored-blob[name=media] {
713 fill: var(--theme-highlight-green);
714 background: var(--theme-highlight-green);
715}
716
717.chart-colored-blob[name=flash] {
718 fill: var(--theme-highlight-red);
719 background: var(--theme-highlight-red);
720}
721
722.table-chart-row-label[name=cached] {
723 display: none;
724}
725
726.table-chart-row-label[name=count] {
727 width: 3em;
728 text-align: end;
729}
730
731.table-chart-row-label[name=label] {
732 width: 7em;
733}
734
735.table-chart-row-label[name=size] {
736 width: 7em;
737}
738
739.table-chart-row-label[name=time] {
740 width: 7em;
741}
742
743/* Responsive sidebar */
744@media (max-width: 700px) {
745 #requests-menu-toolbar {
746 height: 22px;
747 }
748
749 .requests-menu-header-button {
750 min-height: 22px;
751 padding-left: 8px;
752 }
753
754 #details-pane {
755 margin: 0 !important;
756 /* To prevent all the margin hacks to hide the sidebar. */
757 }
758
759 .requests-menu-status {
760 max-width: none;
761 width: 12vw;
762 }
763
764 .requests-menu-status-code {
765 width: auto;
766 }
767
768 .requests-menu-method,
769 .requests-menu-method-box {
770 max-width: none;
771 width: 14vw;
772 }
773
774 .requests-menu-icon-and-file {
775 width: 22vw;
776 }
777
778 .requests-menu-security-and-domain {
779 width: 18vw;
780 }
781
782 .requests-menu-type {
783 width: 10vw;
784 }
785
786 .requests-menu-transferred,
787 .requests-menu-size {
788 width: 12vw;
789 }
790}
791
792/* Platform overrides (copied in from the old platform specific files) */
793:root[platform="win"] .requests-menu-header-button > .button-box {
794 padding: 0;
795}
796
797:root[platform="win"] .requests-menu-timings-division {
798 padding-top: 1px;
799 font-size: 90%;
800}
801
802:root[platform="linux"] #headers-summary-resend {
803 padding: 4px;
804}
805
806:root[platform="linux"] #toggle-raw-headers {
807 padding: 4px;
808}
809
810/* Responsive sidebar */
811@media (max-width: 700px) {
812 :root[platform="linux"] .requests-menu-header-button {
813 font-size: 85%;
814 }
815}