The Tor Browser: browser/themes/shared/devtools/netmonitor.inc.css@6474c204b198 (annotated)

browser/themes/shared/devtools/netmonitor.inc.css@6474c204b198 (annotated)

browser/themes/shared/devtools/netmonitor.inc.css

Wed, 31 Dec 2014 06:09:35 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Wed, 31 Dec 2014 06:09:35 +0100
changeset 0: 6474c204b198
permissions: -rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

 /* vim:set ts=2 sw=2 sts=2 et: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 #requests-menu-empty-notice {
   margin: 0;
   padding: 12px;
   font-size: 120%;
 }
 .theme-dark #requests-menu-empty-notice {
   color: #f5f7fa; /* Light foreground text */
 }
 .theme-light #requests-menu-empty-notice {
   color: #585959; /* Grey foreground text */
 }
 #requests-menu-perf-notice-button {
   min-width: 30px;
   min-height: 28px;
   margin: 0;
   list-style-image: url(profiler-stopwatch.png);
   -moz-image-region: rect(0px,16px,16px,0px);
 }
 #requests-menu-perf-notice-button .button-text {
   display: none;
 }
 %filter substitution
 %define table_itemDarkStartBorder rgba(0,0,0,0.2)
 %define table_itemDarkEndBorder rgba(128,128,128,0.15)
 %define table_itemLightStartBorder rgba(128,128,128,0.25)
 %define table_itemLightEndBorder transparent
 /* Network requests table */
 #requests-menu-toolbar {
   padding: 0;
 }
 .requests-menu-header:first-child,
 .requests-menu-subitem:first-child {
   -moz-padding-start: 6px;
 }
 .requests-menu-subitem {
   padding: 3px;
 }
 .theme-dark .requests-menu-header:not(:last-child),
 .theme-dark .requests-menu-subitem:not(:last-child) {
   -moz-border-end: 1px solid @table_itemDarkStartBorder@;
   box-shadow: 1px 0 0 @table_itemDarkEndBorder@;
 }
 .theme-dark .requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
 .theme-dark .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
   box-shadow: -1px 0 0 @table_itemDarkEndBorder@;
 }
 .theme-light .requests-menu-header:not(:last-child),
 .theme-light .requests-menu-subitem:not(:last-child) {
   -moz-border-end: 1px solid @table_itemLightStartBorder@;
   box-shadow: 1px 0 0 @table_itemLightEndBorder@;
 }
 .theme-light .requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
 .theme-light .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
   box-shadow: -1px 0 0 @table_itemLightEndBorder@;
 }
 .requests-menu-header-button {
   -moz-appearance: none;
   background: none;
   min-width: 1px;
   min-height: 32px;
   margin: 0;
   border: none;
   padding: 0;
   color: inherit;
   font-weight: inherit !important;
   transition: background-color 0.1s ease-in-out;
 }
 .requests-menu-header-button:hover {
   background: rgba(0,0,0,0.10);
 }
 .requests-menu-header-button:hover:active {
   background: rgba(0,0,0,0.25);
 }
 .requests-menu-header-button:not(:active)[sorted] {
   background: rgba(0,0,0,0.15);
 }
 .requests-menu-header-button:not(:active)[sorted=ascending] {
   background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
   background-size: 100% 1px;
   background-repeat: no-repeat;
 }
 .requests-menu-header-button:not(:active)[sorted=descending] {
   background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
   background-size: 100% 1px;
   background-repeat: no-repeat;
   background-position: bottom;
 }
 /* Network requests table: specific column dimensions */
 .requests-menu-status-and-method {
   width: 12em;
 }
 .requests-menu-status {
   width: 20px;
   height: 10px;
 }
 .requests-menu-method {
   text-align: center;
   font-weight: 600;
 }
 .requests-menu-icon-and-file {
   width: 20vw;
   min-width: 4em;
 }
 .requests-menu-icon {
   background: #fff;
   width: calc(1em + 4px);
   height: calc(1em + 4px);
   margin: -4px 0px;
   -moz-margin-end: 4px;
 }
 .theme-dark .requests-menu-icon {
   outline: 1px solid @table_itemDarkStartBorder@;
 }
 .theme-light .requests-menu-icon {
   outline: 1px solid @table_itemLightStartBorder@;
 }
 .requests-menu-file {
   text-align: start;
 }
 .requests-menu-domain {
   width: 14vw;
   min-width: 10em;
 }
 .requests-menu-type {
   text-align: center;
   width: 4em;
 }
 .requests-menu-size {
   text-align: center;
   width: 8em;
 }
 /* Network requests table: status codes */
 box.requests-menu-status {
   background: #fff;
   width: 10px;
   -moz-margin-start: 5px;
   -moz-margin-end: 5px;
   border-radius: 10px;
   transition: box-shadow 0.5s ease-in-out;
 }
 label.requests-menu-status-code {
   -moz-margin-start: 3px !important;
   width: 3em;
   -moz-margin-end: -3em !important;
 }
 .theme-dark box.requests-menu-status:not([code]) {
   background-color: rgba(95, 115, 135, 1); /* dark grey */
 }
 .theme-light box.requests-menu-status:not([code]) {
   background-color: rgba(143, 161, 178, 1); /* grey */
 }
 .theme-dark box.requests-menu-status[code^="1"] {
   background-color: rgba(70, 175, 227, 1); /* light blue */
 }
 .theme-light box.requests-menu-status[code^="1"] {
   background-color: rgba(0, 136, 204, 1); /* light blue */
 }
 .theme-dark box.requests-menu-status[code^="2"] {
   background-color: rgba(112, 191, 83, 1); /* green */
 }
 .theme-light box.requests-menu-status[code^="2"] {
   background-color: rgba(44, 187, 15, 1); /* green */
 }
 /* 3xx are triangles */
 .theme-dark box.requests-menu-status[code^="3"] {
   background-color: transparent;
   width: 0;
   height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-bottom: 10px solid rgba(217, 155, 40, 1); /* light orange */
   border-radius: 0;
 }
 .theme-light box.requests-menu-status[code^="3"] {
   background-color: transparent;
   width: 0;
   height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-bottom: 10px solid rgba(217, 126, 0, 1); /* light orange */
   border-radius: 0;
 }
 /* 4xx and 5xx are squares - error codes */
 .theme-dark box.requests-menu-status[code^="4"] {
   background-color: rgba(235, 83, 104, 1); /* red */
   border-radius: 0; /* squares */
 }
 .theme-light box.requests-menu-status[code^="4"] {
   background-color: rgba(237, 38, 85, 1); /* red */
   border-radius: 0; /* squares */
 }
 .theme-dark box.requests-menu-status[code^="5"] {
   background-color: rgba(223, 128, 255, 1); /* pink? */
   border-radius: 0;
   transform: rotate(45deg);
 }
 .theme-light box.requests-menu-status[code^="5"] {
   background-color: rgba(184, 46, 229, 1); /* pink! */
   border-radius: 0;
   transform: rotate(45deg);
 }
 /* Network requests table: waterfall header */
 #requests-menu-waterfall-label {
   -moz-padding-start: 8px;
   -moz-padding-end: 8px;
 }
 .requests-menu-timings-division {
   width: 100px;
   padding-top: 2px;
   -moz-padding-start: 4px;
   font-size: 75%;
   pointer-events: none;
 }
 .requests-menu-timings-division:not(:first-child) {
   -moz-border-start: 1px dotted;
   -moz-margin-start: -100px !important; /* Don't affect layout. */
 }
 .requests-menu-timings-division:-moz-locale-dir(ltr) {
   transform-origin: left center;
 }
 .requests-menu-timings-division:-moz-locale-dir(rtl) {
   transform-origin: right center;
 }
 .theme-dark .requests-menu-timings-division[division-scale=millisecond] {
   -moz-border-start-color: #f5f7fa !important; /* Light foreground text */
 }
 .theme-light .requests-menu-timings-division[division-scale=millisecond] {
   -moz-border-start-color: #585959 !important; /* Grey foreground text */
 }
 .theme-dark .requests-menu-timings-division[division-scale=second] {
   -moz-border-start-color: #f5f7fa !important; /* Light foreground text */
   font-weight: 600;
 }
 .theme-light .requests-menu-timings-division[division-scale=second] {
   -moz-border-start-color: #585959 !important; /* Grey foreground text */
   font-weight: 600;
 }
 .theme-dark .requests-menu-timings-division[division-scale=minute] {
   -moz-border-start-color: #f5f7fa !important; /* Light foreground text */
   font-weight: 600;
 }
 .theme-light .requests-menu-timings-division[division-scale=minute] {
   -moz-border-start-color: #585959 !important; /* Grey foreground text */
   font-weight: 600;
 }
 /* Network requests table: waterfall items */
 .requests-menu-subitem.requests-menu-waterfall {
   -moz-padding-start: 0px;
   -moz-padding-end: 4px;
   background-repeat: repeat-y; /* Background created on a <canvas> in js. */
   background-position: -1px center;
 }
 .requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
   background-position: right center;
 }
 .requests-menu-timings:-moz-locale-dir(ltr) {
   transform-origin: left center;
 }
 .requests-menu-timings:-moz-locale-dir(rtl) {
   transform-origin: right center;
 }
 .requests-menu-timings-total:-moz-locale-dir(ltr) {
   transform-origin: left center;
 }
 .requests-menu-timings-total:-moz-locale-dir(rtl) {
   transform-origin: right center;
 }
 .requests-menu-timings-total {
   -moz-padding-start: 4px;
   font-size: 85%;
   font-weight: 600;
 }
 .requests-menu-timings-box {
   height: 9px;
 }
 .requests-menu-timings-box.blocked {
   background-color: rgba(235, 83, 104, 0.8); /* red */
 }
 .requests-menu-timings-box.dns {
   background-color: rgba(223, 128, 255, 0.8); /* pink */
 }
 .requests-menu-timings-box.connect {
   background-color: rgba(217, 102, 41, 0.8); /* orange */
 }
 /* Use custom colors for dark and light theme on remaining timing types. */
 .theme-dark .requests-menu-timings-box.send {
   background-color: rgba(70, 175, 227, 0.8); /* light blue */
 }
 .theme-light .requests-menu-timings-box.send {
   background-color: rgba(0, 136, 204, 0.8); /* blue */
 }
 .theme-dark .requests-menu-timings-box.wait {
   background-color: rgba(94, 136, 176, 0.8); /* blue grey */
 }
 .theme-light .requests-menu-timings-box.wait {
   background-color: rgba(95, 136, 176, 0.8); /* blue grey */
 }
 .theme-dark .requests-menu-timings-box.receive {
   background-color: rgba(112, 191, 83, 0.8); /* green */
 }
 .theme-light .requests-menu-timings-box.receive {
   background-color: rgba(44, 187, 15, 0.8); /* green */
 }
 /* SideMenuWidget */
 .side-menu-widget-item-contents {
   padding: 0px;
 }
 .theme-dark .side-menu-widget-item:not(.selected)[odd] {
   background: rgba(255,255,255,0.05);
 }
 .theme-light .side-menu-widget-item:not(.selected)[odd] {
   background: rgba(128,128,128,0.05);
 }
 /* Network request details */
 #details-pane-toggle {
   background: none;
   box-shadow: none;
   border-color: transparent;
   list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
   -moz-image-region: rect(0px,16px,16px,0px);
 }
 #details-pane-toggle[pane-collapsed] {
   list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
 }
 #details-pane-toggle:active {
   -moz-image-region: rect(0px,32px,16px,16px);
 }
 /* Network request details tabpanels */
 .theme-dark .tabpanel-content {
   background: url(background-noise-toolbar.png), #343c45; /* Toolbars */
   color: #f5f7fa; /* Light foreground text */
 }
 /* Summary tabpanel */
 .tabpanel-summary-container {
   padding: 1px;
 }
 .tabpanel-summary-label {
   -moz-padding-start: 4px;
   -moz-padding-end: 3px;
   font-weight: 600;
 }
 .tabpanel-summary-value {
   -moz-padding-start: 3px;
 }
 /* Headers tabpanel */
 #headers-summary-status,
 #headers-summary-version {
   padding-bottom: 2px;
 }
 #headers-summary-size {
   padding-top: 2px;
 }
 #headers-summary-resend {
   margin-top: -10px;
   -moz-margin-end: 6px;
 }
 /* Response tabpanel */
 #response-content-info-header {
   margin: 0;
   padding: 3px 8px;
 }
 .theme-dark  #response-content-info-header {
   background: url(background-noise-toolbar.png), #eb5368; /* Red highlight */
   color: #f5f7fa; /* Light foreground text */
 }
 .theme-light  #response-content-info-header {
   background: url(background-noise-toolbar.png), #ed2655; /* Red highlight */
   color: #f5f7fa; /* Light foreground text */
 }
 #response-content-image-box {
   padding-top: 10px;
   padding-bottom: 10px;
 }
 #response-content-image {
   background: #fff;
   border: 1px dashed GrayText;
   margin-bottom: 10px;
 }
 /* Preview tabpanel */
 #preview-tabpanel {
   background: #fff;
 }
 #response-preview {
   display: -moz-box;
   -moz-box-flex: 1;
 }
 /* Timings tabpanel */
 #timings-tabpanel .tabpanel-summary-label {
   width: 10em;
 }
 #timings-tabpanel .requests-menu-timings-box {
   transition: transform 0.2s ease-out;
   border: none;
   min-width: 1px;
 }
 #timings-tabpanel .requests-menu-timings-total {
   transition: transform 0.2s ease-out;
 }
 /* Custom request form */
 #custom-pane {
   padding: 0.6em 0.5em;
 }
 .custom-header {
   font-size: 1.1em;
 }
 .custom-section {
   margin-top: 0.5em;
 }
 #custom-method-value {
   width: 4.5em;
 }
 /* Footer */
 .theme-dark #requests-menu-footer {
   border-top: 1px solid @table_itemDarkStartBorder@;
   box-shadow: 0 1px 0 @table_itemDarkEndBorder@ inset;
   background: url(background-noise-toolbar.png), #343c45; /* Toolbars */
 }
 .theme-light #requests-menu-footer {
   border-top: 1px solid @table_itemLightStartBorder@;
   box-shadow: 0 1px 0 @table_itemLightEndBorder@ inset;
   background: url(background-noise-toolbar.png), #f0f1f2; /* Toolbars */
 }
 .requests-menu-footer-button,
 .requests-menu-footer-label {
   min-width: 1em;
   margin: 0;
   border: none;
   padding: 2px 1vw;
 }
 .theme-dark .requests-menu-footer-button,
 .theme-dark .requests-menu-footer-label {
   color: #f5f7fa; /* Light foreground text */
 }
 .theme-light .requests-menu-footer-button,
 .theme-light .requests-menu-footer-label {
   color: #18191a; /* Dark foreground text */
 }
 .requests-menu-footer-spacer {
   min-width: 2px;
 }
 .theme-dark .requests-menu-footer-spacer:not(:first-child),
 .theme-dark .requests-menu-footer-button:not(:first-child) {
   -moz-border-start: 1px solid @table_itemDarkEndBorder@;
   box-shadow: -1px 0 0 @table_itemDarkStartBorder@;
 }
 .theme-light .requests-menu-footer-spacer:not(:first-child),
 .theme-light .requests-menu-footer-button:not(:first-child) {
   -moz-border-start: 1px solid @table_itemLightEndBorder@;
   box-shadow: -1px 0 0 @table_itemLightStartBorder@;
 }
 .requests-menu-footer-button {
   -moz-appearance: none;
   background: rgba(0,0,0,0.025);
 }
 .requests-menu-footer-button:hover {
   background: rgba(0,0,0,0.10);
 }
 .theme-dark .requests-menu-footer-button:hover:active {
   background-color: rgba(29,79,115,0.4); /* Select Highlight Blue at 40% opacity */
 }
 .theme-light .requests-menu-footer-button:hover:active {
   background-color: rgba(76,158,217,0.4); /* Select Highlight Blue at 40% opacity */
 }
 .theme-dark .requests-menu-footer-button:not(:active)[checked] {
   background-color: rgba(29,79,115,1); /* Select Highlight Blue */
   color: rgba(245,247,250,1); /* Light foreground text */
 }
 .theme-light .requests-menu-footer-button:not(:active)[checked] {
   background-color: rgba(76,158,217,1); /* Select Highlight Blue */
   color: rgba(245,247,250,1); /* Light foreground text */
 }
 .requests-menu-footer-label {
   padding-top: 3px;
   font-weight: 600;
 }
 /* Performance analysis buttons */
 #requests-menu-network-summary-button {
   background: none;
   box-shadow: none;
   border-color: transparent;
   list-style-image: url(profiler-stopwatch.png);
   -moz-image-region: rect(0px,16px,16px,0px);
   -moz-padding-end: 0;
   cursor: pointer;
 }
 #requests-menu-network-summary-label {
   -moz-padding-start: 0;
   cursor: pointer;
 }
 #requests-menu-network-summary-label:hover {
   text-decoration: underline;
 }
 /* Performance analysis view */
 #network-statistics-toolbar {
   border: none;
   margin: 0;
   padding: 0;
 }
 #network-statistics-back-button {
   min-width: 4em;
   min-height: 100vh;
   margin: 0;
   padding: 0;
   border-radius: 0;
   border-top: none;
   border-bottom: none;
   -moz-border-start: none;
 }
 #network-statistics-view-splitter {
   border-color: rgba(0,0,0,0.2);
   cursor: default;
   pointer-events: none;
 }
 #network-statistics-charts {
   min-height: 1px;
 }
 .theme-dark #network-statistics-charts {
   background: url(background-noise-toolbar.png), #343c45; /* Toolbars */
 }
 .theme-light #network-statistics-charts {
   background: url(background-noise-toolbar.png), #f0f1f2; /* Toolbars */
 }
 #network-statistics-charts .pie-chart-container {
   -moz-margin-start: 3vw;
   -moz-margin-end: 1vw;
 }
 #network-statistics-charts .table-chart-container {
   -moz-margin-start: 1vw;
   -moz-margin-end: 3vw;
 }
 .theme-dark .chart-colored-blob[name=html] {
   fill: #5e88b0; /* Blue-Grey highlight */
   background: #5e88b0;
 }
 .theme-light .chart-colored-blob[name=html] {
   fill: #5f88b0; /* Blue-Grey highlight */
   background: #5f88b0;
 }
 .theme-dark .chart-colored-blob[name=css] {
   fill: #46afe3; /* Blue highlight */
   background: #46afe3;
 }
 .theme-light .chart-colored-blob[name=css] {
   fill: #0088cc; /* Blue highlight */
   background: #0088cc;
 }
 .theme-dark .chart-colored-blob[name=js] {
   fill: #d99b28; /* Light Orange highlight */
   background: #d99b28;
 }
 .theme-light .chart-colored-blob[name=js] {
   fill: #d97e00; /* Light Orange highlight */
   background: #d97e00;
 }
 .theme-dark .chart-colored-blob[name=xhr] {
   fill: #d96629; /* Orange highlight */
   background: #d96629;
 }
 .theme-light .chart-colored-blob[name=xhr] {
   fill: #f13c00; /* Orange highlight */
   background: #f13c00;
 }
 .theme-dark .chart-colored-blob[name=fonts] {
   fill: #6b7abb; /* Purple highlight */
   background: #6b7abb;
 }
 .theme-light .chart-colored-blob[name=fonts] {
   fill: #5b5fff; /* Purple highlight */
   background: #5b5fff;
 }
 .theme-dark .chart-colored-blob[name=images] {
   fill: #df80ff; /* Pink highlight */
   background: #df80ff;
 }
 .theme-light .chart-colored-blob[name=images] {
   fill: #b82ee5; /* Pink highlight */
   background: #b82ee5;
 }
 .theme-dark .chart-colored-blob[name=media] {
   fill: #70bf53; /* Green highlight */
   background: #70bf53;
 }
 .theme-light .chart-colored-blob[name=media] {
   fill: #2cbb0f; /* Green highlight */
   background: #2cbb0f;
 }
 .theme-dark .chart-colored-blob[name=flash] {
   fill: #eb5368; /* Red highlight */
   background: #eb5368;
 }
 .theme-light .chart-colored-blob[name=flash] {
   fill: #ed2655; /* Red highlight */
   background: #ed2655;
 }
 .table-chart-row-label[name=cached] {
   display: none;
 }
 .table-chart-row-label[name=count] {
   width: 3em;
   text-align: end;
 }
 .table-chart-row-label[name=label] {
   width: 7em;
 }
 .table-chart-row-label[name=size] {
   width: 7em;
 }
 .table-chart-row-label[name=time] {
   width: 7em;
 }
 /* Responsive sidebar */
 @media (max-width: 700px) {
   #requests-menu-toolbar {
     height: 22px;
   }
   .requests-menu-header-button {
     min-height: 20px;
   }
   #details-pane {
     margin: 0 !important;
     /* To prevent all the margin hacks to hide the sidebar. */
   }
   .requests-menu-status-and-method {
     width: 16vw;
   }
   .requests-menu-icon-and-file {
     width: 30vw;
   }
   .requests-menu-domain {
     width: 30vw;
   }
   .requests-menu-type {
     width: 8vw;
   }
   .requests-menu-size {
     width: 16vw;
     border-width: 0 !important;
     box-shadow: none !important;
     /* The "Timeline" header is not visible anymore, and thus the
        right border and box-shadow of "Size" column should be hidden. */
   }
 }

The Tor Browser / annotate

browser/themes/shared/devtools/netmonitor.inc.css@6474c204b198 (annotated)

browser/themes/shared/devtools/netmonitor.inc.css