X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fdevtools%2Fnetmonitor.css;h=6c0e81c581fd7d6e2413048d6cd563620fcb5783;hp=b52494ba3fad15769bb245792594690e37a363ec;hb=1437a48cc96cb2df0e583660e83049b5bffa7b8f;hpb=649b5d38865cb338a3419ffda9ff41382c2c9523 diff --git a/LCARStrek/browser/devtools/netmonitor.css b/LCARStrek/browser/devtools/netmonitor.css index b52494ba..6c0e81c5 100644 --- a/LCARStrek/browser/devtools/netmonitor.css +++ b/LCARStrek/browser/devtools/netmonitor.css @@ -9,26 +9,38 @@ window { /* === BEGIN netmonitor.inc.css === */ +:root.theme-dark, +:root.theme-light { + --table-splitter-color: #9C9CFF; + --table-zebra-background: rgba(255,159,0,0.1); +} + #requests-menu-empty-notice { margin: 0; padding: 12px; font-size: 120%; +} - color: #FF9F00; +#notice-perf-message { + margin-top: 2px; } #requests-menu-perf-notice-button { min-width: 30px; - min-height: 28px; + min-height: 26px; margin: 0; - list-style-image: url("profiler-stopwatch.png"); - -moz-image-region: rect(0px,32px,16px,16px); + 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 { @@ -50,7 +62,7 @@ window { .requests-menu-header:not(:last-child), .requests-menu-subitem:not(:last-child) { - -moz-border-end: 1px solid #9C9CFF; + -moz-border-end: 1px solid var(--table-splitter-color); } .requests-menu-header:not(:last-child):-moz-locale-dir(rtl), @@ -139,18 +151,43 @@ window { } .requests-menu-icon { - outline: 1px solid #A09090; + outline: 1px solid var(--table-splitter-color); } .requests-menu-file { text-align: start; } -.requests-menu-domain { +.requests-menu-security-and-domain { width: 14vw; min-width: 10em; } +.requests-security-state-icon { + width: 16px; + height: 16px; + -moz-margin-end: 4px; +} + +.security-state-insecure { + list-style-image: url("chrome://browser/skin/identity-not-secure.svg"); +} + +.security-state-secure { + cursor: pointer; + list-style-image: url("chrome://browser/skin/identity-secure.svg"); +} + +.security-state-weak { + cursor: pointer; + list-style-image: url("chrome://browser/skin/identity-mixed-passive-loaded.svg"); +} + +.security-state-broken { + cursor: pointer; + list-style-image: url("chrome://browser/skin/identity-mixed-active-loaded.svg"); +} + .requests-menu-type { text-align: center; width: 4em; @@ -161,6 +198,11 @@ window { width: 8em; } +.requests-menu-transferred { + text-align: center; + width: 8em; +} + /* Network requests table: status codes */ box.requests-menu-status { @@ -180,15 +222,20 @@ label.requests-menu-status-code { } box.requests-menu-status:not([code]) { - background-color: #A09090; /* dark grey */ + background-color: var(--theme-content-color2); +} + +box.requests-menu-status[code="cached"] { + border: 2px solid var(--theme-content-color2); + background-color: transparent; } box.requests-menu-status[code^="1"] { - background-color: #9C9CFF; /* light blue */ + background-color: var(---theme-highlight-blue); } box.requests-menu-status[code^="2"] { - background-color: #008484; /* green */ + background-color: var(--theme-highlight-green); } /* 3xx are triangles */ @@ -198,18 +245,18 @@ box.requests-menu-status[code^="3"] { height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; - border-bottom: 10px solid #FF9F00; /* light orange */ + 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: #FF0000; /* red */ + background-color: var(--theme-highlight-red); border-radius: 0; /* squares */ } box.requests-menu-status[code^="5"] { - background-color: #6000CF; /* pink? */ + background-color: var(--theme-highlight-pink); border-radius: 0; transform: rotate(45deg); } @@ -244,16 +291,16 @@ box.requests-menu-status[code^="5"] { } .requests-menu-timings-division[division-scale=millisecond] { - -moz-border-start-color: #FF9F00 !important; /* Light foreground text */ + -moz-border-start-color: var(--theme-body-color) !important; } .requests-menu-timings-division[division-scale=second] { - -moz-border-start-color: #FF9F00 !important; /* Light foreground text */ + -moz-border-start-color: var(--theme-body-color) !important; font-weight: 600; } .requests-menu-timings-division[division-scale=minute] { - -moz-border-start-color: #FF9F00 !important; /* Light foreground text */ + -moz-border-start-color: var(--theme-body-color) !important; font-weight: 600; } @@ -262,7 +309,10 @@ box.requests-menu-status[code^="5"] { .requests-menu-subitem.requests-menu-waterfall { -moz-padding-start: 0px; -moz-padding-end: 4px; - background-repeat: repeat-y; /* Background created on a in js. */ + /* 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; } @@ -322,6 +372,16 @@ box.requests-menu-status[code^="5"] { /* 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; } @@ -331,7 +391,11 @@ box.requests-menu-status[code^="5"] { } .side-menu-widget-item:not(.selected)[odd] { - background: rgba(255,159,0,0.1); + background-color: var(--table-zebra-background); +} + +.side-menu-widget-item:not(.selected):hover { + background-color: var(--theme-selection-background-semitransparent); } /* Network request details */ @@ -341,6 +405,11 @@ box.requests-menu-status[code^="5"] { -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://browser/skin/devtools/debugger-expand.png"); } @@ -350,11 +419,33 @@ box.requests-menu-status[code^="5"] { -moz-image-region: rect(0px,32px,16px,16px); } +@media (min-resolution: 1.25dppx) { + #details-pane-toggle { + list-style-image: url("chrome://browser/skin/devtools/debugger-collapse@2x.png"); + -moz-image-region: rect(0px,32px,32px,0px); + } + + #details-pane-toggle[pane-collapsed] { + list-style-image: url("chrome://browser/skin/devtools/debugger-expand@2x.png"); + } + + #details-pane-toggle:active { + -moz-image-region: rect(0px,64px,32px,32px); + } +} + /* Network request details tabpanels */ .tabpanel-content { - background-color: #000000; - color: #FF9F00; + 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 */ @@ -370,6 +461,7 @@ box.requests-menu-status[code^="5"] { } .tabpanel-summary-value { + color: inherit; -moz-padding-start: 3px; } @@ -389,14 +481,22 @@ box.requests-menu-status[code^="5"] { /* 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: #FF0000; /* Red highlight */ - color: #000000; /* Light foreground text */ + background-color: var(--theme-highlight-red); + color: var(--theme-selection-color); } #response-content-image-box { @@ -437,6 +537,31 @@ box.requests-menu-status[code^="5"] { 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("alerticon-warning.png"); + background-size: 13px 12px; + -moz-margin-start: 5px; + vertical-align: top; + width: 13px; + height: 12px; +} + +@media (min-resolution: 1.25dppx) { + .security-warning-icon { + background-image: url("alerticon-warning@2x.png"); + } +} + /* Custom request form */ #custom-pane { @@ -458,8 +583,9 @@ box.requests-menu-status[code^="5"] { /* Footer */ #requests-menu-footer { - border-top: 1px solid #9C9CFF; padding-top: 3px; + background-color: var(--theme-toolbar-background); + border-top: 1px solid var(--table-splitter-color); } .requests-menu-footer-button, @@ -469,8 +595,7 @@ box.requests-menu-status[code^="5"] { -moz-margin-end: 3px; border: none; padding: 0px 1vw; - -/* color: #fff;*/ +/* color: var(--theme-body-color);*/ } .requests-menu-footer-spacer { @@ -484,9 +609,6 @@ box.requests-menu-status[code^="5"] { .requests-menu-footer-button { } -.requests-menu-footer-button:hover { -} - .requests-menu-footer-button:hover:active { } @@ -497,11 +619,32 @@ box.requests-menu-status[code^="5"] { 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.png"); - -moz-image-region: rect(0px,32px,16px,16px); + list-style-image: url("profiler-stopwatch.svg"); -moz-padding-end: 0; cursor: pointer; } @@ -535,8 +678,7 @@ box.requests-menu-status[code^="5"] { #network-statistics-charts { min-height: 1px; - - background: #000000; /* Toolbars */ + background-color: var(--theme-sidebar-background); } #network-statistics-charts .pie-chart-container { @@ -550,43 +692,43 @@ box.requests-menu-status[code^="5"] { } .chart-colored-blob[name=html] { - fill: #A09090; /* Blue-Grey highlight */ - background: #A09090; + fill: var(--theme-highlight-bluegrey); + background: var(--theme-highlight-bluegrey); } .chart-colored-blob[name=css] { - fill: #9C9CFF; /* Blue highlight */ - background: #9C9CFF; + fill: var(--theme-highlight-blue); + background: var(--theme-highlight-blue); } .chart-colored-blob[name=js] { - fill: #FFCF00; /* Light Orange highlight */ - background: #FFCF00; + fill: var(--theme-highlight-lightorange); + background: var(--theme-highlight-lightorange); } .chart-colored-blob[name=xhr] { - fill: #FF9F00; /* Orange highlight */ - background: #FF9F00; + fill: var(--theme-highlight-orange); + background: var(--theme-highlight-orange); } .chart-colored-blob[name=fonts] { - fill: #6000CF; /* Purple highlight */ - background: #6000CF; + fill: var(--theme-highlight-darkpurple); + background: var(--theme-highlight-darkpurple); } .chart-colored-blob[name=images] { - fill: #E7ADE7; /* Pink highlight */ - background: #E7ADE7; + fill: var(--theme-highlight-pink); + background: var(--theme-highlight-pink); } .chart-colored-blob[name=media] { - fill: #008484; /* Green highlight */ - background: #008484; + fill: var(--theme-highlight-green); + background: var(--theme-highlight-green); } .chart-colored-blob[name=flash] { - fill: #FF0000; /* Red highlight */ - background: #FF0000; + fill: var(--theme-highlight-red); + background: var(--theme-highlight-red); } .table-chart-row-label[name=cached] { @@ -630,7 +772,7 @@ box.requests-menu-status[code^="5"] { } .requests-menu-icon-and-file, - .requests-menu-domain { + .requests-menu-security-and-domain { width: 30vw; }