From 11ddc40545d65c5dd6bb376206dbba998d43a5ab Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Sun, 18 Dec 2016 04:09:36 +0100 Subject: [PATCH] make networking pane work nicely in current nightlies (not completely sure if we break older versions right now with this, will fix later) --- LCARStrek/devtools/netmonitor.css | 326 ++++++++++++++++++++++++++---- 1 file changed, 284 insertions(+), 42 deletions(-) diff --git a/LCARStrek/devtools/netmonitor.css b/LCARStrek/devtools/netmonitor.css index 78784ae6..81ff32a3 100644 --- a/LCARStrek/devtools/netmonitor.css +++ b/LCARStrek/devtools/netmonitor.css @@ -3,12 +3,17 @@ * 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 */ + window { padding: 0; } #toolbar-labels { overflow: hidden; + display: flex; + flex: auto; } .devtools-toolbar-container { @@ -79,7 +84,21 @@ window { --sort-descending-image: url(chrome://devtools/skin/images/sort-arrows.svg#descending); } -#requests-menu-empty-notice { +#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%; @@ -92,8 +111,13 @@ window { #requests-menu-perf-notice-button { min-width: 30px; min-height: 26px; - margin: 0; 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 @@ -108,13 +132,21 @@ window { } #requests-menu-reload-notice-button { + font-size: inherit; min-height: 26px; - margin: 0; + 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 { @@ -127,16 +159,42 @@ window { 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; } -.requests-menu-header:not(:last-child):-moz-locale-dir(rtl), -.requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) { +.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%, @@ -149,14 +207,20 @@ window { min-width: 1px; min-height: 24px; margin: 0; - padding-bottom: 2px; - padding-inline-start: 13px; 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; } @@ -171,12 +235,25 @@ window { 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; - -moz-box-ordinal-group: 2; width: 7px; } @@ -185,24 +262,40 @@ window { 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[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[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; } @@ -234,10 +327,9 @@ window { } .requests-menu-icon { - background: #FFCF00; - width: calc(1em + 4px); - height: calc(1em + 4px); - margin: -4px 0px; + background: transparent; + width: 15px; + height: 15px; margin-inline-end: 4px; } @@ -250,6 +342,7 @@ window { } .requests-security-state-icon { + flex: none; width: 16px; height: 16px; margin-inline-end: 4px; @@ -280,6 +373,17 @@ window { max-width: 6em; text-align: center; width: 8vw; + justify-content: center; +} + +.requests-menu-transferred { + max-width: 8em; + width: 8vw; + justify-content: center; +} + +.request-list-item.selected .requests-menu-transferred.theme-comment { + color: var(--theme-selection-color); } .requests-menu-cause { @@ -325,25 +429,33 @@ window { transition: background-color 0.5s ease-in-out; } -.requests-menu-status-icon:not([code]) { +.request-list-item.selected .requests-menu-status-icon { +} + +.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[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[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[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[code^="3"], +.requests-menu-status-icon[data-code^="3"] { background-color: transparent; width: 0; height: 0; @@ -354,12 +466,14 @@ window { } /* 4xx and 5xx are squares - error codes */ -.requests-menu-status-icon[code^="4"] { +.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[code^="5"], +.requests-menu-status-icon[data-code^="5"] { background-color: var(--theme-highlight-pink); border-radius: 0; transform: rotate(45deg); @@ -368,11 +482,13 @@ window { /* Network requests table: waterfall header */ .requests-menu-waterfall { + flex: auto; padding-inline-start: 0; } -#requests-menu-waterfall-label:not(.requests-menu-waterfall-visible) { - padding-inline-start: 13px; +#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 { @@ -383,6 +499,9 @@ window { 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 { @@ -391,7 +510,7 @@ window { .requests-menu-timings-division:not(:first-child) { border-inline-start: 1px dashed; - margin-inline-start: -100px !important; /* Don't affect layout. */ +/* margin-inline-start: -100px !important; / Don't affect layout. */ } .requests-menu-timings-division:-moz-locale-dir(ltr) { @@ -407,28 +526,37 @@ window { } .requests-menu-timings-division[division-scale=second], -.requests-menu-timings-division[division-scale=minute] { +.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: 0px; + 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: -1px center; + 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; + transform-origin: left center; } .requests-menu-timings:-moz-locale-dir(rtl) { @@ -444,12 +572,17 @@ window { } .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; } @@ -480,13 +613,23 @@ window { /* SideMenuWidget */ #network-table .side-menu-widget-empty-text, -#network-table .side-menu-widget-container { +#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 { +#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 { @@ -497,14 +640,22 @@ window { box-shadow: none !important; } -.side-menu-widget-item:not(.selected)[odd] { +.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 { +.side-menu-widget-item:not(.selected):hover, +.request-list-item:not(.selected):hover { background-color: var(--theme-selection-background-semitransparent); } +/* Method Column */ + +.request-list-item.selected .requests-menu-method { + color: var(--theme-selection-color); +} + /* Network request details */ #details-pane-toggle { @@ -529,9 +680,7 @@ window { .tabpanel-content { background-color: var(--theme-sidebar-background); -} -.theme-dark .tabpanel-content { color: var(--theme-body-color); } @@ -546,6 +695,7 @@ window { } .tabpanel-summary-label { + display: inline-block; padding-inline-start: 4px; padding-inline-end: 3px; font-weight: 600; @@ -614,14 +764,28 @@ window { /* Timings tabpanel */ +#timings-tabpanel .tabpanel-summary-container { + display: flex; +} + #timings-tabpanel .tabpanel-summary-label { width: 10em; } +#timings-tabpanel .requests-menu-timings-container { + display: flex; + flex: 1; + align-items: center; +} + +#timings-tabpanel .requests-menu-timings-offset { + transition: width 0.2s ease-out; +} + #timings-tabpanel .requests-menu-timings-box { - transition: transform 0.2s ease-out; border: none; min-width: 1px; + transition: width 0.2s ease-out; } #timings-tabpanel .requests-menu-timings-total { @@ -636,6 +800,7 @@ window { #security-tabpanel { overflow: auto; + -moz-user-select: text; } .security-warning-icon { @@ -707,6 +872,21 @@ window { 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-toolbar { @@ -832,7 +1012,7 @@ window { .requests-menu-status { max-width: none; - width: 12vw; + width: 10vw; } .requests-menu-status-code { @@ -842,7 +1022,7 @@ window { .requests-menu-method, .requests-menu-method-box { max-width: none; - width: 14vw; + width: 12vw; } .requests-menu-icon-and-file { @@ -850,16 +1030,19 @@ window { } .requests-menu-security-and-domain { - width: 18vw; + width: 16vw; } - .requests-menu-type { + .requests-menu-cause, + .requests-menu-type, + .requests-menu-transferred, + .requests-menu-size { + max-width: none; width: 10vw; } - .requests-menu-transferred, - .requests-menu-size { - width: 12vw; + .requests-menu-waterfall { + display: none; } } @@ -887,3 +1070,62 @@ window { font-size: 85%; } } + +/* Overwrite tree-view cell colon and use l10n string instead */ +.treeTable .treeLabelCell::after { + content: ""; +} + +/* 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); +} + +.treeTable .treeLabel { + font-weight: 600; +} + +/* Customize default tree table style to align with devtools theme */ +.theme-light .treeTable .treeLabel, +.theme-light .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover { + color: var(--theme-highlight-red); +} + +.theme-dark .treeTable .treeLabel, +.theme-dark .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover { + color: var(--theme-highlight-purple); +} + +.theme-firebug .treeTable .treeLabel { + color: var(--theme-body-color); +} + +.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; +} -- 2.35.3