X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fdevtools%2Fnetmonitor.css;h=8daf3d4c0da4c2ab37898013456f38f5420dabc4;hp=380a63239db818638df7ba04db35093f4785f76a;hb=1ad21b1f6b999bccea1c6d768ebbd4bc900479d0;hpb=dc9d5d64a3f915cb832f43050545b432f33504f7 diff --git a/LCARStrek/devtools/netmonitor.css b/LCARStrek/devtools/netmonitor.css index 380a6323..8daf3d4c 100644 --- a/LCARStrek/devtools/netmonitor.css +++ b/LCARStrek/devtools/netmonitor.css @@ -7,12 +7,20 @@ 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); + + --timing-blocked-color: #FF0000; + --timing-dns-color: #E7ADE7; /* pink */ + --timing-connect-color: #FF9F00; /* orange */ + --timing-send-color: #FFCF00; /* light blue */ + --timing-wait-color: #9C9CFF; /* blue grey */ + --timing-receive-color: #A09090; /* green */ + + --sort-ascending-image: url(chrome://devtools/skin/images/sort-arrows.svg#ascending); + --sort-descending-image: url(chrome://devtools/skin/images/sort-arrows.svg#descending); } #requests-menu-empty-notice { @@ -29,7 +37,14 @@ window { min-width: 30px; min-height: 26px; margin: 0; - list-style-image: url("profiler-stopwatch.svg"); + list-style-image: url("images/profiler-stopwatch.svg"); +} + +/* Make sure the icon is visible on Linux (to overwrite a rule + in xul.css that hides the icon if there is no label. + See also bug 1278050. */ +#requests-menu-perf-notice-button .button-icon { + display: block; } #requests-menu-perf-notice-button .button-text { @@ -51,65 +66,83 @@ window { 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); + padding: 3px; } .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 { +#requests-menu-status-button, +.requests-menu-header-button { background-color: transparent; + border-image: linear-gradient(transparent 15%, + var(--theme-toolbar-background) 15%, + var(--theme-toolbar-background) 85%, + transparent 85%) 1 1; + border-style: solid; + border-width: 0; + border-inline-start-width: 1px; border-radius: 0; - min-width: 20px; + min-width: 1px; + min-height: 24px; margin: 0; + padding-bottom: 2px; + padding-inline-start: 13px; + padding-top: 2px; + text-align: center; +/* color: inherit;*/ 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:first-child .requests-menu-header-button { + border-width: 0; } .requests-menu-header-button:hover { - background-color: #FFCF00; + background-color: var(--theme-hover-background); + color: var(--theme-hover-color); } .requests-menu-header-button:hover:active { - background-color: #FF9F00; + background-color: var(--theme-active-background); + color: var(--theme-active-color); +} + +.requests-menu-header-button > .button-box > .button-icon, +#requests-menu-waterfall-image { + display: -moz-box; + height: 4px; + margin-inline-end: 6px; + -moz-box-ordinal-group: 2; + width: 7px; } -.requests-menu-header-button:not(:active)[sorted] { - background-color: #008484; +.requests-menu-header-button[sorted=ascending] > .button-box > .button-icon, +.requests-menu-header-button[sorted=ascending] #requests-menu-waterfall-image { + list-style-image: var(--sort-ascending-image); } -.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[sorted=descending] > .button-box > .button-icon, +.requests-menu-header-button[sorted=descending] #requests-menu-waterfall-image { + list-style-image: var(--sort-descending-image); } -.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-header-button > .button-box > .button-text, +#requests-menu-waterfall-label-wrapper { + -moz-box-flex: 1; +} + +.requests-menu-header-button[sorted], +.requests-menu-header-button[sorted]:hover { + background-color: var(--theme-selection-background); + color: var(--theme-selection-color); +} + +.requests-menu-header-button[sorted], +.requests-menu-header[active] + .requests-menu-header .requests-menu-header-button { + border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1; } #requests-menu-status-button { @@ -122,24 +155,21 @@ window { /* Network requests table: specific column dimensions */ -.requests-menu-status-and-method { - width: 12em; -} - .requests-menu-status { - width: 10px; - height: 10px; - margin: 0px 2px; + max-width: 6em; + text-align: center; + width: 10vw; } -.requests-menu-method { +.requests-menu-method, +.requests-menu-method-box { + max-width: 7em; text-align: center; - font-weight: 600; + width: 10vw; } .requests-menu-icon-and-file { - width: 20vw; - min-width: 4em; + width: 22vw; } .requests-menu-icon { @@ -147,102 +177,112 @@ window { width: calc(1em + 4px); height: calc(1em + 4px); margin: -4px 0px; - -moz-margin-end: 4px; + margin-inline-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; + margin-inline-end: 4px; } .security-state-insecure { - list-style-image: url("chrome://browser/skin/identity-mixed-active-loaded.svg"); + list-style-image: url("chrome://devtools/skin/images/security-state-insecure.svg"); } .security-state-secure { - list-style-image: url("chrome://browser/skin/identity-secure.svg"); + list-style-image: url("chrome://devtools/skin/images/security-state-secure.svg"); } .security-state-weak { - list-style-image: url("chrome://browser/skin/identity-mixed-passive-loaded.svg"); + list-style-image: url("chrome://devtools/skin/images/security-state-weak.svg"); } .security-state-broken { - list-style-image: url("chrome://browser/skin/controlcenter/warning-gray.svg"); + list-style-image: url("chrome://devtools/skin/images/security-state-broken.svg"); } .security-state-local { - list-style-image: url("chrome://browser/skin/identity-not-secure.svg"); + list-style-image: url("chrome://devtools/skin/images/security-state-local.svg"); } -.requests-menu-type { +.requests-menu-type, +.requests-menu-size { + max-width: 6em; text-align: center; - width: 4em; + width: 8vw; } -.requests-menu-size { - text-align: center; - width: 8em; +.requests-menu-cause { + max-width: 8em; + width: 8vw; +} + +.requests-menu-cause-stack { + background-color: var(--theme-body-color-alt); + color: var(--theme-body-background); + font-size: 8px; + font-weight: bold; + line-height: 10px; + border-radius: 3px; + padding: 0 2px; + margin: 0; + margin-inline-end: 3px; + -moz-user-select: none; } .requests-menu-transferred { + max-width: 8em; text-align: center; - width: 8em; + width: 8vw; } /* Network requests table: status codes */ -box.requests-menu-status { +.requests-menu-status-code { + margin-inline-start: 3px !important; + width: 3em; + margin-inline-end: -3em !important; +} + +.requests-menu-status-icon { background-color: #A09090; + height: 10px; width: 10px; - -moz-margin-start: 5px; - -moz-margin-end: 5px; + margin-inline-start: 5px; + margin-inline-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; +.requests-menu-status-icon:not([code]) { + background-color: var(--theme-content-color2); } -box.requests-menu-status:not([code]) { - background-color: var(--theme-highlight-red); - border-radius: 0; /* squares */ -} - -box.requests-menu-status[code="cached"] { +.requests-menu-status-icon[code="cached"] { border: 2px solid var(--theme-content-color2); - background-color: transparent; + background-color: transparent; } -box.requests-menu-status[code^="1"] { - background-color: var(---theme-highlight-blue); +.requests-menu-status-icon[code^="1"] { + background-color: var(--theme-highlight-blue); } -box.requests-menu-status[code^="2"] { +.requests-menu-status-icon[code^="2"] { background-color: var(--theme-highlight-green); } /* 3xx are triangles */ -box.requests-menu-status[code^="3"] { +.requests-menu-status-icon[code^="3"] { background-color: transparent; width: 0; height: 0; @@ -253,12 +293,12 @@ box.requests-menu-status[code^="3"] { } /* 4xx and 5xx are squares - error codes */ -box.requests-menu-status[code^="4"] { +.requests-menu-status-icon[code^="4"] { background-color: var(--theme-highlight-red); border-radius: 0; /* squares */ } -box.requests-menu-status[code^="5"] { +.requests-menu-status-icon[code^="5"] { background-color: var(--theme-highlight-pink); border-radius: 0; transform: rotate(45deg); @@ -266,23 +306,31 @@ box.requests-menu-status[code^="5"] { /* Network requests table: waterfall header */ -#requests-menu-waterfall-label { - -moz-padding-start: 8px; - -moz-padding-end: 8px; +.requests-menu-waterfall { + padding-inline-start: 0; +} + +#requests-menu-waterfall-label:not(.requests-menu-waterfall-visible) { + padding-inline-start: 13px; } .requests-menu-timings-division { width: 100px; - padding-top: 1px; - -moz-padding-start: 4px; - -moz-border-start: 1px dotted #000000; - font-size: 90%; + padding-top: 2px; + padding-inline-start: 4px; + font-size: 75%; pointer-events: none; + box-sizing: border-box; + text-align: start; +} + +.requests-menu-timings-division:first-child { + width: 98px; /* Substract 2px for borders */ } .requests-menu-timings-division:not(:first-child) { - -moz-border-start: 1px dotted; - -moz-margin-start: -100px !important; /* Don't affect layout. */ + border-inline-start: 1px dashed; + margin-inline-start: -100px !important; /* Don't affect layout. */ } .requests-menu-timings-division:-moz-locale-dir(ltr) { @@ -293,27 +341,22 @@ box.requests-menu-status[code^="5"] { 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 { + border-inline-start-color: var(--theme-body-color) !important; } +.requests-menu-timings-division[division-scale=second], .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; + padding-inline-start: 0px; + padding-inline-end: 4px; /* Background created on a in js. */ - /* @see browser/devtools/netmonitor/netmonitor-view.js */ + /* @see devtools/client/netmonitor/netmonitor-view.js */ background-image: -moz-element(#waterfall-background); background-repeat: repeat-y; background-position: -1px center; @@ -340,7 +383,7 @@ box.requests-menu-status[code^="5"] { } .requests-menu-timings-total { - -moz-padding-start: 4px; + padding-inline-start: 4px; font-size: 85%; font-weight: 600; } @@ -350,27 +393,27 @@ box.requests-menu-status[code^="5"] { } .requests-menu-timings-box.blocked { - background-color: #FF0000; /* red */ + background-color: var(--timing-blocked-color); } .requests-menu-timings-box.dns { - background-color: #E7ADE7; /* pink */ + background-color: var(--timing-dns-color); } .requests-menu-timings-box.connect { - background-color: #FF9F00; /* orange */ + background-color: var(--timing-connect-color); } .requests-menu-timings-box.send { - background-color: #FFCF00; /* light blue */ + background-color: var(--timing-send-color); } .requests-menu-timings-box.wait { - background-color: #9C9CFF; /* blue grey */ + background-color: var(--timing-wait-color); } .requests-menu-timings-box.receive { - background-color: #A09090; /* green */ + background-color: var(--timing-receive-color); } /* SideMenuWidget */ @@ -404,37 +447,11 @@ box.requests-menu-status[code^="5"] { /* 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"); + list-style-image: var(--theme-pane-collapse-image); } -#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); - } +#details-pane-toggle.pane-collapsed { + list-style-image: var(--theme-pane-expand-image); } /* Network request details tabpanels */ @@ -458,14 +475,14 @@ box.requests-menu-status[code^="5"] { } .tabpanel-summary-label { - -moz-padding-start: 4px; - -moz-padding-end: 3px; + padding-inline-start: 4px; + padding-inline-end: 3px; font-weight: 600; } .tabpanel-summary-value { color: inherit; - -moz-padding-start: 3px; + padding-inline-start: 3px; } /* Headers tabpanel */ @@ -480,13 +497,13 @@ box.requests-menu-status[code^="5"] { } #headers-summary-resend { - margin: 0 6px; -/* min-height: 20px;*/ + margin-top: -10px; + margin-inline-end: 6px; } #toggle-raw-headers { margin-top: -10px; - -moz-margin-end: 6px; + margin-inline-end: 6px; } .raw-response-textarea { @@ -532,8 +549,8 @@ box.requests-menu-status[code^="5"] { #timings-tabpanel .requests-menu-timings-box { transition: transform 0.2s ease-out; - min-width: 1px; border: none; + min-width: 1px; } #timings-tabpanel .requests-menu-timings-total { @@ -543,7 +560,7 @@ box.requests-menu-status[code^="5"] { /* Security tabpanel */ .security-info-section { - -moz-padding-start: 1em; + padding-inline-start: 1em; } #security-tabpanel { @@ -553,7 +570,7 @@ box.requests-menu-status[code^="5"] { .security-warning-icon { background-image: url("images/alerticon-warning.png"); background-size: 13px 12px; - -moz-margin-start: 5px; + margin-inline-start: 5px; vertical-align: top; width: 13px; height: 12px; @@ -583,82 +600,36 @@ box.requests-menu-status[code^="5"] { 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; +/* Main toolbar */ +.requests-menu-filter-button { +/* -moz-appearance: none; + background: rgba(128,128,128,0.1); border: none; - padding: 0px 1vw; -/* color: var(--theme-body-color);*/ -} - -.requests-menu-footer-spacer { - min-width: 2px; + border-radius: 2px; + min-width: 0; + padding: 0 5px; + margin: 2px; + color: var(--theme-body-color);*/ + margin-top: 0; + margin-bottom: 0; } -.requests-menu-footer-spacer, -.requests-menu-footer-button { +.requests-menu-filter-button:hover { +/* background: rgba(128,128,128,0.2);*/ } -.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; +.requests-menu-filter-button:hover:active { +/* background-color: var(--theme-selection-background-semitransparent);*/ } /* 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; + box-shadow: none; + border-color: transparent; + list-style-image: url("images/profiler-stopwatch-tbutton.svg"); cursor: pointer; -} - -#requests-menu-network-summary-label:hover { - text-decoration: underline; + min-width: 0; } /* Performance analysis view */ @@ -667,31 +638,44 @@ box.requests-menu-status[code^="5"] { /* Make the toolbar invisible, it only hold the back button */ -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar"); background-color: #000000; + 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; + border-inline-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; +} + +#network-statistics-charts { background-color: var(--theme-sidebar-background); } #network-statistics-charts .pie-chart-container { - -moz-margin-start: 3vw; - -moz-margin-end: 1vw; + margin-inline-start: 3vw; + margin-inline-end: 1vw; } #network-statistics-charts .table-chart-container { - -moz-margin-start: 1vw; - -moz-margin-end: 3vw; + margin-inline-start: 1vw; + margin-inline-end: 3vw; } .chart-colored-blob[name=html] { @@ -758,11 +742,12 @@ box.requests-menu-status[code^="5"] { /* Responsive sidebar */ @media (max-width: 700px) { #requests-menu-toolbar { - height: 24px; + height: 22px; } .requests-menu-header-button { - min-height: 24px; + min-height: 22px; + padding-left: 8px; } #details-pane { @@ -770,26 +755,60 @@ box.requests-menu-status[code^="5"] { /* To prevent all the margin hacks to hide the sidebar. */ } - .requests-menu-status-and-method { - width: 16vw; + .requests-menu-status { + max-width: none; + width: 12vw; + } + + .requests-menu-status-code { + width: auto; + } + + .requests-menu-method, + .requests-menu-method-box { + max-width: none; + width: 14vw; + } + + .requests-menu-icon-and-file { + width: 22vw; } - .requests-menu-icon-and-file, .requests-menu-security-and-domain { - width: 30vw; + width: 18vw; } .requests-menu-type { - width: 8vw; + width: 10vw; } + .requests-menu-transferred, .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. */ + width: 12vw; } } -/* === END netmonitor.inc.css === */ +/* Platform overrides (copied in from the old platform specific files) */ +:root[platform="win"] .requests-menu-header-button > .button-box { + padding: 0; +} + +:root[platform="win"] .requests-menu-timings-division { + padding-top: 1px; + font-size: 90%; +} + +:root[platform="linux"] #headers-summary-resend { + padding: 4px; +} + +:root[platform="linux"] #toggle-raw-headers { + padding: 4px; +} + +/* Responsive sidebar */ +@media (max-width: 700px) { + :root[platform="linux"] .requests-menu-header-button { + font-size: 85%; + } +}