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/. */
14 .devtools-toolbar-container {
16 justify-content: space-between;
19 .devtools-toolbar-group {
27 * Collapsed details pane needs to be truly hidden to prevent both accessibility
28 * tools and keyboard from accessing its contents.
30 #details-pane.pane-collapsed {
34 #details-pane-toggle[disabled] {
42 #response-content-image-box {
46 #network-statistics-charts {
50 .cropped-textbox .textbox-input {
51 /* workaround for textbox not supporting the @crop attribute */
52 text-overflow: ellipsis;
55 /* Responsive sidebar */
56 @media (max-width: 700px) {
59 #details-pane.pane-collapsed,
60 .requests-menu-waterfall,
61 #requests-menu-network-summary-button > .summary-info-text {
68 --table-splitter-color: #A09090;
69 --table-zebra-background: rgba(255,159,0,0.1);
71 --timing-blocked-color: #FF0000;
72 --timing-dns-color: #E7ADE7; /* pink */
73 --timing-connect-color: #FF9F00; /* orange */
74 --timing-send-color: #FFCF00; /* light blue */
75 --timing-wait-color: #9C9CFF; /* blue grey */
76 --timing-receive-color: #A09090; /* green */
78 --sort-ascending-image: url(chrome://devtools/skin/images/sort-arrows.svg#ascending);
79 --sort-descending-image: url(chrome://devtools/skin/images/sort-arrows.svg#descending);
82 #requests-menu-empty-notice {
88 #notice-perf-message {
92 #requests-menu-perf-notice-button {
96 list-style-image: url("images/profiler-stopwatch.svg");
99 /* Make sure the icon is visible on Linux (to overwrite a rule
100 in xul.css that hides the icon if there is no label.
101 See also bug 1278050. */
102 #requests-menu-perf-notice-button .button-icon {
106 #requests-menu-perf-notice-button .button-text {
110 #requests-menu-reload-notice-button {
115 /* Network requests table */
117 #requests-menu-toolbar {
120 #requests-menu-filter-buttons {
125 #requests-menu-toolbar > .toolbar-box > .toolbar-startcap,
126 #requests-menu-toolbar > .toolbar-box > .toolbar-endcap {
130 .requests-menu-subitem {
134 .requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
135 .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
138 #requests-menu-status-button,
139 .requests-menu-header-button {
140 background-color: transparent;
141 border-image: linear-gradient(transparent 15%,
142 var(--theme-toolbar-background) 15%,
143 var(--theme-toolbar-background) 85%,
144 transparent 85%) 1 1;
147 border-inline-start-width: 1px;
153 padding-inline-start: 13px;
157 font-weight: inherit !important;
160 .requests-menu-header:first-child .requests-menu-header-button {
164 .requests-menu-header-button:hover {
165 background-color: var(--theme-hover-background);
166 color: var(--theme-hover-color);
169 .requests-menu-header-button:hover:active {
170 background-color: var(--theme-active-background);
171 color: var(--theme-active-color);
174 .requests-menu-header-button > .button-box > .button-icon,
175 #requests-menu-waterfall-image {
178 margin-inline-end: 6px;
179 -moz-box-ordinal-group: 2;
183 .requests-menu-header-button[sorted=ascending] > .button-box > .button-icon,
184 .requests-menu-header-button[sorted=ascending] #requests-menu-waterfall-image {
185 list-style-image: var(--sort-ascending-image);
188 .requests-menu-header-button[sorted=descending] > .button-box > .button-icon,
189 .requests-menu-header-button[sorted=descending] #requests-menu-waterfall-image {
190 list-style-image: var(--sort-descending-image);
193 .requests-menu-header-button > .button-box > .button-text,
194 #requests-menu-waterfall-label-wrapper {
198 .requests-menu-header-button[sorted],
199 .requests-menu-header-button[sorted]:hover {
200 background-color: var(--theme-selection-background);
201 color: var(--theme-selection-color);
204 .requests-menu-header-button[sorted],
205 .requests-menu-header[active] + .requests-menu-header .requests-menu-header-button {
206 border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
209 #requests-menu-status-button {
213 #requests-menu-status-button > .button-box {
217 /* Network requests table: specific column dimensions */
219 .requests-menu-status {
225 .requests-menu-method,
226 .requests-menu-method-box {
232 .requests-menu-icon-and-file {
236 .requests-menu-icon {
238 width: calc(1em + 4px);
239 height: calc(1em + 4px);
241 margin-inline-end: 4px;
244 .requests-menu-icon {
245 outline: 1px solid var(--table-splitter-color);
248 .requests-menu-security-and-domain {
252 .requests-security-state-icon {
255 margin-inline-end: 4px;
258 .security-state-insecure {
259 list-style-image: url("chrome://devtools/skin/images/security-state-insecure.svg");
262 .security-state-secure {
263 list-style-image: url("chrome://devtools/skin/images/security-state-secure.svg");
266 .security-state-weak {
267 list-style-image: url("chrome://devtools/skin/images/security-state-weak.svg");
270 .security-state-broken {
271 list-style-image: url("chrome://devtools/skin/images/security-state-broken.svg");
274 .security-state-local {
275 list-style-image: url("chrome://devtools/skin/images/security-state-local.svg");
279 .requests-menu-size {
285 .requests-menu-cause {
290 .requests-menu-cause-stack {
291 background-color: var(--theme-body-color-alt);
292 color: var(--theme-body-background);
299 margin-inline-end: 3px;
300 -moz-user-select: none;
303 .requests-menu-transferred {
309 /* Network requests table: status codes */
311 .requests-menu-status-code {
312 margin-inline-start: 3px !important;
314 margin-inline-end: -3em !important;
317 .requests-menu-status-icon {
318 background-color: #A09090;
321 margin-inline-start: 5px;
322 margin-inline-end: 5px;
324 border: 1px solid #000000;
325 transition: background-color 0.5s ease-in-out;
328 .requests-menu-status-icon:not([code]) {
329 background-color: var(--theme-content-color2);
332 .requests-menu-status-icon[code="cached"] {
333 border: 2px solid var(--theme-content-color2);
334 background-color: transparent;
337 .requests-menu-status-icon[code^="1"] {
338 background-color: var(--theme-highlight-blue);
341 .requests-menu-status-icon[code^="2"] {
342 background-color: var(--theme-highlight-green);
345 /* 3xx are triangles */
346 .requests-menu-status-icon[code^="3"] {
347 background-color: transparent;
350 border-left: 5px solid transparent;
351 border-right: 5px solid transparent;
352 border-bottom: 10px solid var(--theme-highlight-lightorange);
356 /* 4xx and 5xx are squares - error codes */
357 .requests-menu-status-icon[code^="4"] {
358 background-color: var(--theme-highlight-red);
359 border-radius: 0; /* squares */
362 .requests-menu-status-icon[code^="5"] {
363 background-color: var(--theme-highlight-pink);
365 transform: rotate(45deg);
368 /* Network requests table: waterfall header */
370 .requests-menu-waterfall {
371 padding-inline-start: 0;
374 #requests-menu-waterfall-label:not(.requests-menu-waterfall-visible) {
375 padding-inline-start: 13px;
378 .requests-menu-timings-division {
381 padding-inline-start: 4px;
383 pointer-events: none;
384 box-sizing: border-box;
388 .requests-menu-timings-division:first-child {
389 width: 98px; /* Substract 2px for borders */
392 .requests-menu-timings-division:not(:first-child) {
393 border-inline-start: 1px dashed;
394 margin-inline-start: -100px !important; /* Don't affect layout. */
397 .requests-menu-timings-division:-moz-locale-dir(ltr) {
398 transform-origin: left center;
401 .requests-menu-timings-division:-moz-locale-dir(rtl) {
402 transform-origin: right center;
405 .requests-menu-timings-division {
406 border-inline-start-color: var(--theme-body-color) !important;
409 .requests-menu-timings-division[division-scale=second],
410 .requests-menu-timings-division[division-scale=minute] {
414 /* Network requests table: waterfall items */
416 .requests-menu-subitem.requests-menu-waterfall {
417 padding-inline-start: 0px;
418 padding-inline-end: 4px;
419 /* Background created on a <canvas> in js. */
420 /* @see devtools/client/netmonitor/netmonitor-view.js */
421 background-image: -moz-element(#waterfall-background);
422 background-repeat: repeat-y;
423 background-position: -1px center;
426 .requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
427 background-position: right center;
430 .requests-menu-timings:-moz-locale-dir(ltr) {
431 transform-origin: left center;
434 .requests-menu-timings:-moz-locale-dir(rtl) {
435 transform-origin: right center;
438 .requests-menu-timings-total:-moz-locale-dir(ltr) {
439 transform-origin: left center;
442 .requests-menu-timings-total:-moz-locale-dir(rtl) {
443 transform-origin: right center;
446 .requests-menu-timings-total {
447 padding-inline-start: 4px;
452 .requests-menu-timings-box {
456 .requests-menu-timings-box.blocked {
457 background-color: var(--timing-blocked-color);
460 .requests-menu-timings-box.dns {
461 background-color: var(--timing-dns-color);
464 .requests-menu-timings-box.connect {
465 background-color: var(--timing-connect-color);
468 .requests-menu-timings-box.send {
469 background-color: var(--timing-send-color);
472 .requests-menu-timings-box.wait {
473 background-color: var(--timing-wait-color);
476 .requests-menu-timings-box.receive {
477 background-color: var(--timing-receive-color);
482 #network-table .side-menu-widget-empty-text,
483 #network-table .side-menu-widget-container {
484 background-color: var(--theme-body-background);
487 #network-table .side-menu-widget-item {
488 border-top-color: transparent;
489 border-bottom-color: transparent;
492 .side-menu-widget-item-contents {
496 .side-menu-widget-container {
497 box-shadow: none !important;
500 .side-menu-widget-item:not(.selected)[odd] {
501 background-color: var(--table-zebra-background);
504 .side-menu-widget-item:not(.selected):hover {
505 background-color: var(--theme-selection-background-semitransparent);
508 /* Network request details */
510 #details-pane-toggle {
511 list-style-image: var(--theme-pane-collapse-image);
514 #details-pane-toggle.pane-collapsed {
515 list-style-image: var(--theme-pane-expand-image);
518 #details-pane-toggle:-moz-locale-dir(ltr)::before,
519 #details-pane-toggle.pane-collapsed:-moz-locale-dir(rtl)::before {
520 background-image: var(--theme-pane-collapse-image);
523 #details-pane-toggle.pane-collapsed:-moz-locale-dir(ltr)::before,
524 #details-pane-toggle:-moz-locale-dir(rtl)::before {
525 background-image: var(--theme-pane-expand-image);
528 /* Network request details tabpanels */
531 background-color: var(--theme-sidebar-background);
534 .theme-dark .tabpanel-content {
535 color: var(--theme-body-color);
539 background-color: var(--theme-toolbar-background);
542 /* Summary tabpanel */
544 .tabpanel-summary-container {
548 .tabpanel-summary-label {
549 padding-inline-start: 4px;
550 padding-inline-end: 3px;
554 .tabpanel-summary-value {
556 padding-inline-start: 3px;
559 /* Headers tabpanel */
561 #headers-summary-status,
562 #headers-summary-version {
566 #headers-summary-size {
570 #headers-summary-resend {
572 margin-inline-end: 6px;
575 #toggle-raw-headers {
577 margin-inline-end: 6px;
580 .raw-response-textarea {
584 /* Response tabpanel */
586 #response-content-info-header {
589 background-color: var(--theme-highlight-red);
590 color: var(--theme-selection-color);
593 #response-content-image-box {
595 padding-bottom: 10px;
598 #response-content-image {
600 border: 1px dashed #A09090;
604 /* Preview tabpanel */
615 /* Timings tabpanel */
617 #timings-tabpanel .tabpanel-summary-label {
621 #timings-tabpanel .requests-menu-timings-box {
622 transition: transform 0.2s ease-out;
627 #timings-tabpanel .requests-menu-timings-total {
628 transition: transform 0.2s ease-out;
631 /* Security tabpanel */
633 .security-info-section {
634 padding-inline-start: 1em;
641 .security-warning-icon {
642 background-image: url("images/alerticon-warning.png");
643 background-size: 13px 12px;
644 margin-inline-start: 5px;
650 @media (min-resolution: 1.1dppx) {
651 .security-warning-icon {
652 background-image: url("images/alerticon-warning@2x.png");
656 /* Custom request form */
659 padding: 0.6em 0.5em;
670 #custom-method-value {
675 .requests-menu-filter-button {
676 /* -moz-appearance: none;
677 background: rgba(128,128,128,0.1);
683 color: var(--theme-body-color);*/
688 .requests-menu-filter-button:hover {
689 /* background: rgba(128,128,128,0.2);*/
692 .requests-menu-filter-button:hover:active {
693 /* background-color: var(--theme-selection-background-semitransparent);*/
696 /* Performance analysis buttons */
698 #requests-menu-network-summary-button {
704 border-color: transparent;
705 list-style-image: url("images/profiler-stopwatch-tbutton.svg");
710 /* Performance analysis view */
712 #network-statistics-toolbar {
713 /* Make the toolbar invisible, it only hold the back button */
714 -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar");
715 background-color: #000000;
721 #network-statistics-back-button {
729 border-inline-start: none;
732 #network-statistics-view-splitter {
733 /* border-color: rgba(0,0,0,0.2);*/
735 pointer-events: none;
738 #network-statistics-charts {
742 #network-statistics-charts {
743 background-color: var(--theme-sidebar-background);
746 #network-statistics-charts .pie-chart-container {
747 margin-inline-start: 3vw;
748 margin-inline-end: 1vw;
751 #network-statistics-charts .table-chart-container {
752 margin-inline-start: 1vw;
753 margin-inline-end: 3vw;
756 .chart-colored-blob[name=html] {
757 fill: var(--theme-highlight-bluegrey);
758 background: var(--theme-highlight-bluegrey);
761 .chart-colored-blob[name=css] {
762 fill: var(--theme-highlight-blue);
763 background: var(--theme-highlight-blue);
766 .chart-colored-blob[name=js] {
767 fill: var(--theme-highlight-lightorange);
768 background: var(--theme-highlight-lightorange);
771 .chart-colored-blob[name=xhr] {
772 fill: var(--theme-highlight-orange);
773 background: var(--theme-highlight-orange);
776 .chart-colored-blob[name=fonts] {
777 fill: var(--theme-highlight-darkpurple);
778 background: var(--theme-highlight-darkpurple);
781 .chart-colored-blob[name=images] {
782 fill: var(--theme-highlight-pink);
783 background: var(--theme-highlight-pink);
786 .chart-colored-blob[name=media] {
787 fill: var(--theme-highlight-green);
788 background: var(--theme-highlight-green);
791 .chart-colored-blob[name=flash] {
792 fill: var(--theme-highlight-red);
793 background: var(--theme-highlight-red);
796 .table-chart-row-label[name=cached] {
800 .table-chart-row-label[name=count] {
805 .table-chart-row-label[name=label] {
809 .table-chart-row-label[name=size] {
813 .table-chart-row-label[name=time] {
817 /* Responsive sidebar */
818 @media (max-width: 700px) {
819 #requests-menu-toolbar {
823 .requests-menu-header-button {
829 margin: 0 !important;
830 /* To prevent all the margin hacks to hide the sidebar. */
833 .requests-menu-status {
838 .requests-menu-status-code {
842 .requests-menu-method,
843 .requests-menu-method-box {
848 .requests-menu-icon-and-file {
852 .requests-menu-security-and-domain {
856 .requests-menu-type {
860 .requests-menu-transferred,
861 .requests-menu-size {
866 /* Platform overrides (copied in from the old platform specific files) */
867 :root[platform="win"] .requests-menu-header-button > .button-box {
871 :root[platform="win"] .requests-menu-timings-division {
876 :root[platform="linux"] #headers-summary-resend {
880 :root[platform="linux"] #toggle-raw-headers {
884 /* Responsive sidebar */
885 @media (max-width: 700px) {
886 :root[platform="linux"] .requests-menu-header-button {