From 9f6401c22b50f8e59ea2275e257f9585a8e04e41 Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Fri, 9 Dec 2016 01:13:25 +0100 Subject: [PATCH] make network panel look decent even in current nightlies --- .../devtools/images/profiler-stopwatch.svg | 2 +- LCARStrek/devtools/netmonitor.css | 75 +++++++++++++++++++ LCARStrek/devtools/toolbars.css | 5 ++ 3 files changed, 81 insertions(+), 1 deletion(-) diff --git a/LCARStrek/devtools/images/profiler-stopwatch.svg b/LCARStrek/devtools/images/profiler-stopwatch.svg index 6f8e1bf9..f8be61e0 100644 --- a/LCARStrek/devtools/images/profiler-stopwatch.svg +++ b/LCARStrek/devtools/images/profiler-stopwatch.svg @@ -1,7 +1,7 @@ - + diff --git a/LCARStrek/devtools/netmonitor.css b/LCARStrek/devtools/netmonitor.css index 8daf3d4c..78784ae6 100644 --- a/LCARStrek/devtools/netmonitor.css +++ b/LCARStrek/devtools/netmonitor.css @@ -7,6 +7,62 @@ window { padding: 0; } +#toolbar-labels { + overflow: hidden; +} + +.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; @@ -61,6 +117,11 @@ window { #requests-menu-toolbar { } +#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; @@ -454,6 +515,16 @@ window { 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 { @@ -625,6 +696,10 @@ window { /* 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"); diff --git a/LCARStrek/devtools/toolbars.css b/LCARStrek/devtools/toolbars.css index 2bddea0a..13a5a467 100644 --- a/LCARStrek/devtools/toolbars.css +++ b/LCARStrek/devtools/toolbars.css @@ -229,6 +229,7 @@ div.devtools-toolbar::after { .menu-filter-button { border: none; /* min-height: 32px; */ + font: inherit; background-color: var(--theme-button-background); color: var(--theme-button-color); border-radius: 300px; @@ -496,6 +497,10 @@ div.devtools-toolbar::after { position: relative; } +button + .devtools-searchbox { + margin-inline-start: 2px; +} + /* The spacing is accomplished with a padding on the searchbox */ .devtools-searchbox > .devtools-textinput, .devtools-searchbox > .devtools-searchinput { -- 2.35.3