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 === */
14 --table-splitter-color: #A09090;
15 --table-zebra-background: rgba(255,159,0,0.1);
17 --timing-blocked-color: #FF0000;
18 --timing-dns-color: #E7ADE7; /* pink */
19 --timing-connect-color: #FF9F00; /* orange */
20 --timing-send-color: #FFCF00; /* light blue */
21 --timig-wait-color: #9C9CFF; /* blue grey */
22 --timing-receive-color: #A09090; /* green */
24 --sort-ascending-image: url(chrome://devtools/skin/images/sort-arrows.svg#ascending);
25 --sort-descending-image: url(chrome://devtools/skin/images/sort-arrows.svg#descending);
28 #requests-menu-empty-notice {
34 #notice-perf-message {
38 #requests-menu-perf-notice-button {
42 list-style-image: url("images/profiler-stopwatch.svg");
45 #requests-menu-perf-notice-button .button-text {
49 #requests-menu-reload-notice-button {
54 /* Network requests table */
56 #requests-menu-toolbar {
59 #requests-menu-toolbar > .toolbar-box > .toolbar-startcap,
60 #requests-menu-toolbar > .toolbar-box > .toolbar-endcap {
64 .requests-menu-subitem {
68 .requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
69 .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
72 #requests-menu-status-button,
73 .requests-menu-header-button {
74 background-color: transparent;
75 border-image: linear-gradient(transparent 15%,
76 var(--theme-toolbar-background) 15%,
77 var(--theme-toolbar-background) 85%,
81 border-inline-start-width: 1px;
87 padding-inline-start: 13px;
91 font-weight: inherit !important;
94 .requests-menu-header:first-child .requests-menu-header-button {
98 .requests-menu-header-button:hover {
99 background-color: var(--theme-hover-background);
100 color: var(--theme-hover-color);
103 .requests-menu-header-button:hover:active {
104 background-color: var(--theme-active-background);
105 color: var(--theme-active-color);
108 .requests-menu-header-button > .button-box > .button-icon,
109 #requests-menu-waterfall-image {
112 margin-inline-end: 6px;
113 -moz-box-ordinal-group: 2;
117 .requests-menu-header-button[sorted=ascending] > .button-box > .button-icon,
118 .requests-menu-header-button[sorted=ascending] #requests-menu-waterfall-image {
119 list-style-image: var(--sort-ascending-image);
122 .requests-menu-header-button[sorted=descending] > .button-box > .button-icon,
123 .requests-menu-header-button[sorted=descending] #requests-menu-waterfall-image {
124 list-style-image: var(--sort-descending-image);
127 .requests-menu-header-button > .button-box > .button-text,
128 #requests-menu-waterfall-label-wrapper {
132 .requests-menu-header-button[sorted],
133 .requests-menu-header-button[sorted]:hover {
134 background-color: var(--theme-selection-background);
135 color: var(--theme-selection-color);
138 .requests-menu-header-button[sorted],
139 .requests-menu-header[active] + .requests-menu-header .requests-menu-header-button {
140 border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
143 #requests-menu-status-button {
147 #requests-menu-status-button > .button-box {
151 /* Network requests table: specific column dimensions */
153 .requests-menu-status {
159 .requests-menu-method,
160 .requests-menu-method-box {
166 .requests-menu-icon-and-file {
170 .requests-menu-icon {
172 width: calc(1em + 4px);
173 height: calc(1em + 4px);
175 -moz-margin-end: 4px;
178 .requests-menu-icon {
179 outline: 1px solid var(--table-splitter-color);
182 .requests-menu-security-and-domain {
186 .requests-security-state-icon {
189 -moz-margin-end: 4px;
193 .security-state-insecure {
194 list-style-image: url("chrome://devtools/skin/images/security-state-insecure.svg");
197 .security-state-secure {
198 list-style-image: url("chrome://devtools/skin/images/security-state-secure.svg");
201 .security-state-weak {
202 list-style-image: url("chrome://devtools/skin/images/security-state-weak.svg");
205 .security-state-broken {
206 list-style-image: url("chrome://devtools/skin/images/security-state-broken.svg");
209 .security-state-local {
210 list-style-image: url("chrome://devtools/skin/images/security-state-local.svg");
214 .requests-menu-size {
220 .requests-menu-cause {
225 .requests-menu-cause-stack {
226 background-color: var(--theme-body-color-alt);
227 color: var(--theme-body-background);
234 margin-inline-end: 3px;
235 -moz-user-select: none;
238 .requests-menu-transferred {
244 /* Network requests table: status codes */
246 .requests-menu-status-code {
247 -moz-margin-start: 3px !important;
249 -moz-margin-end: -3em !important;
252 .requests-menu-status-icon {
253 background-color: #A09090;
256 -moz-margin-start: 5px;
257 -moz-margin-end: 5px;
259 border: 1px solid #000000;
260 transition: background-color 0.5s ease-in-out;
263 .requests-menu-status-icon:not([code]) {
264 background-color: var(--theme-content-color2);
267 .requests-menu-status-icon[code="cached"] {
268 border: 2px solid var(--theme-content-color2);
269 background-color: transparent;
272 .requests-menu-status-icon[code^="1"] {
273 background-color: var(--theme-highlight-blue);
276 .requests-menu-status-icon[code^="2"] {
277 background-color: var(--theme-highlight-green);
280 /* 3xx are triangles */
281 .requests-menu-status-icon[code^="3"] {
282 background-color: transparent;
285 border-left: 5px solid transparent;
286 border-right: 5px solid transparent;
287 border-bottom: 10px solid var(--theme-highlight-lightorange);
291 /* 4xx and 5xx are squares - error codes */
292 .requests-menu-status-icon[code^="4"] {
293 background-color: var(--theme-highlight-red);
294 border-radius: 0; /* squares */
297 .requests-menu-status-icon[code^="5"] {
298 background-color: var(--theme-highlight-pink);
300 transform: rotate(45deg);
303 /* Network requests table: waterfall header */
305 .requests-menu-waterfall {
306 padding-inline-start: 0;
309 #requests-menu-waterfall-label:not(.requests-menu-waterfall-visible) {
310 padding-inline-start: 13px;
313 .requests-menu-timings-division {
316 padding-inline-start: 4px;
318 pointer-events: none;
319 box-sizing: border-box;
323 .requests-menu-timings-division:first-child {
324 width: 98px; /* Substract 2px for borders */
327 .requests-menu-timings-division:not(:first-child) {
328 border-inline-start: 1px dashed;
329 margin-inline-start: -100px !important; /* Don't affect layout. */
332 .requests-menu-timings-division:-moz-locale-dir(ltr) {
333 transform-origin: left center;
336 .requests-menu-timings-division:-moz-locale-dir(rtl) {
337 transform-origin: right center;
340 .requests-menu-timings-division {
341 border-inline-start-color: var(--theme-body-color) !important;
344 .requests-menu-timings-division[division-scale=second],
345 .requests-menu-timings-division[division-scale=minute] {
349 /* Network requests table: waterfall items */
351 .requests-menu-subitem.requests-menu-waterfall {
352 -moz-padding-start: 0px;
353 -moz-padding-end: 4px;
354 /* Background created on a <canvas> in js. */
355 /* @see devtools/client/netmonitor/netmonitor-view.js */
356 background-image: -moz-element(#waterfall-background);
357 background-repeat: repeat-y;
358 background-position: -1px center;
361 .requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
362 background-position: right center;
365 .requests-menu-timings:-moz-locale-dir(ltr) {
366 transform-origin: left center;
369 .requests-menu-timings:-moz-locale-dir(rtl) {
370 transform-origin: right center;
373 .requests-menu-timings-total:-moz-locale-dir(ltr) {
374 transform-origin: left center;
377 .requests-menu-timings-total:-moz-locale-dir(rtl) {
378 transform-origin: right center;
381 .requests-menu-timings-total {
382 -moz-padding-start: 4px;
387 .requests-menu-timings-box {
391 .requests-menu-timings-box.blocked {
392 background-color: var(--timing-blocked-color);
395 .requests-menu-timings-box.dns {
396 background-color: var(--timing-dns-color);
399 .requests-menu-timings-box.connect {
400 background-color: var(--timing-connect-color);
403 .requests-menu-timings-box.send {
404 background-color: var(--timing-send-color);
407 .requests-menu-timings-box.wait {
408 background-color: var(--timing-wait-color);
411 .requests-menu-timings-box.receive {
412 background-color: var(--timing-receive-color);
417 #network-table .side-menu-widget-empty-text,
418 #network-table .side-menu-widget-container {
419 background-color: var(--theme-body-background);
422 #network-table .side-menu-widget-item {
423 border-top-color: transparent;
424 border-bottom-color: transparent;
427 .side-menu-widget-item-contents {
431 .side-menu-widget-container {
432 box-shadow: none !important;
435 .side-menu-widget-item:not(.selected)[odd] {
436 background-color: var(--table-zebra-background);
439 .side-menu-widget-item:not(.selected):hover {
440 background-color: var(--theme-selection-background-semitransparent);
443 /* Network request details */
445 #details-pane-toggle {
446 list-style-image: var(--theme-pane-collapse-image);
449 #details-pane-toggle[pane-collapsed] {
450 list-style-image: var(--theme-pane-expand-image);
453 /* Network request details tabpanels */
456 background-color: var(--theme-sidebar-background);
459 .theme-dark .tabpanel-content {
460 color: var(--theme-body-color);
464 background-color: var(--theme-toolbar-background);
467 /* Summary tabpanel */
469 .tabpanel-summary-container {
473 .tabpanel-summary-label {
474 -moz-padding-start: 4px;
475 -moz-padding-end: 3px;
479 .tabpanel-summary-value {
481 -moz-padding-start: 3px;
484 /* Headers tabpanel */
486 #headers-summary-status,
487 #headers-summary-version {
491 #headers-summary-size {
495 #headers-summary-resend {
497 -moz-margin-end: 6px;
500 #toggle-raw-headers {
502 -moz-margin-end: 6px;
505 .raw-response-textarea {
509 /* Response tabpanel */
511 #response-content-info-header {
514 background-color: var(--theme-highlight-red);
515 color: var(--theme-selection-color);
518 #response-content-image-box {
520 padding-bottom: 10px;
523 #response-content-image {
525 border: 1px dashed #A09090;
529 /* Preview tabpanel */
540 /* Timings tabpanel */
542 #timings-tabpanel .tabpanel-summary-label {
546 #timings-tabpanel .requests-menu-timings-box {
547 transition: transform 0.2s ease-out;
552 #timings-tabpanel .requests-menu-timings-total {
553 transition: transform 0.2s ease-out;
556 /* Security tabpanel */
558 .security-info-section {
559 -moz-padding-start: 1em;
566 .security-warning-icon {
567 background-image: url("images/alerticon-warning.png");
568 background-size: 13px 12px;
569 -moz-margin-start: 5px;
575 @media (min-resolution: 1.1dppx) {
576 .security-warning-icon {
577 background-image: url("images/alerticon-warning@2x.png");
581 /* Custom request form */
584 padding: 0.6em 0.5em;
595 #custom-method-value {
600 .requests-menu-filter-button {
601 /* -moz-appearance: none;
602 background: rgba(128,128,128,0.1);
608 color: var(--theme-body-color);*/
613 .requests-menu-filter-button:hover {
614 /* background: rgba(128,128,128,0.2);*/
617 .requests-menu-filter-button:hover:active {
618 /* background-color: var(--theme-selection-background-semitransparent);*/
621 /* Performance analysis buttons */
623 #requests-menu-network-summary-button {
625 border-color: transparent;
626 list-style-image: url("images/profiler-stopwatch-tbutton.svg");
631 /* Performance analysis view */
633 #network-statistics-toolbar {
634 /* Make the toolbar invisible, it only hold the back button */
635 -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar");
636 background-color: #000000;
642 #network-statistics-back-button {
650 -moz-border-start: none;
653 #network-statistics-view-splitter {
654 /* border-color: rgba(0,0,0,0.2);*/
656 pointer-events: none;
659 #network-statistics-charts {
663 #network-statistics-charts {
664 background-color: var(--theme-sidebar-background);
667 #network-statistics-charts .pie-chart-container {
668 -moz-margin-start: 3vw;
669 -moz-margin-end: 1vw;
672 #network-statistics-charts .table-chart-container {
673 -moz-margin-start: 1vw;
674 -moz-margin-end: 3vw;
677 .chart-colored-blob[name=html] {
678 fill: var(--theme-highlight-bluegrey);
679 background: var(--theme-highlight-bluegrey);
682 .chart-colored-blob[name=css] {
683 fill: var(--theme-highlight-blue);
684 background: var(--theme-highlight-blue);
687 .chart-colored-blob[name=js] {
688 fill: var(--theme-highlight-lightorange);
689 background: var(--theme-highlight-lightorange);
692 .chart-colored-blob[name=xhr] {
693 fill: var(--theme-highlight-orange);
694 background: var(--theme-highlight-orange);
697 .chart-colored-blob[name=fonts] {
698 fill: var(--theme-highlight-darkpurple);
699 background: var(--theme-highlight-darkpurple);
702 .chart-colored-blob[name=images] {
703 fill: var(--theme-highlight-pink);
704 background: var(--theme-highlight-pink);
707 .chart-colored-blob[name=media] {
708 fill: var(--theme-highlight-green);
709 background: var(--theme-highlight-green);
712 .chart-colored-blob[name=flash] {
713 fill: var(--theme-highlight-red);
714 background: var(--theme-highlight-red);
717 .table-chart-row-label[name=cached] {
721 .table-chart-row-label[name=count] {
726 .table-chart-row-label[name=label] {
730 .table-chart-row-label[name=size] {
734 .table-chart-row-label[name=time] {
738 /* Responsive sidebar */
739 @media (max-width: 700px) {
740 #requests-menu-toolbar {
744 .requests-menu-header-button {
750 margin: 0 !important;
751 /* To prevent all the margin hacks to hide the sidebar. */
754 .requests-menu-status {
759 .requests-menu-status-code {
763 .requests-menu-method,
764 .requests-menu-method-box {
769 .requests-menu-icon-and-file {
773 .requests-menu-security-and-domain {
777 .requests-menu-type {
781 .requests-menu-transferred,
782 .requests-menu-size {
787 /* Platform overrides (copied in from the old platform specific files) */
788 :root[platform="win"] .requests-menu-header-button > .button-box {
792 :root[platform="win"] .requests-menu-timings-division {
797 :root[platform="linux"] #headers-summary-resend {
801 :root[platform="linux"] #toggle-raw-headers {
805 /* Responsive sidebar */
806 @media (max-width: 700px) {
807 :root[platform="linux"] .requests-menu-header-button {