X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fdevtools%2Fnetmonitor.css;h=b03f930db83affabd445bc9a2843e71c7d537fc7;hp=9a8bbf133429773ba4e257e3ac43e08ab9eceaa6;hb=refs%2Ftags%2FLCARStrek-2.26;hpb=c4460289dd1725d56322647e95f117e93f1e8941 diff --git a/LCARStrek/browser/devtools/netmonitor.css b/LCARStrek/browser/devtools/netmonitor.css index 9a8bbf13..b03f930d 100644 --- a/LCARStrek/browser/devtools/netmonitor.css +++ b/LCARStrek/browser/devtools/netmonitor.css @@ -7,20 +7,30 @@ window { padding: 0; } -/* Network requests table */ +/* === BEGIN netmonitor.inc.css === */ -#body { - background-color: #000000; +#requests-menu-empty-notice { + margin: 0; + padding: 12px; + font-size: 120%; + + color: #FF9F00; } -.requests-menu-empty-notice { - background-color: #A09090; - border-radius: 8px; - padding: 12px; - font-size: 110%; - color: #000000; +#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,32px,16px,16px); } +#requests-menu-perf-notice-button .button-text { + display: none; +} + +/* Network requests table */ + #requests-menu-toolbar { } @@ -29,10 +39,6 @@ window { display: none; } -.requests-menu-header { - text-align: center; -} - .requests-menu-header:first-child { -moz-padding-start: 4px; -moz-margin-start: 4px; @@ -47,18 +53,26 @@ window { -moz-border-end: 1px solid #9C9CFF; } +.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: 10px; + 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 { @@ -131,31 +145,55 @@ window { /* Network requests table: status codes */ -.requests-menu-status { +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; } -.requests-menu-status[code^="1"] { - background-color: #9C9CFF; +label.requests-menu-status-code { + -moz-margin-start: 3px !important; + width: 3em; + -moz-margin-end: -3em !important; } -.requests-menu-status[code^="2"] { - background-color: #008484; +box.requests-menu-status:not([code]) { + background-color: #A09090; /* dark grey */ } -.requests-menu-status[code^="3"] { - background-color: #FF9F00; +box.requests-menu-status[code^="1"] { + background-color: #9C9CFF; /* light blue */ +} + +box.requests-menu-status[code^="2"] { + background-color: #008484; /* green */ } -.requests-menu-status[code^="4"] { - background-color: #FF0000; +/* 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 #FF9F00; /* light orange */ + border-radius: 0; } -.requests-menu-status[code^="5"] { - background-color: #6000CF; +/* 4xx and 5xx are squares - error codes */ +box.requests-menu-status[code^="4"] { + background-color: #FF0000; /* red */ + border-radius: 0; /* squares */ +} + +box.requests-menu-status[code^="5"] { + background-color: #6000CF; /* pink? */ + border-radius: 0; + transform: rotate(45deg); } /* Network requests table: waterfall header */ @@ -175,6 +213,7 @@ window { } .requests-menu-timings-division:not(:first-child) { + -moz-border-start: 1px dotted; -moz-margin-start: -100px !important; /* Don't affect layout. */ } @@ -186,12 +225,27 @@ window { transform-origin: right center; } +.requests-menu-timings-division[division-scale=millisecond] { + -moz-border-start-color: #FF9F00 !important; /* Light foreground text */ +} + +.requests-menu-timings-division[division-scale=second] { + -moz-border-start-color: #E7ADE7 !important; /* Light orange highlight color */ + font-weight: 600; +} + +.requests-menu-timings-division[division-scale=minute] { + -moz-border-start-color: #FF0000 !important; /* Red highlight color */ + font-weight: 600; +} + /* Network requests table: waterfall items */ .requests-menu-subitem.requests-menu-waterfall { - -moz-padding-start: 4px; + -moz-padding-start: 0px; -moz-padding-end: 4px; background-repeat: repeat-y; /* Background created on a in js. */ + background-position: -1px center; margin-top: -1px; /* Compensate borders. */ margin-bottom: -1px; } @@ -217,94 +271,56 @@ window { } .requests-menu-timings-total { - -moz-padding-start: 8px; + -moz-padding-start: 4px; font-size: 85%; font-weight: 600; } -.requests-menu-timings-cap { - width: 4px; - height: 10px; - border: 1px solid #FFCF00; -} - -.requests-menu-timings-cap.start { - -moz-border-end: none; -} - -.requests-menu-timings-cap.end { - -moz-border-start: none; -} - -.requests-menu-timings-cap.start:-moz-locale-dir(ltr) { - border-radius: 4px 0 0 4px; - transform-origin: right center; -} - -.requests-menu-timings-cap.start:-moz-locale-dir(rtl) { - -moz-border-start: none; - border-radius: 0 4px 4px 0; - transform-origin: left center; +.requests-menu-timings-box { + height: 9px; } -.requests-menu-timings-cap.end:-moz-locale-dir(ltr) { - border-radius: 0 4px 4px 0; - transform-origin: left center; +.requests-menu-timings-box.blocked { + background-color: #FF0000; /* red */ } -.requests-menu-timings-cap.end:-moz-locale-dir(rtl) { - border-radius: 4px 0 0 4px; - transform-origin: right center; +.requests-menu-timings-box.dns { + background-color: #E7ADE7; /* pink */ } -.requests-menu-timings-box { - height: 10px; - border-top: 1px solid #FFCF00; - border-bottom: 1px solid #FFCF00; +.requests-menu-timings-box.connect { + background-color: #FF9F00; /* orange */ } -.requests-menu-timings-box.blocked, -.requests-menu-timings-cap.blocked { - background-color: #FF0000; +.requests-menu-timings-box.send { + background-color: #FFCF00; /* light blue */ } -.requests-menu-timings-box.dns, -.requests-menu-timings-cap.dns { - background-color: #6000CF; +.requests-menu-timings-box.wait { + background-color: #9C9CFF; /* blue grey */ } -.requests-menu-timings-box.connect, -.requests-menu-timings-cap.connect { - background-color: #FF9F00; +.requests-menu-timings-box.receive { + background-color: #A09090; /* green */ } -.requests-menu-timings-box.send, -.requests-menu-timings-cap.send { - background-color: #FFCF00; -} +/* SideMenuWidget */ -.requests-menu-timings-box.wait, -.requests-menu-timings-cap.wait { - background-color: #9C9CFF; +.side-menu-widget-item-contents { + padding: 0px; } -.requests-menu-timings-box.receive, -.requests-menu-timings-cap.receive { - background-color: #A09090; +.side-menu-widget-container { + box-shadow: none !important; } -.side-menu-widget-item:nth-child(even) { +.side-menu-widget-item:not(.selected)[odd] { background: rgba(255,159,0,0.1); } -.side-menu-widget-item-contents { - padding: 0px 4px; -} - /* Network request details */ #details-pane { - background-color: #000000; max-width: 500px; } @@ -329,6 +345,8 @@ window { color: #FF9F00; } +/* Summary tabpanel */ + .tabpanel-summary-container { padding: 1px; } @@ -337,12 +355,10 @@ window { -moz-padding-start: 4px; -moz-padding-end: 3px; font-weight: 600; - color: #9C9CFF; } .tabpanel-summary-value { -moz-padding-start: 3px; - font-family: "Liberation Mono", Consolas, "Courier New", monospace; } /* Headers tabpanel */ @@ -356,8 +372,21 @@ window { padding-top: 2px; } +#headers-summary-resend { + margin: 0 6px; +/* min-height: 20px;*/ +} + /* Response tabpanel */ +#response-content-info-header { + margin: 0; + padding: 3px 8px; + + background-color: #FF0000; /* Red highlight */ + color: #000000; /* Light foreground text */ +} + #response-content-image-box { padding-top: 10px; padding-bottom: 10px; @@ -378,12 +407,186 @@ window { #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; } +/* 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 { + border-top: 1px solid #9C9CFF; + padding-top: 3px; +} + +.requests-menu-footer-button, +.requests-menu-footer-label { + min-width: 1em; + margin: 0; + -moz-margin-end: 3px; + border: none; + padding: 0px 0.75vw; + +/* color: #fff;*/ +} + +.requests-menu-footer-spacer { + min-width: 2px; +} + +.requests-menu-footer-spacer, +.requests-menu-footer-button { +} + +.requests-menu-footer-button { +} + +.requests-menu-footer-button:hover { +} + +.requests-menu-footer-button:hover:active { +} + +.requests-menu-footer-button:not(:active)[checked] { +} + +.requests-menu-footer-label { + font-weight: 600; +} + +/* Performance analysis buttons */ + +#requests-menu-network-summary-button { + list-style-image: url("profiler-stopwatch.png"); + -moz-image-region: rect(0px,32px,16px,16px); + -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: #000000; /* 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; +} + +.chart-colored-blob[name=html] { + fill: #A09090; /* Blue-Grey highlight */ + background: #A09090; +} + +.chart-colored-blob[name=css] { + fill: #9C9CFF; /* Blue highlight */ + background: #9C9CFF; +} + +.chart-colored-blob[name=js] { + fill: #FFCF00; /* Light Orange highlight */ + background: #FFCF00; +} + +.chart-colored-blob[name=xhr] { + fill: #FF9F00; /* Orange highlight */ + background: #FF9F00; +} + +.chart-colored-blob[name=fonts] { + fill: #6000CF; /* Purple highlight */ + background: #6000CF; +} + +.chart-colored-blob[name=images] { + fill: #E7ADE7; /* Pink highlight */ + background: #E7ADE7; +} + +.chart-colored-blob[name=media] { + fill: #008484; /* Green highlight */ + background: #008484; +} + +.chart-colored-blob[name=flash] { + fill: #FF0000; /* Red highlight */ + background: #FF0000; +} + +.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 { @@ -391,7 +594,12 @@ window { } .requests-menu-header-button { - min-height: 23px; /* Remaining 1px comes from border of the button. */ + min-height: 24px; + } + + .requests-menu-footer-button, + .requests-menu-footer-label { + padding: 0px 1vw; } #details-pane { @@ -401,13 +609,12 @@ window { } .requests-menu-status-and-method { - width: 14vw; + width: 16vw; } .requests-menu-file, .requests-menu-domain { width: 30vw; - min-width: 10em; } .requests-menu-type { @@ -438,3 +645,5 @@ window { right border and box-shadow of "File" column should be hidden. */ } } + +/* === END netmonitor.inc.css === */