X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fdevtools%2Fnetmonitor.css;fp=LCARStrek%2Fdevtools%2Fnetmonitor.css;h=380a63239db818638df7ba04db35093f4785f76a;hp=0000000000000000000000000000000000000000;hb=dc9d5d64a3f915cb832f43050545b432f33504f7;hpb=ecfc58b0361c617fa298d4b1bb69ea2484d37de2 diff --git a/LCARStrek/devtools/netmonitor.css b/LCARStrek/devtools/netmonitor.css new file mode 100644 index 00000000..380a6323 --- /dev/null +++ b/LCARStrek/devtools/netmonitor.css @@ -0,0 +1,795 @@ +/* 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/. */ + +window { + padding: 0; +} + +/* === BEGIN netmonitor.inc.css === */ + +:root.theme-dark, +:root.theme-light { + --table-splitter-color: #A09090; + --table-zebra-background: rgba(255,159,0,0.1); +} + +#requests-menu-empty-notice { + margin: 0; + padding: 12px; + font-size: 120%; +} + +#notice-perf-message { + margin-top: 2px; +} + +#requests-menu-perf-notice-button { + min-width: 30px; + min-height: 26px; + margin: 0; + list-style-image: url("profiler-stopwatch.svg"); +} + +#requests-menu-perf-notice-button .button-text { + display: none; +} + +#requests-menu-reload-notice-button { + min-height: 26px; + margin: 0; +} + +/* Network requests table */ + +#requests-menu-toolbar { +} + +#requests-menu-toolbar > .toolbar-box > .toolbar-startcap, +#requests-menu-toolbar > .toolbar-box > .toolbar-endcap { + display: none; +} + +.requests-menu-header:first-child { + -moz-padding-start: 4px; + -moz-margin-start: 4px; +} + +.requests-menu-subitem { + padding: 4px; +} + +.requests-menu-header:not(:last-child), +.requests-menu-subitem:not(:last-child) { + -moz-border-end: 1px solid var(--table-splitter-color); +} + +.requests-menu-header:not(:last-child):-moz-locale-dir(rtl), +.requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) { +} + +.requests-menu-header-button, +#requests-menu-status-button { + background-color: transparent; + border-radius: 0; + min-width: 20px; + margin: 0; + font-weight: inherit !important; + transition: background-color 0.1s ease-in-out; +} + +.requests-menu-header-button > .button-box, +#requests-menu-status-button > .button-box { + border-radius: 0; + -moz-padding-start: 0; + -moz-padding-end: 0; + border: 0; +} + +.requests-menu-header-button:hover { + background-color: #FFCF00; +} + +.requests-menu-header-button:hover:active { + background-color: #FF9F00; +} + +.requests-menu-header-button:not(:active)[sorted] { + background-color: #008484; +} + +.requests-menu-header-button:not(:active)[sorted=ascending] { + background-image: radial-gradient(farthest-side at center top, rgba(0,0,0,.7), rgba(0,0,0,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, rgba(0,0,0,.7), rgba(0,0,0,0.3)); + background-size: 100% 1px; + background-repeat: no-repeat; + background-position: bottom; +} + +#requests-menu-status-button { + border: none; +} + +#requests-menu-status-button > .button-box { + padding: 0; +} + +/* Network requests table: specific column dimensions */ + +.requests-menu-status-and-method { + width: 12em; +} + +.requests-menu-status { + width: 10px; + height: 10px; + margin: 0px 2px; +} + +.requests-menu-method { + text-align: center; + font-weight: 600; +} + +.requests-menu-icon-and-file { + width: 20vw; + min-width: 4em; +} + +.requests-menu-icon { + background: #FFCF00; + width: calc(1em + 4px); + height: calc(1em + 4px); + margin: -4px 0px; + -moz-margin-end: 4px; +} + +.requests-menu-icon { + outline: 1px solid var(--table-splitter-color); +} + +.requests-menu-file { + text-align: start; +} + +.requests-menu-security-and-domain { + width: 14vw; + min-width: 10em; +} + +.requests-security-state-icon { + width: 16px; + height: 16px; + -moz-margin-end: 4px; + cursor: pointer; +} + +.security-state-insecure { + list-style-image: url("chrome://browser/skin/identity-mixed-active-loaded.svg"); +} + +.security-state-secure { + list-style-image: url("chrome://browser/skin/identity-secure.svg"); +} + +.security-state-weak { + list-style-image: url("chrome://browser/skin/identity-mixed-passive-loaded.svg"); +} + +.security-state-broken { + list-style-image: url("chrome://browser/skin/controlcenter/warning-gray.svg"); +} + +.security-state-local { + list-style-image: url("chrome://browser/skin/identity-not-secure.svg"); +} + +.requests-menu-type { + text-align: center; + width: 4em; +} + +.requests-menu-size { + text-align: center; + width: 8em; +} + +.requests-menu-transferred { + text-align: center; + width: 8em; +} + +/* Network requests table: status codes */ + +box.requests-menu-status { + background-color: #A09090; + width: 10px; + -moz-margin-start: 5px; + -moz-margin-end: 5px; + border-radius: 20px; + border: 1px solid #000000; + transition: background-color 0.5s ease-in-out; +} + +label.requests-menu-status-code { + -moz-margin-start: 3px !important; + width: 3em; + -moz-margin-end: -3em !important; +} + +box.requests-menu-status:not([code]) { + background-color: var(--theme-highlight-red); + border-radius: 0; /* squares */ +} + +box.requests-menu-status[code="cached"] { + border: 2px solid var(--theme-content-color2); + background-color: transparent; +} + +box.requests-menu-status[code^="1"] { + background-color: var(---theme-highlight-blue); +} + +box.requests-menu-status[code^="2"] { + background-color: var(--theme-highlight-green); +} + +/* 3xx are triangles */ +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 var(--theme-highlight-lightorange); + border-radius: 0; +} + +/* 4xx and 5xx are squares - error codes */ +box.requests-menu-status[code^="4"] { + background-color: var(--theme-highlight-red); + border-radius: 0; /* squares */ +} + +box.requests-menu-status[code^="5"] { + background-color: var(--theme-highlight-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: 1px; + -moz-padding-start: 4px; + -moz-border-start: 1px dotted #000000; + font-size: 90%; + 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; +} + +.requests-menu-timings-division[division-scale=millisecond] { + -moz-border-start-color: var(--theme-body-color) !important; +} + +.requests-menu-timings-division[division-scale=second] { + -moz-border-start-color: var(--theme-body-color) !important; + font-weight: 600; +} + +.requests-menu-timings-division[division-scale=minute] { + -moz-border-start-color: var(--theme-body-color) !important; + font-weight: 600; +} + +/* Network requests table: waterfall items */ + +.requests-menu-subitem.requests-menu-waterfall { + -moz-padding-start: 0px; + -moz-padding-end: 4px; + /* Background created on a in js. */ + /* @see browser/devtools/netmonitor/netmonitor-view.js */ + background-image: -moz-element(#waterfall-background); + background-repeat: repeat-y; + 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: #FF0000; /* red */ +} + +.requests-menu-timings-box.dns { + background-color: #E7ADE7; /* pink */ +} + +.requests-menu-timings-box.connect { + background-color: #FF9F00; /* orange */ +} + +.requests-menu-timings-box.send { + background-color: #FFCF00; /* light blue */ +} + +.requests-menu-timings-box.wait { + background-color: #9C9CFF; /* blue grey */ +} + +.requests-menu-timings-box.receive { + background-color: #A09090; /* green */ +} + +/* SideMenuWidget */ + +#network-table .side-menu-widget-empty-text, +#network-table .side-menu-widget-container { + background-color: var(--theme-body-background); +} + +#network-table .side-menu-widget-item { + border-top-color: transparent; + border-bottom-color: transparent; +} + +.side-menu-widget-item-contents { + padding: 0px; +} + +.side-menu-widget-container { + box-shadow: none !important; +} + +.side-menu-widget-item:not(.selected)[odd] { + background-color: var(--table-zebra-background); +} + +.side-menu-widget-item:not(.selected):hover { + background-color: var(--theme-selection-background-semitransparent); +} + +/* Network request details */ + +#details-pane-toggle { + list-style-image: url("chrome://devtools/skin/debugger-collapse.png"); + -moz-image-region: rect(0px,16px,16px,0px); +} + +#details-pane-toggle > .toolbarbutton-icon { + width: 16px; + height: 16px; +} + +#details-pane-toggle[pane-collapsed] { + list-style-image: url("chrome://devtools/skin/debugger-expand.png"); +} + +#details-pane-toggle:hover, +#details-pane-toggle:hover:active { + -moz-image-region: rect(0px,32px,16px,16px); +} + +@media (min-resolution: 1.1dppx) { + #details-pane-toggle { + list-style-image: url("chrome://devtools/skin/debugger-collapse@2x.png"); + -moz-image-region: rect(0px,32px,32px,0px); + } + + #details-pane-toggle[pane-collapsed] { + list-style-image: url("chrome://devtools/skin/debugger-expand@2x.png"); + } + + #details-pane-toggle:active { + -moz-image-region: rect(0px,64px,32px,32px); + } +} + +/* Network request details tabpanels */ + +.tabpanel-content { + background-color: var(--theme-sidebar-background); +} + +.theme-dark .tabpanel-content { + color: var(--theme-body-color); +} + +#headers-tabpanel { + background-color: var(--theme-toolbar-background); +} + +/* Summary tabpanel */ + +.tabpanel-summary-container { + padding: 1px; +} + +.tabpanel-summary-label { + -moz-padding-start: 4px; + -moz-padding-end: 3px; + font-weight: 600; +} + +.tabpanel-summary-value { + color: inherit; + -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: 0 6px; +/* min-height: 20px;*/ +} + +#toggle-raw-headers { + margin-top: -10px; + -moz-margin-end: 6px; +} + +.raw-response-textarea { + height: 50vh; +} + +/* Response tabpanel */ + +#response-content-info-header { + margin: 0; + padding: 3px 8px; + background-color: var(--theme-highlight-red); + color: var(--theme-selection-color); +} + +#response-content-image-box { + padding-top: 10px; + padding-bottom: 10px; +} + +#response-content-image { + background: #FFFFFF; + border: 1px dashed #A09090; + 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; + min-width: 1px; + border: none; +} + +#timings-tabpanel .requests-menu-timings-total { + transition: transform 0.2s ease-out; +} + +/* Security tabpanel */ + +.security-info-section { + -moz-padding-start: 1em; +} + +#security-tabpanel { + overflow: auto; +} + +.security-warning-icon { + background-image: url("images/alerticon-warning.png"); + background-size: 13px 12px; + -moz-margin-start: 5px; + vertical-align: top; + width: 13px; + height: 12px; +} + +@media (min-resolution: 1.1dppx) { + .security-warning-icon { + background-image: url("images/alerticon-warning@2x.png"); + } +} + +/* 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 */ + +#requests-menu-footer { + padding-top: 3px; + background-color: var(--theme-toolbar-background); + border-top: 1px solid var(--table-splitter-color); +} + +.requests-menu-footer-button, +.requests-menu-footer-label { + min-width: 1em; + margin: 0; + -moz-margin-end: 3px; + border: none; + padding: 0px 1vw; +/* color: var(--theme-body-color);*/ +} + +.requests-menu-footer-spacer { + min-width: 2px; +} + +.requests-menu-footer-spacer, +.requests-menu-footer-button { +} + +.requests-menu-footer-button { +} + +.requests-menu-footer-button:hover:active { +} + +.requests-menu-footer-button:not(:active)[checked] { +} + +.requests-menu-footer-label { + font-weight: 600; +} + +#requests-menu-filter-freetext-text { + transition-property: max-width, -moz-padding-end, -moz-padding-start; + transition-duration: 250ms; + transition-timing-function: ease; +} + +#requests-menu-filter-freetext-text:not([focused]):not([filled]) > .textbox-input-box { + overflow: hidden; +} + +#requests-menu-filter-freetext-text:not([focused]):not([filled]) { + max-width: 20px !important; + -moz-padding-end: 5px; + -moz-padding-start: 22px; + background-position: 8px center, top left, top left; +} + +#requests-menu-filter-freetext-text[focused], +#requests-menu-filter-freetext-text[filled] { + max-width: 200px !important; +} + +/* Performance analysis buttons */ + +#requests-menu-network-summary-button { + list-style-image: url("profiler-stopwatch.svg"); + -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 { + /* Make the toolbar invisible, it only hold the back button */ + -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar"); + background-color: #000000; +} + +#network-statistics-back-button { + min-width: 4em; + min-height: 100vh; +} + +#network-statistics-view-splitter { + cursor: default; + pointer-events: none; +} + +#network-statistics-charts { + min-height: 1px; + background-color: var(--theme-sidebar-background); +} + +#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; +} + +.chart-colored-blob[name=html] { + fill: var(--theme-highlight-bluegrey); + background: var(--theme-highlight-bluegrey); +} + +.chart-colored-blob[name=css] { + fill: var(--theme-highlight-blue); + background: var(--theme-highlight-blue); +} + +.chart-colored-blob[name=js] { + fill: var(--theme-highlight-lightorange); + background: var(--theme-highlight-lightorange); +} + +.chart-colored-blob[name=xhr] { + fill: var(--theme-highlight-orange); + background: var(--theme-highlight-orange); +} + +.chart-colored-blob[name=fonts] { + fill: var(--theme-highlight-darkpurple); + background: var(--theme-highlight-darkpurple); +} + +.chart-colored-blob[name=images] { + fill: var(--theme-highlight-pink); + background: var(--theme-highlight-pink); +} + +.chart-colored-blob[name=media] { + fill: var(--theme-highlight-green); + background: var(--theme-highlight-green); +} + +.chart-colored-blob[name=flash] { + fill: var(--theme-highlight-red); + background: var(--theme-highlight-red); +} + +.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: 24px; + } + + .requests-menu-header-button { + min-height: 24px; + } + + #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, + .requests-menu-security-and-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. */ + } +} + +/* === END netmonitor.inc.css === */