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/. */
12 --table-splitter-color: #A09090;
13 --table-zebra-background: rgba(255,159,0,0.1);
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 */
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);
26 #requests-menu-empty-notice {
32 #notice-perf-message {
36 #requests-menu-perf-notice-button {
40 list-style-image: url("images/profiler-stopwatch.svg");
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 {
50 #requests-menu-perf-notice-button .button-text {
54 #requests-menu-reload-notice-button {
59 /* Network requests table */
61 #requests-menu-toolbar {
64 #requests-menu-toolbar > .toolbar-box > .toolbar-startcap,
65 #requests-menu-toolbar > .toolbar-box > .toolbar-endcap {
69 .requests-menu-subitem {
73 .requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
74 .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
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%,
86 border-inline-start-width: 1px;
92 padding-inline-start: 13px;
96 font-weight: inherit !important;
99 .requests-menu-header:first-child .requests-menu-header-button {
103 .requests-menu-header-button:hover {
104 background-color: var(--theme-hover-background);
105 color: var(--theme-hover-color);
108 .requests-menu-header-button:hover:active {
109 background-color: var(--theme-active-background);
110 color: var(--theme-active-color);
113 .requests-menu-header-button > .button-box > .button-icon,
114 #requests-menu-waterfall-image {
117 margin-inline-end: 6px;
118 -moz-box-ordinal-group: 2;
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);
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);
132 .requests-menu-header-button > .button-box > .button-text,
133 #requests-menu-waterfall-label-wrapper {
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);
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;
148 #requests-menu-status-button {
152 #requests-menu-status-button > .button-box {
156 /* Network requests table: specific column dimensions */
158 .requests-menu-status {
164 .requests-menu-method,
165 .requests-menu-method-box {
171 .requests-menu-icon-and-file {
175 .requests-menu-icon {
177 width: calc(1em + 4px);
178 height: calc(1em + 4px);
180 margin-inline-end: 4px;
183 .requests-menu-icon {
184 outline: 1px solid var(--table-splitter-color);
187 .requests-menu-security-and-domain {
191 .requests-security-state-icon {
194 margin-inline-end: 4px;
198 .security-state-insecure {
199 list-style-image: url("chrome://devtools/skin/images/security-state-insecure.svg");
202 .security-state-secure {
203 list-style-image: url("chrome://devtools/skin/images/security-state-secure.svg");
206 .security-state-weak {
207 list-style-image: url("chrome://devtools/skin/images/security-state-weak.svg");
210 .security-state-broken {
211 list-style-image: url("chrome://devtools/skin/images/security-state-broken.svg");
214 .security-state-local {
215 list-style-image: url("chrome://devtools/skin/images/security-state-local.svg");
219 .requests-menu-size {
225 .requests-menu-cause {
230 .requests-menu-cause-stack {
231 background-color: var(--theme-body-color-alt);
232 color: var(--theme-body-background);
239 margin-inline-end: 3px;
240 -moz-user-select: none;
243 .requests-menu-transferred {
249 /* Network requests table: status codes */
251 .requests-menu-status-code {
252 margin-inline-start: 3px !important;
254 margin-inline-end: -3em !important;
257 .requests-menu-status-icon {
258 background-color: #A09090;
261 margin-inline-start: 5px;
262 margin-inline-end: 5px;
264 border: 1px solid #000000;
265 transition: background-color 0.5s ease-in-out;
268 .requests-menu-status-icon:not([code]) {
269 background-color: var(--theme-content-color2);
272 .requests-menu-status-icon[code="cached"] {
273 border: 2px solid var(--theme-content-color2);
274 background-color: transparent;
277 .requests-menu-status-icon[code^="1"] {
278 background-color: var(--theme-highlight-blue);
281 .requests-menu-status-icon[code^="2"] {
282 background-color: var(--theme-highlight-green);
285 /* 3xx are triangles */
286 .requests-menu-status-icon[code^="3"] {
287 background-color: transparent;
290 border-left: 5px solid transparent;
291 border-right: 5px solid transparent;
292 border-bottom: 10px solid var(--theme-highlight-lightorange);
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 */
302 .requests-menu-status-icon[code^="5"] {
303 background-color: var(--theme-highlight-pink);
305 transform: rotate(45deg);
308 /* Network requests table: waterfall header */
310 .requests-menu-waterfall {
311 padding-inline-start: 0;
314 #requests-menu-waterfall-label:not(.requests-menu-waterfall-visible) {
315 padding-inline-start: 13px;
318 .requests-menu-timings-division {
321 padding-inline-start: 4px;
323 pointer-events: none;
324 box-sizing: border-box;
328 .requests-menu-timings-division:first-child {
329 width: 98px; /* Substract 2px for borders */
332 .requests-menu-timings-division:not(:first-child) {
333 border-inline-start: 1px dashed;
334 margin-inline-start: -100px !important; /* Don't affect layout. */
337 .requests-menu-timings-division:-moz-locale-dir(ltr) {
338 transform-origin: left center;
341 .requests-menu-timings-division:-moz-locale-dir(rtl) {
342 transform-origin: right center;
345 .requests-menu-timings-division {
346 border-inline-start-color: var(--theme-body-color) !important;
349 .requests-menu-timings-division[division-scale=second],
350 .requests-menu-timings-division[division-scale=minute] {
354 /* Network requests table: waterfall items */
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;
366 .requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
367 background-position: right center;
370 .requests-menu-timings:-moz-locale-dir(ltr) {
371 transform-origin: left center;
374 .requests-menu-timings:-moz-locale-dir(rtl) {
375 transform-origin: right center;
378 .requests-menu-timings-total:-moz-locale-dir(ltr) {
379 transform-origin: left center;
382 .requests-menu-timings-total:-moz-locale-dir(rtl) {
383 transform-origin: right center;
386 .requests-menu-timings-total {
387 padding-inline-start: 4px;
392 .requests-menu-timings-box {
396 .requests-menu-timings-box.blocked {
397 background-color: var(--timing-blocked-color);
400 .requests-menu-timings-box.dns {
401 background-color: var(--timing-dns-color);
404 .requests-menu-timings-box.connect {
405 background-color: var(--timing-connect-color);
408 .requests-menu-timings-box.send {
409 background-color: var(--timing-send-color);
412 .requests-menu-timings-box.wait {
413 background-color: var(--timing-wait-color);
416 .requests-menu-timings-box.receive {
417 background-color: var(--timing-receive-color);
422 #network-table .side-menu-widget-empty-text,
423 #network-table .side-menu-widget-container {
424 background-color: var(--theme-body-background);
427 #network-table .side-menu-widget-item {
428 border-top-color: transparent;
429 border-bottom-color: transparent;
432 .side-menu-widget-item-contents {
436 .side-menu-widget-container {
437 box-shadow: none !important;
440 .side-menu-widget-item:not(.selected)[odd] {
441 background-color: var(--table-zebra-background);
444 .side-menu-widget-item:not(.selected):hover {
445 background-color: var(--theme-selection-background-semitransparent);
448 /* Network request details */
450 #details-pane-toggle {
451 list-style-image: var(--theme-pane-collapse-image);
454 #details-pane-toggle.pane-collapsed {
455 list-style-image: var(--theme-pane-expand-image);
458 /* Network request details tabpanels */
461 background-color: var(--theme-sidebar-background);
464 .theme-dark .tabpanel-content {
465 color: var(--theme-body-color);
469 background-color: var(--theme-toolbar-background);
472 /* Summary tabpanel */
474 .tabpanel-summary-container {
478 .tabpanel-summary-label {
479 padding-inline-start: 4px;
480 padding-inline-end: 3px;
484 .tabpanel-summary-value {
486 padding-inline-start: 3px;
489 /* Headers tabpanel */
491 #headers-summary-status,
492 #headers-summary-version {
496 #headers-summary-size {
500 #headers-summary-resend {
502 margin-inline-end: 6px;
505 #toggle-raw-headers {
507 margin-inline-end: 6px;
510 .raw-response-textarea {
514 /* Response tabpanel */
516 #response-content-info-header {
519 background-color: var(--theme-highlight-red);
520 color: var(--theme-selection-color);
523 #response-content-image-box {
525 padding-bottom: 10px;
528 #response-content-image {
530 border: 1px dashed #A09090;
534 /* Preview tabpanel */
545 /* Timings tabpanel */
547 #timings-tabpanel .tabpanel-summary-label {
551 #timings-tabpanel .requests-menu-timings-box {
552 transition: transform 0.2s ease-out;
557 #timings-tabpanel .requests-menu-timings-total {
558 transition: transform 0.2s ease-out;
561 /* Security tabpanel */
563 .security-info-section {
564 padding-inline-start: 1em;
571 .security-warning-icon {
572 background-image: url("images/alerticon-warning.png");
573 background-size: 13px 12px;
574 margin-inline-start: 5px;
580 @media (min-resolution: 1.1dppx) {
581 .security-warning-icon {
582 background-image: url("images/alerticon-warning@2x.png");
586 /* Custom request form */
589 padding: 0.6em 0.5em;
600 #custom-method-value {
605 .requests-menu-filter-button {
606 /* -moz-appearance: none;
607 background: rgba(128,128,128,0.1);
613 color: var(--theme-body-color);*/
618 .requests-menu-filter-button:hover {
619 /* background: rgba(128,128,128,0.2);*/
622 .requests-menu-filter-button:hover:active {
623 /* background-color: var(--theme-selection-background-semitransparent);*/
626 /* Performance analysis buttons */
628 #requests-menu-network-summary-button {
630 border-color: transparent;
631 list-style-image: url("images/profiler-stopwatch-tbutton.svg");
636 /* Performance analysis view */
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;
647 #network-statistics-back-button {
655 border-inline-start: none;
658 #network-statistics-view-splitter {
659 /* border-color: rgba(0,0,0,0.2);*/
661 pointer-events: none;
664 #network-statistics-charts {
668 #network-statistics-charts {
669 background-color: var(--theme-sidebar-background);
672 #network-statistics-charts .pie-chart-container {
673 margin-inline-start: 3vw;
674 margin-inline-end: 1vw;
677 #network-statistics-charts .table-chart-container {
678 margin-inline-start: 1vw;
679 margin-inline-end: 3vw;
682 .chart-colored-blob[name=html] {
683 fill: var(--theme-highlight-bluegrey);
684 background: var(--theme-highlight-bluegrey);
687 .chart-colored-blob[name=css] {
688 fill: var(--theme-highlight-blue);
689 background: var(--theme-highlight-blue);
692 .chart-colored-blob[name=js] {
693 fill: var(--theme-highlight-lightorange);
694 background: var(--theme-highlight-lightorange);
697 .chart-colored-blob[name=xhr] {
698 fill: var(--theme-highlight-orange);
699 background: var(--theme-highlight-orange);
702 .chart-colored-blob[name=fonts] {
703 fill: var(--theme-highlight-darkpurple);
704 background: var(--theme-highlight-darkpurple);
707 .chart-colored-blob[name=images] {
708 fill: var(--theme-highlight-pink);
709 background: var(--theme-highlight-pink);
712 .chart-colored-blob[name=media] {
713 fill: var(--theme-highlight-green);
714 background: var(--theme-highlight-green);
717 .chart-colored-blob[name=flash] {
718 fill: var(--theme-highlight-red);
719 background: var(--theme-highlight-red);
722 .table-chart-row-label[name=cached] {
726 .table-chart-row-label[name=count] {
731 .table-chart-row-label[name=label] {
735 .table-chart-row-label[name=size] {
739 .table-chart-row-label[name=time] {
743 /* Responsive sidebar */
744 @media (max-width: 700px) {
745 #requests-menu-toolbar {
749 .requests-menu-header-button {
755 margin: 0 !important;
756 /* To prevent all the margin hacks to hide the sidebar. */
759 .requests-menu-status {
764 .requests-menu-status-code {
768 .requests-menu-method,
769 .requests-menu-method-box {
774 .requests-menu-icon-and-file {
778 .requests-menu-security-and-domain {
782 .requests-menu-type {
786 .requests-menu-transferred,
787 .requests-menu-size {
792 /* Platform overrides (copied in from the old platform specific files) */
793 :root[platform="win"] .requests-menu-header-button > .button-box {
797 :root[platform="win"] .requests-menu-timings-division {
802 :root[platform="linux"] #headers-summary-resend {
806 :root[platform="linux"] #toggle-raw-headers {
810 /* Responsive sidebar */
811 @media (max-width: 700px) {
812 :root[platform="linux"] .requests-menu-header-button {