From 5f8de423f190bbb79a62f804151bc24824fa32d8 Mon Sep 17 00:00:00 2001 From: "Matt A. Tobin" Date: Fri, 2 Feb 2018 04:16:08 -0500 Subject: Add m-esr52 at 52.6.0 --- devtools/client/themes/netmonitor.css | 975 ++++++++++++++++++++++++++++++++++ 1 file changed, 975 insertions(+) create mode 100644 devtools/client/themes/netmonitor.css (limited to 'devtools/client/themes/netmonitor.css') diff --git a/devtools/client/themes/netmonitor.css b/devtools/client/themes/netmonitor.css new file mode 100644 index 000000000..fea634a0e --- /dev/null +++ b/devtools/client/themes/netmonitor.css @@ -0,0 +1,975 @@ +/* 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/. */ + +#toolbar-labels { + overflow: hidden; +} + +#react-clear-button-hook, +#react-details-pane-toggle-hook { + display: flex; +} + +/** + * Collapsed details pane needs to be truly hidden to prevent both accessibility + * tools and keyboard from accessing its contents. + */ +#details-pane.pane-collapsed { + visibility: hidden; +} + +#details-pane-toggle[disabled] { + display: none; +} + +#custom-pane { + overflow: auto; +} + +#response-content-image-box { + overflow: auto; +} + +#network-statistics-charts { + overflow: auto; +} + +.cropped-textbox .textbox-input { + /* workaround for textbox not supporting the @crop attribute */ + text-overflow: ellipsis; +} + +/* Responsive sidebar */ +@media (max-width: 700px) { + #toolbar-spacer, + #details-pane-toggle, + #details-pane.pane-collapsed, + .requests-menu-waterfall, + #requests-menu-network-summary-button > .toolbarbutton-text { + display: none; + } +} + +:root.theme-dark { + --table-splitter-color: rgba(255,255,255,0.15); + --table-zebra-background: rgba(255,255,255,0.05); + + --timing-blocked-color: rgba(235, 83, 104, 0.8); + --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */ + --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */ + --timing-send-color: rgba(70, 175, 227, 0.8); /* light blue */ + --timing-wait-color: rgba(94, 136, 176, 0.8); /* blue grey */ + --timing-receive-color: rgba(112, 191, 83, 0.8); /* 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); +} + +:root.theme-light { + --table-splitter-color: rgba(0,0,0,0.15); + --table-zebra-background: rgba(0,0,0,0.05); + + --timing-blocked-color: rgba(235, 83, 104, 0.8); + --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */ + --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */ + --timing-send-color: rgba(0, 136, 204, 0.8); /* blue */ + --timing-wait-color: rgba(95, 136, 176, 0.8); /* blue grey */ + --timing-receive-color: rgba(44, 187, 15, 0.8); /* 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); +} + +:root.theme-firebug { + --table-splitter-color: rgba(0,0,0,0.15); + --table-zebra-background: rgba(0,0,0,0.05); + + --timing-blocked-color: rgba(235, 83, 104, 0.8); /* red */ + --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */ + --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */ + --timing-send-color: rgba(70, 175, 227, 0.8); /* light blue */ + --timing-wait-color: rgba(94, 136, 176, 0.8); /* blue grey */ + --timing-receive-color: rgba(112, 191, 83, 0.8); /* green */ + + --sort-ascending-image: url(chrome://devtools/skin/images/firebug/arrow-up.svg); + --sort-descending-image: url(chrome://devtools/skin/images/firebug/arrow-down.svg); +} + +#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(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 { + display: none; +} + +#requests-menu-reload-notice-button { + min-height: 26px; + margin: 0; + background-color: var(--theme-toolbar-background); +} + +/* Network requests table */ + +#requests-menu-toolbar { + padding: 0; +} + +.theme-firebug #requests-menu-toolbar { + height: 16px !important; +} + +.requests-menu-subitem { + padding: 3px; +} + +.requests-menu-header-button { + -moz-appearance: none; + background-color: transparent; + border-image: linear-gradient(transparent 15%, + var(--theme-splitter-color) 15%, + var(--theme-splitter-color) 85%, + transparent 85%) 1 1; + border-style: solid; + border-width: 0; + border-inline-start-width: 1px; + 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; +} + +.requests-menu-header:first-child .requests-menu-header-button { + border-width: 0; +} + +.requests-menu-header-button:hover { + background-color: rgba(0, 0, 0, 0.1); +} + +.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[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[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 > .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; +} + +/* Firebug theme support for Network panel header */ + +.theme-firebug .requests-menu-header { + padding: 0 !important; + font-weight: bold; + background: linear-gradient(rgba(255, 255, 255, 0.05), + rgba(0, 0, 0, 0.05)), + #C8D2DC; +} + +.theme-firebug .requests-menu-header-button { + min-height: 17px; +} + +.theme-firebug .requests-header-menu-button[sorted] { + background-color: #AAC3DC; +} + +.theme-firebug .requests-header-menu:hover:active { + background-image: linear-gradient(rgba(0, 0, 0, 0.1), + transparent); +} + + +/* Network requests table: specific column dimensions */ + +.requests-menu-status { + max-width: 6em; + text-align: center; + width: 10vw; +} + +.requests-menu-method, +.requests-menu-method-box { + max-width: 7em; + text-align: center; + width: 10vw; +} + +.requests-menu-icon-and-file { + width: 22vw; +} + +.requests-menu-icon { + background: #fff; + width: calc(1em + 4px); + height: calc(1em + 4px); + margin: -4px 0px; + margin-inline-end: 4px; +} + +.requests-menu-icon { + outline: 1px solid var(--table-splitter-color); +} + +.requests-menu-security-and-domain { + width: 14vw; +} + +.requests-security-state-icon { + width: 16px; + height: 16px; + margin-inline-end: 4px; +} + +.side-menu-widget-item.selected .requests-security-state-icon { + filter: brightness(1.3); +} + +.security-state-insecure { + list-style-image: url(chrome://devtools/skin/images/security-state-insecure.svg); +} + +.security-state-secure { + list-style-image: url(chrome://devtools/skin/images/security-state-secure.svg); +} + +.security-state-weak { + list-style-image: url(chrome://devtools/skin/images/security-state-weak.svg); +} + +.security-state-broken { + list-style-image: url(chrome://devtools/skin/images/security-state-broken.svg); +} + +.security-state-local { + list-style-image: url(chrome://devtools/skin/images/globe.svg); +} + +.requests-menu-type, +.requests-menu-size { + max-width: 6em; + text-align: center; + width: 8vw; +} + +.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: 8vw; +} + +.side-menu-widget-item.selected .requests-menu-transferred.theme-comment { + color: var(--theme-selection-color); +} + +/* Network requests table: status codes */ + +.requests-menu-status-code { + margin-inline-start: 3px !important; + width: 3em; + margin-inline-end: -3em !important; +} + +.requests-menu-status-icon { + background: #fff; + height: 10px; + width: 10px; + margin-inline-start: 5px; + margin-inline-end: 5px; + border-radius: 10px; + transition: box-shadow 0.5s ease-in-out; +} + +.side-menu-widget-item.selected .requests-menu-status-icon { + filter: brightness(1.3); +} + +.requests-menu-status-icon:not([code]) { + background-color: var(--theme-content-color2); +} + +.requests-menu-status-icon[code="cached"] { + border: 2px solid var(--theme-content-color2); + background-color: transparent; +} + +.requests-menu-status-icon[code^="1"] { + background-color: var(--theme-highlight-blue); +} + +.requests-menu-status-icon[code^="2"] { + background-color: var(--theme-highlight-green); +} + +/* 3xx are triangles */ +.requests-menu-status-icon[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 */ +.requests-menu-status-icon[code^="4"] { + background-color: var(--theme-highlight-red); + border-radius: 0; /* squares */ +} + +.requests-menu-status-icon[code^="5"] { + background-color: var(--theme-highlight-pink); + border-radius: 0; + transform: rotate(45deg); +} + +/* Network requests table: waterfall header */ + +.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: 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) { + border-inline-start: 1px dashed; + margin-inline-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 { + border-inline-start-color: #5a6169 !important; +} + +.theme-light .requests-menu-timings-division { + border-inline-start-color: #585959 !important; +} + +.requests-menu-timings-division[division-scale=second], +.requests-menu-timings-division[division-scale=minute] { + font-weight: 600; +} + +/* Network requests table: waterfall items */ + +.requests-menu-subitem.requests-menu-waterfall { + padding-inline-start: 0px; + padding-inline-end: 4px; + /* Background created on a in js. */ + /* @see devtools/client/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 { + padding-inline-start: 4px; + font-size: 85%; + font-weight: 600; +} + +.requests-menu-timings-box { + height: 9px; +} + +.theme-firebug .requests-menu-timings-box { + background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2)); + height: 16px; +} + +.requests-menu-timings-box.blocked { + background-color: var(--timing-blocked-color); +} + +.requests-menu-timings-box.dns { + background-color: var(--timing-dns-color); +} + +.requests-menu-timings-box.connect { + background-color: var(--timing-connect-color); +} + +.requests-menu-timings-box.send { + background-color: var(--timing-send-color); +} + +.requests-menu-timings-box.wait { + background-color: var(--timing-wait-color); +} + +.requests-menu-timings-box.receive { + background-color: var(--timing-receive-color); +} + +/* 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-item:not(.selected)[odd] { + background-color: var(--table-zebra-background); +} + +.side-menu-widget-item:not(.selected):hover { + background-color: var(--theme-selection-background-semitransparent); +} + +.theme-firebug .side-menu-widget-item:not(.selected):hover { + background: #EFEFEF; +} + +.theme-firebug .requests-menu-subitem { + padding: 1px; +} + +/* HTTP Status Column */ +.theme-firebug .requests-menu-subitem.requests-menu-status { + font-weight: bold; +} + +/* Method Column */ + +.theme-firebug .requests-menu-subitem.requests-menu-method-box { + color: rgb(128, 128, 128); +} + +.side-menu-widget-item.selected .requests-menu-method { + color: var(--theme-selection-color); +} + +/* Size Column */ +.theme-firebug .requests-menu-subitem.requests-menu-size { + text-align: end; + padding-inline-end: 4px; +} + +/* Network request details */ + +#details-pane-toggle:-moz-locale-dir(ltr)::before, +#details-pane-toggle.pane-collapsed:-moz-locale-dir(rtl)::before { + background-image: var(--theme-pane-collapse-image); +} + +#details-pane-toggle.pane-collapsed:-moz-locale-dir(ltr)::before, +#details-pane-toggle:-moz-locale-dir(rtl)::before { + background-image: var(--theme-pane-expand-image); +} + +/* Network request details tabpanels */ + +.tabpanel-content { + background-color: var(--theme-sidebar-background); +} + +.theme-dark .tabpanel-content { + color: var(--theme-selection-color); +} + +#headers-tabpanel { + background-color: var(--theme-toolbar-background); +} + +.theme-firebug .variables-view-scope:focus > .title { + color: var(--theme-body-color); +} + +/* Summary tabpanel */ + +.tabpanel-summary-container { + padding: 1px; +} + +.tabpanel-summary-label { + padding-inline-start: 4px; + padding-inline-end: 3px; + font-weight: 600; +} + +.tabpanel-summary-value { + color: inherit; + padding-inline-start: 3px; +} + +.theme-dark .tabpanel-summary-value { + color: var(--theme-selection-color); +} + +/* Headers tabpanel */ + +#headers-summary-status, +#headers-summary-version { + padding-bottom: 2px; +} + +#headers-summary-size { + padding-top: 2px; +} + +#headers-summary-resend { + margin-top: -10px; + margin-inline-end: 6px; +} + +#toggle-raw-headers { + margin-top: -10px; + margin-inline-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: #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; +} + +.theme-firebug #timings-tabpanel .requests-menu-timings-total { + color: var(--theme-body-color); +} + +/* Security tabpanel */ +.security-info-section { + padding-inline-start: 1em; +} + +.theme-dark #security-error-message { + color: var(--theme-selection-color); +} + +#security-tabpanel { + overflow: auto; +} + +.security-warning-icon { + background-image: url(images/alerticon-warning.png); + background-size: 13px 12px; + margin-inline-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; +} + +/* Performance analysis buttons */ + +#requests-menu-network-summary-button { + background: none; + box-shadow: none; + border-color: transparent; + list-style-image: url(images/profiler-stopwatch.svg); + padding-inline-end: 0; + cursor: pointer; + margin-inline-end: 1em; + min-width: 0; +} + +/* 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; + 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 { + margin-inline-start: 3vw; + margin-inline-end: 1vw; +} + +#network-statistics-charts .table-chart-container { + margin-inline-start: 1vw; + margin-inline-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-purple); + background: var(--theme-highlight-purple); +} + +.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; +} + +/* Firebug theme support for network charts */ + +.theme-firebug .chart-colored-blob[name=html] { + fill: rgba(94, 136, 176, 0.8); /* Blue-Grey highlight */ + background: rgba(94, 136, 176, 0.8); +} + +.theme-firebug .chart-colored-blob[name=css] { + fill: rgba(70, 175, 227, 0.8); /* light blue */ + background: rgba(70, 175, 227, 0.8); +} + +.theme-firebug .chart-colored-blob[name=js] { + fill: rgba(235, 83, 104, 0.8); /* red */ + background: rgba(235, 83, 104, 0.8); +} + +.theme-firebug .chart-colored-blob[name=xhr] { + fill: rgba(217, 102, 41, 0.8); /* orange */ + background: rgba(217, 102, 41, 0.8); +} + +.theme-firebug .chart-colored-blob[name=fonts] { + fill: rgba(223, 128, 255, 0.8); /* pink */ + background: rgba(223, 128, 255, 0.8); +} + +.theme-firebug .chart-colored-blob[name=images] { + fill: rgba(112, 191, 83, 0.8); /* pink */ + background: rgba(112, 191, 83, 0.8); +} + +.theme-firebug .chart-colored-blob[name=media] { + fill: rgba(235, 235, 84, 0.8); /* yellow */ + background: rgba(235, 235, 84, 0.8); +} + +.theme-firebug .chart-colored-blob[name=flash] { + fill: rgba(84, 235, 159, 0.8); /* cyan */ + background: rgba(84, 235, 159, 0.8); +} + +/* Responsive sidebar */ +@media (max-width: 700px) { + #requests-menu-toolbar { + height: 22px; + } + + .requests-menu-header-button { + min-height: 22px; + padding-left: 8px; + } + + #details-pane { + margin: 0 !important; + /* To prevent all the margin hacks to hide the sidebar. */ + } + + .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-security-and-domain { + width: 18vw; + } + + .requests-menu-type { + width: 10vw; + } + + .requests-menu-transferred, + .requests-menu-size { + width: 12vw; + } +} + +/* 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%; + } +} -- cgit v1.2.3