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;
197 .security-state-insecure {
198 list-style-image: url("chrome://devtools/skin/images/security-state-insecure.svg");
201 .security-state-secure {
202 list-style-image: url("chrome://devtools/skin/images/security-state-secure.svg");
205 .security-state-weak {
206 list-style-image: url("chrome://devtools/skin/images/security-state-weak.svg");
209 .security-state-broken {
210 list-style-image: url("chrome://devtools/skin/images/security-state-broken.svg");
213 .security-state-local {
214 list-style-image: url("chrome://devtools/skin/images/security-state-local.svg");
218 .requests-menu-size {
224 .requests-menu-cause {
229 .requests-menu-cause-stack {
230 background-color: var(--theme-body-color-alt);
231 color: var(--theme-body-background);
238 margin-inline-end: 3px;
239 -moz-user-select: none;
242 .requests-menu-transferred {
248 /* Network requests table: status codes */
250 .requests-menu-status-code {
251 margin-inline-start: 3px !important;
253 margin-inline-end: -3em !important;
256 .requests-menu-status-icon {
257 background-color: #A09090;
260 margin-inline-start: 5px;
261 margin-inline-end: 5px;
263 border: 1px solid #000000;
264 transition: background-color 0.5s ease-in-out;
267 .requests-menu-status-icon:not([code]) {
268 background-color: var(--theme-content-color2);
271 .requests-menu-status-icon[code="cached"] {
272 border: 2px solid var(--theme-content-color2);
273 background-color: transparent;
276 .requests-menu-status-icon[code^="1"] {
277 background-color: var(--theme-highlight-blue);
280 .requests-menu-status-icon[code^="2"] {
281 background-color: var(--theme-highlight-green);
284 /* 3xx are triangles */
285 .requests-menu-status-icon[code^="3"] {
286 background-color: transparent;
289 border-left: 5px solid transparent;
290 border-right: 5px solid transparent;
291 border-bottom: 10px solid var(--theme-highlight-lightorange);
295 /* 4xx and 5xx are squares - error codes */
296 .requests-menu-status-icon[code^="4"] {
297 background-color: var(--theme-highlight-red);
298 border-radius: 0; /* squares */
301 .requests-menu-status-icon[code^="5"] {
302 background-color: var(--theme-highlight-pink);
304 transform: rotate(45deg);
307 /* Network requests table: waterfall header */
309 .requests-menu-waterfall {
310 padding-inline-start: 0;
313 #requests-menu-waterfall-label:not(.requests-menu-waterfall-visible) {
314 padding-inline-start: 13px;
317 .requests-menu-timings-division {
320 padding-inline-start: 4px;
322 pointer-events: none;
323 box-sizing: border-box;
327 .requests-menu-timings-division:first-child {
328 width: 98px; /* Substract 2px for borders */
331 .requests-menu-timings-division:not(:first-child) {
332 border-inline-start: 1px dashed;
333 margin-inline-start: -100px !important; /* Don't affect layout. */
336 .requests-menu-timings-division:-moz-locale-dir(ltr) {
337 transform-origin: left center;
340 .requests-menu-timings-division:-moz-locale-dir(rtl) {
341 transform-origin: right center;
344 .requests-menu-timings-division {
345 border-inline-start-color: var(--theme-body-color) !important;
348 .requests-menu-timings-division[division-scale=second],
349 .requests-menu-timings-division[division-scale=minute] {
353 /* Network requests table: waterfall items */
355 .requests-menu-subitem.requests-menu-waterfall {
356 padding-inline-start: 0px;
357 padding-inline-end: 4px;
358 /* Background created on a <canvas> in js. */
359 /* @see devtools/client/netmonitor/netmonitor-view.js */
360 background-image: -moz-element(#waterfall-background);
361 background-repeat: repeat-y;
362 background-position: -1px center;
365 .requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
366 background-position: right center;
369 .requests-menu-timings:-moz-locale-dir(ltr) {
370 transform-origin: left center;
373 .requests-menu-timings:-moz-locale-dir(rtl) {
374 transform-origin: right center;
377 .requests-menu-timings-total:-moz-locale-dir(ltr) {
378 transform-origin: left center;
381 .requests-menu-timings-total:-moz-locale-dir(rtl) {
382 transform-origin: right center;
385 .requests-menu-timings-total {
386 padding-inline-start: 4px;
391 .requests-menu-timings-box {
395 .requests-menu-timings-box.blocked {
396 background-color: var(--timing-blocked-color);
399 .requests-menu-timings-box.dns {
400 background-color: var(--timing-dns-color);
403 .requests-menu-timings-box.connect {
404 background-color: var(--timing-connect-color);
407 .requests-menu-timings-box.send {
408 background-color: var(--timing-send-color);
411 .requests-menu-timings-box.wait {
412 background-color: var(--timing-wait-color);
415 .requests-menu-timings-box.receive {
416 background-color: var(--timing-receive-color);
421 #network-table .side-menu-widget-empty-text,
422 #network-table .side-menu-widget-container {
423 background-color: var(--theme-body-background);
426 #network-table .side-menu-widget-item {
427 border-top-color: transparent;
428 border-bottom-color: transparent;
431 .side-menu-widget-item-contents {
435 .side-menu-widget-container {
436 box-shadow: none !important;
439 .side-menu-widget-item:not(.selected)[odd] {
440 background-color: var(--table-zebra-background);
443 .side-menu-widget-item:not(.selected):hover {
444 background-color: var(--theme-selection-background-semitransparent);
447 /* Network request details */
449 #details-pane-toggle {
450 list-style-image: var(--theme-pane-collapse-image);
453 #details-pane-toggle.pane-collapsed {
454 list-style-image: var(--theme-pane-expand-image);
457 /* Network request details tabpanels */
460 background-color: var(--theme-sidebar-background);
463 .theme-dark .tabpanel-content {
464 color: var(--theme-body-color);
468 background-color: var(--theme-toolbar-background);
471 /* Summary tabpanel */
473 .tabpanel-summary-container {
477 .tabpanel-summary-label {
478 padding-inline-start: 4px;
479 padding-inline-end: 3px;
483 .tabpanel-summary-value {
485 padding-inline-start: 3px;
488 /* Headers tabpanel */
490 #headers-summary-status,
491 #headers-summary-version {
495 #headers-summary-size {
499 #headers-summary-resend {
501 margin-inline-end: 6px;
504 #toggle-raw-headers {
506 margin-inline-end: 6px;
509 .raw-response-textarea {
513 /* Response tabpanel */
515 #response-content-info-header {
518 background-color: var(--theme-highlight-red);
519 color: var(--theme-selection-color);
522 #response-content-image-box {
524 padding-bottom: 10px;
527 #response-content-image {
529 border: 1px dashed #A09090;
533 /* Preview tabpanel */
544 /* Timings tabpanel */
546 #timings-tabpanel .tabpanel-summary-label {
550 #timings-tabpanel .requests-menu-timings-box {
551 transition: transform 0.2s ease-out;
556 #timings-tabpanel .requests-menu-timings-total {
557 transition: transform 0.2s ease-out;
560 /* Security tabpanel */
562 .security-info-section {
563 padding-inline-start: 1em;
570 .security-warning-icon {
571 background-image: url("images/alerticon-warning.png");
572 background-size: 13px 12px;
573 margin-inline-start: 5px;
579 @media (min-resolution: 1.1dppx) {
580 .security-warning-icon {
581 background-image: url("images/alerticon-warning@2x.png");
585 /* Custom request form */
588 padding: 0.6em 0.5em;
599 #custom-method-value {
604 .requests-menu-filter-button {
605 /* -moz-appearance: none;
606 background: rgba(128,128,128,0.1);
612 color: var(--theme-body-color);*/
617 .requests-menu-filter-button:hover {
618 /* background: rgba(128,128,128,0.2);*/
621 .requests-menu-filter-button:hover:active {
622 /* background-color: var(--theme-selection-background-semitransparent);*/
625 /* Performance analysis buttons */
627 #requests-menu-network-summary-button {
629 border-color: transparent;
630 list-style-image: url("images/profiler-stopwatch-tbutton.svg");
635 /* Performance analysis view */
637 #network-statistics-toolbar {
638 /* Make the toolbar invisible, it only hold the back button */
639 -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar");
640 background-color: #000000;
646 #network-statistics-back-button {
654 border-inline-start: none;
657 #network-statistics-view-splitter {
658 /* border-color: rgba(0,0,0,0.2);*/
660 pointer-events: none;
663 #network-statistics-charts {
667 #network-statistics-charts {
668 background-color: var(--theme-sidebar-background);
671 #network-statistics-charts .pie-chart-container {
672 margin-inline-start: 3vw;
673 margin-inline-end: 1vw;
676 #network-statistics-charts .table-chart-container {
677 margin-inline-start: 1vw;
678 margin-inline-end: 3vw;
681 .chart-colored-blob[name=html] {
682 fill: var(--theme-highlight-bluegrey);
683 background: var(--theme-highlight-bluegrey);
686 .chart-colored-blob[name=css] {
687 fill: var(--theme-highlight-blue);
688 background: var(--theme-highlight-blue);
691 .chart-colored-blob[name=js] {
692 fill: var(--theme-highlight-lightorange);
693 background: var(--theme-highlight-lightorange);
696 .chart-colored-blob[name=xhr] {
697 fill: var(--theme-highlight-orange);
698 background: var(--theme-highlight-orange);
701 .chart-colored-blob[name=fonts] {
702 fill: var(--theme-highlight-darkpurple);
703 background: var(--theme-highlight-darkpurple);
706 .chart-colored-blob[name=images] {
707 fill: var(--theme-highlight-pink);
708 background: var(--theme-highlight-pink);
711 .chart-colored-blob[name=media] {
712 fill: var(--theme-highlight-green);
713 background: var(--theme-highlight-green);
716 .chart-colored-blob[name=flash] {
717 fill: var(--theme-highlight-red);
718 background: var(--theme-highlight-red);
721 .table-chart-row-label[name=cached] {
725 .table-chart-row-label[name=count] {
730 .table-chart-row-label[name=label] {
734 .table-chart-row-label[name=size] {
738 .table-chart-row-label[name=time] {
742 /* Responsive sidebar */
743 @media (max-width: 700px) {
744 #requests-menu-toolbar {
748 .requests-menu-header-button {
754 margin: 0 !important;
755 /* To prevent all the margin hacks to hide the sidebar. */
758 .requests-menu-status {
763 .requests-menu-status-code {
767 .requests-menu-method,
768 .requests-menu-method-box {
773 .requests-menu-icon-and-file {
777 .requests-menu-security-and-domain {
781 .requests-menu-type {
785 .requests-menu-transferred,
786 .requests-menu-size {
791 /* Platform overrides (copied in from the old platform specific files) */
792 :root[platform="win"] .requests-menu-header-button > .button-box {
796 :root[platform="win"] .requests-menu-timings-division {
801 :root[platform="linux"] #headers-summary-resend {
805 :root[platform="linux"] #toggle-raw-headers {
809 /* Responsive sidebar */
810 @media (max-width: 700px) {
811 :root[platform="linux"] .requests-menu-header-button {