/* 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/. */ @import url("resource://devtools/client/shared/components/tree/tree-view.css"); @import url(variables.css); /* No idea why this is needed but we get error messages without it */ @import "resource://devtools/client/shared/components/tabs/tabs.css"; @import "resource://devtools/client/shared/components/tabs/tabbar.css"; window { padding: 0; } #toolbar-labels { overflow: hidden; display: flex; flex: auto; } .devtools-toolbar-container { display: flex; justify-content: space-between; } .devtools-toolbar-group { display: flex; flex: 0 0 auto; flex-wrap: nowrap; align-items: stretch; } /** * 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 > .summary-info-text { display: none; } } :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); } #network-table { display: -moz-box; -moz-box-orient: vertical; -moz-box-flex: 1; overflow: hidden; } .request-list-container { display: -moz-box; -moz-box-orient: vertical; -moz-box-flex: 1; } #requests-menu-empty-notice, .request-list-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; list-style-image: url("images/profiler-stopwatch.svg"); margin: 0 5px; vertical-align: middle; } #requests-menu-perf-notice-button::before { background-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 { font-size: inherit; min-height: 26px; padding-left: 10px; padding-right: 10px; margin: 0 5px; } /* Network requests table */ #requests-menu-toolbar { background: var(--theme-capped-toolbar-background); } #requests-menu-toolbar::before, #requests-menu-toolbar::after { display: none; /* Remove caps from this toolbar (and above background rule make the background fill it completely) */ } #requests-menu-filter-buttons { display: flex; flex-wrap: nowrap; } #requests-menu-toolbar > .toolbar-box > .toolbar-startcap, #requests-menu-toolbar > .toolbar-box > .toolbar-endcap { display: none; } .requests-menu-contents { display: -moz-box; -moz-box-orient: vertical; -moz-box-flex: 1; overflow-x: hidden; overflow-y: auto; --timings-scale: 1; --timings-rev-scale: 1; } .requests-menu-subitem { display: flex; flex: none; box-sizing: border-box; align-items: center; padding: 3px; } .subitem-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .requests-menu-header { display: flex; flex: none; } #requests-menu-status-button, .requests-menu-header-button { display: flex; align-items: center; flex: auto; -moz-appearance: none; 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: 1px; min-height: 24px; margin: 0; padding-top: 2px; padding-bottom: 2px; /* padding-inline-start: 16px; padding-inline-end: 0;*/ text-align: center; /* color: inherit;*/ font-weight: inherit !important; } .requests-menu-header-button::-moz-focus-inner { border: 0; padding: 0; } .requests-menu-header:first-child .requests-menu-header-button { border-width: 0; } .requests-menu-header-button:hover { background-color: var(--theme-hover-background); color: var(--theme-hover-color); } .requests-menu-header-button:hover:active { background-color: var(--theme-active-background); color: var(--theme-active-color); } .requests-menu-header-button > .button-text { flex: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .requests-menu-header-button > .button-box > .button-icon, #requests-menu-waterfall-image { display: -moz-box; -moz-box-ordinal-group: 2; } .requests-menu-header-button > .button-box > .button-icon, #requests-menu-waterfall-image, .requests-menu-header-button > .button-icon { flex: none; height: 4px; margin-inline-start: 3px; margin-inline-end: 6px; width: 7px; display: none; } .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[data-sorted=ascending] > .button-icon { background-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[data-sorted=descending] > .button-icon { background-image: var(--sort-descending-image); } .requests-menu-header-button > .button-box > .button-text, #requests-menu-waterfall-label-wrapper { -moz-box-flex: 1; } .requests-menu-waterfall-label-wrapper { display: flex; } .requests-menu-header-button[sorted], .requests-menu-header-button[sorted]:hover, .requests-menu-header-button[data-sorted], .requests-menu-header-button[data-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, .requests-menu-header-button[data-sorted], .requests-menu-header[data-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 { border: none; } #requests-menu-status-button > .button-box { padding: 0; } /* 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: transparent; width: 15px; height: 15px; 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 { flex: none; width: 16px; height: 16px; margin-inline-end: 4px; } .side-menu-widget-item.selected .requests-security-state-icon, .request-list-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/security-state-local.svg"); } .requests-menu-type, .requests-menu-size { max-width: 6em; text-align: center; width: 8vw; justify-content: center; } .requests-menu-transferred { max-width: 8em; width: 8vw; justify-content: center; } .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, .request-list-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-color: #A09090; height: 10px; width: 10px; margin-inline-start: 5px; margin-inline-end: 5px; border-radius: 20px; border: 1px solid #000000; transition: background-color 0.5s ease-in-out; box-sizing: border-box; } .side-menu-widget-item.selected .requests-menu-status-icon, .request-list-item.selected .requests-menu-status-icon { /* filter: brightness(1.3);*/ } .requests-menu-status-icon:not([code]), .requests-menu-status-icon:not([data-code]) { background-color: var(--theme-content-color2); } .requests-menu-status-icon[code="cached"], .requests-menu-status-icon[data-code="cached"] { border: 2px solid var(--theme-content-color2); background-color: transparent; } .requests-menu-status-icon[code^="1"], .requests-menu-status-icon[data-code^="1"] { background-color: var(--theme-highlight-blue); } .requests-menu-status-icon[code^="2"], .requests-menu-status-icon[data-code^="2"] { background-color: var(--theme-highlight-green); } /* 3xx are triangles */ .requests-menu-status-icon[code^="3"], .requests-menu-status-icon[data-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"], .requests-menu-status-icon[data-code^="4"] { background-color: var(--theme-highlight-red); border-radius: 0; /* squares */ } .requests-menu-status-icon[code^="5"], .requests-menu-status-icon[data-code^="5"] { background-color: var(--theme-highlight-pink); border-radius: 0; transform: rotate(45deg); } /* Network requests table: waterfall header */ .requests-menu-waterfall { flex: auto; padding-inline-start: 0; } #requests-menu-waterfall-label:not(.requests-menu-waterfall-visible), .requests-menu-waterfall-label-wrapper:not(.requests-menu-waterfall-visible) { padding-inline-start: 16px; } .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; /* Allow the timing label to shrink if the container gets too narrow. * The container width then is not limited by the content. */ flex: initial; } .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; } .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], .requests-menu-timings-division[data-division-scale=second], .requests-menu-timings-division[data-division-scale=minute] { font-weight: 600; } /* Network requests table: waterfall items */ .requests-menu-subitem.requests-menu-waterfall { padding-inline-start: 0; 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: left center; } .requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) { background-position: right center; } .requests-menu-timings { display: flex; flex: none; align-items: center; transform: scaleX(var(--timings-scale)); } .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 { display: inline-block; padding-inline-start: 4px; font-size: 85%; font-weight: 600; white-space: nowrap; /* This node should not be scaled - apply a reversed transformation */ transform: scaleX(var(--timings-rev-scale)); } .requests-menu-timings-box { display: inline-block; height: 9px; } .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, #network-table .request-list-empty-notice, #network-table .request-list-container { background-color: var(--theme-body-background); } #network-table .side-menu-widget-item, .request-list-item { display: flex; border-top-color: transparent; border-bottom-color: transparent; padding: 0; } .request-list-item.selected { background-color: var(--theme-selection-background); color: var(--theme-selection-color); } .side-menu-widget-item-contents { padding: 0px; } .side-menu-widget-container { box-shadow: none !important; } .side-menu-widget-item:not(.selected)[odd], .request-list-item:not(.selected).odd { background-color: var(--table-zebra-background); } .side-menu-widget-item:not(.selected):hover, .request-list-item:not(.selected):hover { background-color: var(--theme-selection-background-semitransparent); } /* Method Column */ .side-menu-widget-item.selected .requests-menu-method, .request-list-item.selected .requests-menu-method { color: var(--theme-selection-color); } /* Network request details */ #details-pane-toggle:-moz-locale-dir(ltr), #details-pane-toggle.pane-collapsed:-moz-locale-dir(rtl) { list-style-image: var(--theme-pane-collapse-image); } #details-pane-toggle.pane-collapsed:-moz-locale-dir(ltr), #details-pane-toggle:-moz-locale-dir(rtl) { list-style-image: var(--theme-pane-expand-image); } #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); color: var(--theme-body-color); } #headers-tabpanel { background-color: var(--theme-toolbar-background); } /* Summary tabpanel */ .tabpanel-summary-container { padding: 1px; } .tabpanel-summary-label { display: inline-block; padding-inline-start: 4px; padding-inline-end: 3px; font-weight: 600; } .tabpanel-summary-value { color: inherit; padding-inline-start: 3px; } /* 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, .response-error-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; } .response-image-box { display: flex; flex-direction: column; justify-content: center; align-items: center; overflow-y: auto; padding: 10px; } .response-image { background: #FFFFFF; border: 1px dashed #A09090; margin-bottom: 10px; max-width: 300px; max-height: 100px; } /* Preview tabpanel */ #preview-tabpanel { background: #fff; } #response-preview { display: -moz-box; -moz-box-flex: 1; } /* Timings tabpanel */ #timings-tabpanel .tabpanel-summary-container, .timings-container { display: flex; } #timings-tabpanel .tabpanel-summary-label, .timings-label { width: 10em; } #timings-tabpanel .requests-menu-timings-container, .requests-menu-timings-container { display: flex; flex: 1; align-items: center; } #timings-tabpanel .requests-menu-timings-offset, .requests-menu-timings-offset { transition: width 0.2s ease-out; } #timings-tabpanel .requests-menu-timings-box, .requests-menu-timings-box { border: none; min-width: 1px; transition: width 0.2s ease-out; } #timings-tabpanel .requests-menu-timings-total { transition: transform 0.2s ease-out; } /* Security tabpanel */ /* Overwrite tree-view cell colon `:` for security panel and tree section */ .security-panel .treeTable .treeLabelCell::after, .treeTable .tree-section .treeLabelCell::after { content: ""; } /* Layout additional warning icon in tree value cell */ .security-info-value { display: flex; } .security-info-section { padding-inline-start: 1em; } #security-tabpanel { overflow: auto; -moz-user-select: text; } .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; } /* Main toolbar */ .requests-menu-filter-button { /* -moz-appearance: none; background: rgba(128,128,128,0.1); border: none; border-radius: 2px; min-width: 0; padding: 0 5px; margin: 2px; color: var(--theme-body-color);*/ margin-top: 0; margin-bottom: 0; } .requests-menu-filter-button:hover { /* background: rgba(128,128,128,0.2);*/ } .requests-menu-filter-button:hover:active { /* background-color: var(--theme-selection-background-semitransparent);*/ } /* Performance analysis buttons */ #requests-menu-network-summary-button { display: flex; flex-wrap: nowrap; align-items: center; font: inherit; box-shadow: none; border-color: transparent; list-style-image: url("images/profiler-stopwatch-tbutton.svg"); cursor: pointer; min-width: 0; } #requests-menu-network-summary-button > .summary-info-icon { background-image: url(images/profiler-stopwatch.svg); filter: var(--icon-filter); width: 16px; height: 16px; } #requests-menu-network-summary-button > .summary-info-text { margin-inline-start: 0.5em; } #requests-menu-network-summary-button:hover > .summary-info-icon, #requests-menu-network-summary-button:hover > .summary-info-text { } /* Performance analysis view */ #network-statistics-view { display: -moz-box; } #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; 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-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) { #toolbar-spacer, #details-pane-toggle, #details-pane.pane-collapsed, #requests-menu-network-summary-button > .summary-info-text { display: none; } #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: 10vw; } .requests-menu-status-code { width: auto; } .requests-menu-method, .requests-menu-method-box { max-width: none; width: 12vw; } .requests-menu-icon-and-file { width: 22vw; } .requests-menu-security-and-domain { width: 16vw; } .requests-menu-cause, .requests-menu-type, .requests-menu-transferred, .requests-menu-size { max-width: none; width: 10vw; } .requests-menu-waterfall { display: none; } } /* 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%; } } .textbox-input { text-overflow: ellipsis; border: none; background: none; color: inherit; width: 100%; } /* Overwrite tree-view cell colon and use l10n string instead */ .treeTable .treeLabelCell::after { content: ""; } .treeTable .textbox-input:focus { /* outline: 0; box-shadow: var(--theme-focus-box-shadow-textbox);*/ } .panel-container, .properties-view { display: flex; flex-direction: column; flex-grow: 1; height: 100%; } /* Layout additional warning icon in tree value cell */ .security-info-value { display: flex; } .security-info-value .textbox-input { text-overflow: ellipsis; border: none; background: none; color: inherit; width: 100%; margin-inline-end: 2px; } .security-info-value .textbox-input:focus { outline: 0; box-shadow: var(--theme-focus-box-shadow-textbox); } .properties-view .searchbox-section { flex: 0 1 auto; } .properties-view .devtools-searchbox { padding: 0; } .properties-view .devtools-searchbox input { margin: 1px 3px; } .tree-container { position: relative; height: 100%; } /* Make treeTable fill parent element and scrollable */ .tree-container .treeTable { position: absolute; display: block; overflow-y: auto; top: 0; right: 0; bottom: 0; left: 0; } /* Apply flex to table tbody in order to fill available vertical space */ .tree-container .treeTable tbody { display: flex; flex-direction: column; /* Apply flex to table will create an anonymous table element outside of tbody * See also http://stackoverflow.com/a/30851678 * Therefore, we set height with this magic number in order to remove the * redundant scrollbar when source editor appears. */ height: calc(100% - 4px); } .tree-container .treeTable tr { display: block; } /* Make right td fill available horizontal space */ .tree-container .treeTable td:last-child { width: 100%; } /* If there is a source editor shows up in the last row of TreeView, * it should occupy the available vertical space. */ .tree-container .treeTable .editor-row-container, .tree-container .treeTable tr:last-child td[colspan="2"] { display: block; height: 100%; } .properties-view .devtools-searchbox, .tree-container .treeTable .tree-section { width: 100%; background-color: var(--theme-toolbar-background); } .tree-container .treeTable tr.tree-section:not(:first-child) td:not([class=""]) { border-top: 1px solid var(--theme-splitter-color); } .properties-view .devtools-searchbox, .tree-container .treeTable tr.tree-section:not(:last-child) td:not([class=""]) { border-bottom: 1px solid var(--theme-splitter-color); } .tree-container .treeTable .tree-section > * { vertical-align: middle; } .tree-container .treeTable .treeRow.tree-section > .treeLabelCell > .treeLabel, .tree-container .treeTable .treeRow.tree-section > .treeLabelCell > .treeLabel:hover { color: var(--theme-body-color-alt); } .tree-container .treeTable .treeValueCell { /* FIXME: Make value cell can be reduced to shorter width */ max-width: 0; padding-inline-end: 5px; } .headers-summary input:not([type="button"]) { width: 100%; background: none; border: none; color: inherit; margin-inline-end: 2px; } .headers-summary input:not([type="button"]):focus { /* outline: none; box-shadow: var(--theme-focus-box-shadow-textbox);*/ transition: all 0.2s ease-in-out; } .headers-summary-label, .tree-container .objectBox { white-space: nowrap; } .headers-summary, .response-summary { display: flex; align-items: center; } .headers-summary .tool-button { /* border: 1px solid transparent; color: var(--theme-body-color); transition: background 0.05s ease-in-out;*/ margin-inline-end: 6px; padding: 0 5px; } .headers-summary .requests-menu-status-icon { min-width: 10px; } .headers-summary .raw-headers-container { display: flex; width: 100%; } .headers-summary .raw-headers { width: 50%; padding: 0px 4px; } .headers-summary .raw-headers textarea { width: 100%; height: 50vh; font: message-box; resize: none; box-sizing: border-box; } .headers-summary .raw-headers .tabpanel-summary-label { padding: 0 0 4px 0; } .empty-notice { color: var(--theme-body-color-alt); padding: 3px 8px; } .response-summary { display: flex; } .editor-container, .editor-mount, .panel-container iframe { border: none; width: 100%; height: 100%; } .treeTable .treeLabel { font-weight: 600; } /* Customize default tree table style to align with devtools theme */ .treeTable .treeLabel, .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover { color: var(--theme-highlight-purple); } .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover { cursor: default; text-decoration: none; } /* * FIXME: normal html block element cannot fill outer XUL element * This workaround should be removed after sidebar is migrated to react */ #react-security-tabpanel-hook, #react-timings-tabpanel-hook { display: -moz-box; -moz-box-orient: vertical; -moz-box-flex: 1; } /* * FIXME: normal html block element cannot fill outer XUL element * This workaround should be removed after netmonitor is migrated to react */ #react-details-panel-hook { display: flex; flex-direction: column; } #network-statistics-charts, #primed-cache-chart, #empty-cache-chart { display: -moz-box; -moz-box-flex: 1; }