From 122db24ebf2d55813fc5413889fb6062c606a270 Mon Sep 17 00:00:00 2001 From: Luis Flores Date: Tue, 11 Jul 2023 22:45:43 +0000 Subject: pw_web: Clean up log-viewer component code Changelist: - Refactored component code to better fit Lit best practices - Updated table styling (link: screen/3zQDpEirVSHi6K3) and timestamp format - Updated the build script to include `/asset/` in the asset paths, for easier publishing on Zipline - Removed `legacy` folder and references Change-Id: Ic790687f4400cde94ebbf262a1c12c4fba9d9945 Reviewed-on: https://pigweed-review.googlesource.com/c/pigweed/pigweed/+/153910 Reviewed-by: Asad Memon Reviewed-by: Amy Hu Commit-Queue: Luis Flores --- .../src/components/log-list/log-list.styles.ts | 171 +++++++++++++++++++++ 1 file changed, 171 insertions(+) create mode 100644 pw_web/log-viewer/src/components/log-list/log-list.styles.ts (limited to 'pw_web/log-viewer/src/components/log-list/log-list.styles.ts') diff --git a/pw_web/log-viewer/src/components/log-list/log-list.styles.ts b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts new file mode 100644 index 000000000..66627040e --- /dev/null +++ b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts @@ -0,0 +1,171 @@ +// Copyright 2023 The Pigweed Authors +// +// Licensed under the Apache License, Version 2.0 (the "License"); you may not +// use this file except in compliance with the License. You may obtain a copy of +// the License at +// +// https://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations under +// the License. + +import { css } from 'lit'; + +export const styles = css` + * { + box-sizing: border-box; + } + + :host { + background-color: var(--md-sys-color-surface); + display: block; + font-family: 'Roboto Mono', monospace; + font-size: 1rem; + height: 100%; + position: relative; + } + + .table-container { + height: 100%; + overflow: auto; + padding-bottom: 3rem; + scroll-behavior: auto; + width: 100%; + } + + table { + border-collapse: collapse; + height: 100%; + min-width: 100vw; + table-layout: fixed; + width: auto; + } + + thead, + th { + position: sticky; + top: 0; + z-index: 1; + } + + thead { + background: var(--md-sys-surface-container); + } + + tr { + border-bottom: 1px solid var(--md-sys-color-outline-variant); + display: grid; + justify-content: flex-start; + width: 100%; + } + + tr:hover > td { + background-color: rgba(var(--md-sys-inverse-surface-rgb), 0.1); + color: var(--sys-on-inverse-surface); + } + + th, + td { + display: block; + grid-row: 1; + overflow: hidden; + padding: 0.5rem 1rem; + text-align: left; + text-overflow: ellipsis; + } + + th[hidden], + td[hidden] { + display: none; + } + + th { + grid-row: 1; + white-space: nowrap; + } + + td { + display: inline-flex; + position: relative; + vertical-align: top; + align-items: flex-start; + } + + .resize-handle { + background-color: var(--md-sys-color-outline-variant); + bottom: 0; + content: ''; + cursor: col-resize; + height: 100%; + left: 0; + opacity: 1; + pointer-events: auto; + position: absolute; + right: 0; + top: 0; + transition: opacity 300ms ease; + width: 1px; + z-index: 1; + } + + .resize-handle:hover { + background-color: var(--md-sys-color-primary); + outline: 1px solid var(--md-sys-color-primary); + } + + .resize-handle::before { + bottom: 0; + content: ''; + display: block; + position: absolute; + right: -0.5rem; + top: 0; + width: 1rem; + } + + .cell-content--with-icon { + padding-top: 0.125rem; + } + + .cell-icon { + display: block; + font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 200, 'opsz' 58; + user-select: none; + } + + .overflow-indicator { + height: 100%; + pointer-events: none; + position: absolute; + top: 0; + width: 8rem; + } + + .right-indicator { + background: linear-gradient( + to right, + transparent, + var(--md-sys-color-surface) + ); + right: 0; + } + + .left-indicator { + background: linear-gradient( + to left, + transparent, + var(--md-sys-color-surface) + ); + left: 0; + } + + mark { + background-color: var(--md-sys-color-primary-container); + border-radius: 2px; + color: var(--md-sys-color-on-primary-container); + outline: 1px solid var(--md-sys-color-outline-variant); + } +`; -- cgit v1.2.3 From ed4a2a52130ba58a7a3b1ab934c59eb0209e4570 Mon Sep 17 00:00:00 2001 From: Luis Flores Date: Wed, 19 Jul 2023 16:30:18 +0000 Subject: pw_web: Update theme token values and usage Changelist: - Update light/dark theme values and other UI styling - Create custom tokens to surface configurable properties - Update severity logic to no longer set inline styles Change-Id: I42dd87c391d15994ef5e46143d97bdd43c108e9c Reviewed-on: https://pigweed-review.googlesource.com/c/pigweed/pigweed/+/155970 Commit-Queue: Luis Flores Reviewed-by: Amy Hu --- .../src/components/log-list/log-list.styles.ts | 58 ++++++++++++++++++---- 1 file changed, 47 insertions(+), 11 deletions(-) (limited to 'pw_web/log-viewer/src/components/log-list/log-list.styles.ts') diff --git a/pw_web/log-viewer/src/components/log-list/log-list.styles.ts b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts index 66627040e..63bd63e3c 100644 --- a/pw_web/log-viewer/src/components/log-list/log-list.styles.ts +++ b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts @@ -20,7 +20,8 @@ export const styles = css` } :host { - background-color: var(--md-sys-color-surface); + background-color: var(--sys-log-viewer-color-table-bg); + color: var(--sys-log-viewer-color-table-text); display: block; font-family: 'Roboto Mono', monospace; font-size: 1rem; @@ -52,19 +53,52 @@ export const styles = css` } thead { - background: var(--md-sys-surface-container); + background-color: var(--sys-log-viewer-color-table-header-bg); + color: var(--sys-log-viewer-color-table-header-text); } tr { - border-bottom: 1px solid var(--md-sys-color-outline-variant); + border-bottom: 1px solid var(--sys-log-viewer-color-table-cell-outline); display: grid; justify-content: flex-start; width: 100%; } + .log-row--warning { + --bg-color: var(--sys-log-viewer-color-surface-yellow); + --text-color: var(--sys-log-viewer-color-on-surface-yellow); + --icon-color: var(--sys-log-viewer-color-orange-bright); + } + + .log-row--error, + .log-row--critical { + --bg-color: var(--sys-log-viewer-color-surface-error); + --text-color: var(--sys-log-viewer-color-on-surface-error); + --icon-color: var(--sys-log-viewer-color-error-bright); + } + + .log-row--debug { + --bg-color: initial; + --text-color: var(--sys-log-viewer-color-debug); + --icon-color: var(--sys-log-viewer-color-debug); + } + + .log-row--warning .cell-content--icon, + .log-row--error .cell-content--icon, + .log-row--critical .cell-content--icon { + color: var(--icon-color); + } + + .log-row--warning, + .log-row--error, + .log-row--critical, + .log-row--debug { + background-color: var(--bg-color); + color: var(--text-color); + } + tr:hover > td { - background-color: rgba(var(--md-sys-inverse-surface-rgb), 0.1); - color: var(--sys-on-inverse-surface); + background-color: rgba(var(--md-sys-inverse-surface-rgb), 0.05); } th, @@ -95,12 +129,13 @@ export const styles = css` } .resize-handle { - background-color: var(--md-sys-color-outline-variant); + background-color: var(--sys-log-viewer-color-table-cell-outline); bottom: 0; content: ''; cursor: col-resize; height: 100%; left: 0; + mix-blend-mode: luminosity; opacity: 1; pointer-events: auto; position: absolute; @@ -113,6 +148,7 @@ export const styles = css` .resize-handle:hover { background-color: var(--md-sys-color-primary); + mix-blend-mode: unset; outline: 1px solid var(--md-sys-color-primary); } @@ -126,7 +162,7 @@ export const styles = css` width: 1rem; } - .cell-content--with-icon { + .cell-content--icon { padding-top: 0.125rem; } @@ -148,7 +184,7 @@ export const styles = css` background: linear-gradient( to right, transparent, - var(--md-sys-color-surface) + var(--sys-log-viewer-color-overflow-indicator) ); right: 0; } @@ -157,15 +193,15 @@ export const styles = css` background: linear-gradient( to left, transparent, - var(--md-sys-color-surface) + var(--sys-log-viewer-color-overflow-indicator) ); left: 0; } mark { - background-color: var(--md-sys-color-primary-container); + background-color: var(--sys-log-viewer-color-table-mark); border-radius: 2px; color: var(--md-sys-color-on-primary-container); - outline: 1px solid var(--md-sys-color-outline-variant); + outline: 1px solid var(--sys-log-viewer-color-table-mark); } `; -- cgit v1.2.3 From f59b8be8ba9bc0f76f7f63f6ba7552c55f1672e6 Mon Sep 17 00:00:00 2001 From: Anthony DiGirolamo Date: Fri, 11 Aug 2023 18:32:02 +0000 Subject: pw_presubmit: Apply TypeScript formatting - Enable TypeScript format presubmit step. - Apply required formatting Change-Id: Idf735a9a21a92d361bbfb62f6af787077daa3041 Reviewed-on: https://pigweed-review.googlesource.com/c/pigweed/pigweed/+/164825 Reviewed-by: Asad Memon Commit-Queue: Anthony DiGirolamo Pigweed-Auto-Submit: Anthony DiGirolamo --- .../src/components/log-list/log-list.styles.ts | 382 +++++++++++---------- 1 file changed, 193 insertions(+), 189 deletions(-) (limited to 'pw_web/log-viewer/src/components/log-list/log-list.styles.ts') diff --git a/pw_web/log-viewer/src/components/log-list/log-list.styles.ts b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts index 63bd63e3c..0f9da763a 100644 --- a/pw_web/log-viewer/src/components/log-list/log-list.styles.ts +++ b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts @@ -15,193 +15,197 @@ import { css } from 'lit'; export const styles = css` - * { - box-sizing: border-box; - } - - :host { - background-color: var(--sys-log-viewer-color-table-bg); - color: var(--sys-log-viewer-color-table-text); - display: block; - font-family: 'Roboto Mono', monospace; - font-size: 1rem; - height: 100%; - position: relative; - } - - .table-container { - height: 100%; - overflow: auto; - padding-bottom: 3rem; - scroll-behavior: auto; - width: 100%; - } - - table { - border-collapse: collapse; - height: 100%; - min-width: 100vw; - table-layout: fixed; - width: auto; - } - - thead, - th { - position: sticky; - top: 0; - z-index: 1; - } - - thead { - background-color: var(--sys-log-viewer-color-table-header-bg); - color: var(--sys-log-viewer-color-table-header-text); - } - - tr { - border-bottom: 1px solid var(--sys-log-viewer-color-table-cell-outline); - display: grid; - justify-content: flex-start; - width: 100%; - } - - .log-row--warning { - --bg-color: var(--sys-log-viewer-color-surface-yellow); - --text-color: var(--sys-log-viewer-color-on-surface-yellow); - --icon-color: var(--sys-log-viewer-color-orange-bright); - } - - .log-row--error, - .log-row--critical { - --bg-color: var(--sys-log-viewer-color-surface-error); - --text-color: var(--sys-log-viewer-color-on-surface-error); - --icon-color: var(--sys-log-viewer-color-error-bright); - } - - .log-row--debug { - --bg-color: initial; - --text-color: var(--sys-log-viewer-color-debug); - --icon-color: var(--sys-log-viewer-color-debug); - } - - .log-row--warning .cell-content--icon, - .log-row--error .cell-content--icon, - .log-row--critical .cell-content--icon { - color: var(--icon-color); - } - - .log-row--warning, - .log-row--error, - .log-row--critical, - .log-row--debug { - background-color: var(--bg-color); - color: var(--text-color); - } - - tr:hover > td { - background-color: rgba(var(--md-sys-inverse-surface-rgb), 0.05); - } - - th, - td { - display: block; - grid-row: 1; - overflow: hidden; - padding: 0.5rem 1rem; - text-align: left; - text-overflow: ellipsis; - } - - th[hidden], - td[hidden] { - display: none; - } - - th { - grid-row: 1; - white-space: nowrap; - } - - td { - display: inline-flex; - position: relative; - vertical-align: top; - align-items: flex-start; - } - - .resize-handle { - background-color: var(--sys-log-viewer-color-table-cell-outline); - bottom: 0; - content: ''; - cursor: col-resize; - height: 100%; - left: 0; - mix-blend-mode: luminosity; - opacity: 1; - pointer-events: auto; - position: absolute; - right: 0; - top: 0; - transition: opacity 300ms ease; - width: 1px; - z-index: 1; - } - - .resize-handle:hover { - background-color: var(--md-sys-color-primary); - mix-blend-mode: unset; - outline: 1px solid var(--md-sys-color-primary); - } - - .resize-handle::before { - bottom: 0; - content: ''; - display: block; - position: absolute; - right: -0.5rem; - top: 0; - width: 1rem; - } - - .cell-content--icon { - padding-top: 0.125rem; - } - - .cell-icon { - display: block; - font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 200, 'opsz' 58; - user-select: none; - } - - .overflow-indicator { - height: 100%; - pointer-events: none; - position: absolute; - top: 0; - width: 8rem; - } - - .right-indicator { - background: linear-gradient( - to right, - transparent, - var(--sys-log-viewer-color-overflow-indicator) - ); - right: 0; - } - - .left-indicator { - background: linear-gradient( - to left, - transparent, - var(--sys-log-viewer-color-overflow-indicator) - ); - left: 0; - } - - mark { - background-color: var(--sys-log-viewer-color-table-mark); - border-radius: 2px; - color: var(--md-sys-color-on-primary-container); - outline: 1px solid var(--sys-log-viewer-color-table-mark); - } + * { + box-sizing: border-box; + } + + :host { + background-color: var(--sys-log-viewer-color-table-bg); + color: var(--sys-log-viewer-color-table-text); + display: block; + font-family: 'Roboto Mono', monospace; + font-size: 1rem; + height: 100%; + position: relative; + } + + .table-container { + height: 100%; + overflow: auto; + padding-bottom: 3rem; + scroll-behavior: auto; + width: 100%; + } + + table { + border-collapse: collapse; + height: 100%; + min-width: 100vw; + table-layout: fixed; + width: auto; + } + + thead, + th { + position: sticky; + top: 0; + z-index: 1; + } + + thead { + background-color: var(--sys-log-viewer-color-table-header-bg); + color: var(--sys-log-viewer-color-table-header-text); + } + + tr { + border-bottom: 1px solid var(--sys-log-viewer-color-table-cell-outline); + display: grid; + justify-content: flex-start; + width: 100%; + } + + .log-row--warning { + --bg-color: var(--sys-log-viewer-color-surface-yellow); + --text-color: var(--sys-log-viewer-color-on-surface-yellow); + --icon-color: var(--sys-log-viewer-color-orange-bright); + } + + .log-row--error, + .log-row--critical { + --bg-color: var(--sys-log-viewer-color-surface-error); + --text-color: var(--sys-log-viewer-color-on-surface-error); + --icon-color: var(--sys-log-viewer-color-error-bright); + } + + .log-row--debug { + --bg-color: initial; + --text-color: var(--sys-log-viewer-color-debug); + --icon-color: var(--sys-log-viewer-color-debug); + } + + .log-row--warning .cell-content--icon, + .log-row--error .cell-content--icon, + .log-row--critical .cell-content--icon { + color: var(--icon-color); + } + + .log-row--warning, + .log-row--error, + .log-row--critical, + .log-row--debug { + background-color: var(--bg-color); + color: var(--text-color); + } + + tr:hover > td { + background-color: rgba(var(--md-sys-inverse-surface-rgb), 0.05); + } + + th, + td { + display: block; + grid-row: 1; + overflow: hidden; + padding: 0.5rem 1rem; + text-align: left; + text-overflow: ellipsis; + } + + th[hidden], + td[hidden] { + display: none; + } + + th { + grid-row: 1; + white-space: nowrap; + } + + td { + display: inline-flex; + position: relative; + vertical-align: top; + align-items: flex-start; + } + + .resize-handle { + background-color: var(--sys-log-viewer-color-table-cell-outline); + bottom: 0; + content: ''; + cursor: col-resize; + height: 100%; + left: 0; + mix-blend-mode: luminosity; + opacity: 1; + pointer-events: auto; + position: absolute; + right: 0; + top: 0; + transition: opacity 300ms ease; + width: 1px; + z-index: 1; + } + + .resize-handle:hover { + background-color: var(--md-sys-color-primary); + mix-blend-mode: unset; + outline: 1px solid var(--md-sys-color-primary); + } + + .resize-handle::before { + bottom: 0; + content: ''; + display: block; + position: absolute; + right: -0.5rem; + top: 0; + width: 1rem; + } + + .cell-content--icon { + padding-top: 0.125rem; + } + + .cell-icon { + display: block; + font-variation-settings: + 'FILL' 1, + 'wght' 400, + 'GRAD' 200, + 'opsz' 58; + user-select: none; + } + + .overflow-indicator { + height: 100%; + pointer-events: none; + position: absolute; + top: 0; + width: 8rem; + } + + .right-indicator { + background: linear-gradient( + to right, + transparent, + var(--sys-log-viewer-color-overflow-indicator) + ); + right: 0; + } + + .left-indicator { + background: linear-gradient( + to left, + transparent, + var(--sys-log-viewer-color-overflow-indicator) + ); + left: 0; + } + + mark { + background-color: var(--sys-log-viewer-color-table-mark); + border-radius: 2px; + color: var(--md-sys-color-on-primary-container); + outline: 1px solid var(--sys-log-viewer-color-table-mark); + } `; -- cgit v1.2.3 From 9aae4c335bbe10316a4cddd95c6d98e467bc5e22 Mon Sep 17 00:00:00 2001 From: Anthony DiGirolamo Date: Fri, 11 Aug 2023 18:56:45 +0000 Subject: pw_web: Log-viewer line wrap toggle Also fix all existing eslint errors. Change-Id: Icdcf720f3d3731d965d1e26c5860def79f5cc848 Reviewed-on: https://pigweed-review.googlesource.com/c/pigweed/pigweed/+/164010 Pigweed-Auto-Submit: Anthony DiGirolamo Reviewed-by: Amy Hu Commit-Queue: Auto-Submit --- pw_web/log-viewer/src/components/log-list/log-list.styles.ts | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'pw_web/log-viewer/src/components/log-list/log-list.styles.ts') diff --git a/pw_web/log-viewer/src/components/log-list/log-list.styles.ts b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts index 0f9da763a..8b6fee61f 100644 --- a/pw_web/log-viewer/src/components/log-list/log-list.styles.ts +++ b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts @@ -97,6 +97,12 @@ export const styles = css` color: var(--text-color); } + .log-row--nowrap .cell-content { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + tr:hover > td { background-color: rgba(var(--md-sys-inverse-surface-rgb), 0.05); } -- cgit v1.2.3 From 17b2aeb98f59c72cc146bccf09bf8f7bac0b4592 Mon Sep 17 00:00:00 2001 From: Amy Hu Date: Fri, 18 Aug 2023 23:33:16 +0000 Subject: pw_web: Add jump to bottom button, fix UI bugs and fix state bugs Changelist: - Add button for jumping to bottom, which would resume autoscrolling - Add custom scrollbar to consolidate touchpad and mouse scrollbars - Add indicator for bottom of log view - Fix autoscroll when logs cleared and y-scrollbar was at top - Fix horizontal scrollbar that would dissapear when logs were added - Fix saving state when the input changed to be empty Fixed: 293293929 Change-Id: I5b5eb897a9a2713c32dcaa313f9a378657bddf30 Reviewed-on: https://pigweed-review.googlesource.com/c/pigweed/pigweed/+/164272 Reviewed-by: Anthony DiGirolamo Reviewed-by: Luis Flores Commit-Queue: Amy Hu Reviewed-by: Asad Memon Presubmit-Verified: CQ Bot Account --- .../src/components/log-list/log-list.styles.ts | 75 +++++++++++++++++++--- 1 file changed, 67 insertions(+), 8 deletions(-) (limited to 'pw_web/log-viewer/src/components/log-list/log-list.styles.ts') diff --git a/pw_web/log-viewer/src/components/log-list/log-list.styles.ts b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts index 8b6fee61f..bc45c0de5 100644 --- a/pw_web/log-viewer/src/components/log-list/log-list.styles.ts +++ b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts @@ -26,13 +26,14 @@ export const styles = css` font-family: 'Roboto Mono', monospace; font-size: 1rem; height: 100%; + overflow: hidden; position: relative; } .table-container { + display: grid; height: 100%; - overflow: auto; - padding-bottom: 3rem; + overflow: scroll; scroll-behavior: auto; width: 100%; } @@ -118,7 +119,8 @@ export const styles = css` } th[hidden], - td[hidden] { + td[hidden], + .jump-to-bottom-btn[hidden] { display: none; } @@ -134,6 +136,15 @@ export const styles = css` align-items: flex-start; } + .jump-to-bottom-btn { + --md-filled-button-container-elevation: 4; + --md-filled-button-hover-container-elevation: 4; + bottom: 2rem; + left: 50%; + position: absolute; + transform: translate(-50%); + } + .resize-handle { background-color: var(--sys-log-viewer-color-table-cell-outline); bottom: 0; @@ -186,17 +197,20 @@ export const styles = css` height: 100%; pointer-events: none; position: absolute; - top: 0; width: 8rem; } - .right-indicator { + .bottom-indicator { + align-self: flex-end; background: linear-gradient( - to right, + to bottom, transparent, var(--sys-log-viewer-color-overflow-indicator) ); - right: 0; + height: 8rem; + pointer-events: none; + position: absolute; + width: 100%; } .left-indicator { @@ -205,7 +219,16 @@ export const styles = css` transparent, var(--sys-log-viewer-color-overflow-indicator) ); - left: 0; + justify-self: flex-start; + } + + .right-indicator { + background: linear-gradient( + to right, + transparent, + var(--sys-log-viewer-color-overflow-indicator) + ); + justify-self: flex-end; } mark { @@ -214,4 +237,40 @@ export const styles = css` color: var(--md-sys-color-on-primary-container); outline: 1px solid var(--sys-log-viewer-color-table-mark); } + + ::-webkit-scrollbar { + -webkit-appearance: auto; + } + + ::-webkit-scrollbar-corner { + background: var(--md-sys-color-surface-container-low); + } + + ::-webkit-scrollbar-thumb { + min-height: 3rem; + } + + ::-webkit-scrollbar-thumb:horizontal { + border-radius: 20px; + box-shadow: inset 0 0 2rem 2rem var(--md-sys-color-outline-variant); + border: inset 3px transparent; + border-top: inset 4px transparent; + } + + ::-webkit-scrollbar-thumb:vertical { + border-radius: 20px; + box-shadow: inset 0 0 2rem 2rem var(--md-sys-color-outline-variant); + border: inset 3px transparent; + border-left: inset 4px transparent; + } + + ::-webkit-scrollbar-track:horizontal { + box-shadow: inset 0 0 2rem 2rem var(--md-sys-color-surface-container-low); + border-top: solid 1px var(--md-sys-color-outline-variant); + } + + ::-webkit-scrollbar-track:vertical { + box-shadow: inset 0 0 2rem 2rem var(--md-sys-color-surface-container-low); + border-left: solid 1px var(--md-sys-color-outline-variant); + } `; -- cgit v1.2.3 From 54def9ab8ff0a56bd12393be8edc81272107a8f5 Mon Sep 17 00:00:00 2001 From: Luis Flores Date: Tue, 29 Aug 2023 18:57:42 +0000 Subject: pw_web: Enable downloading logs as plain text Changelist: - Adds a settings menu which includes the option to download the current logs as a .txt file - Upgrades Material Web Components version - Fixes issue with overflow indicators extending past scrollbars Change-Id: Iaf6b49c6f031b02f683bb2382ad2b591ca6e6783 Reviewed-on: https://pigweed-review.googlesource.com/c/pigweed/pigweed/+/168130 Reviewed-by: Asad Memon Presubmit-Verified: CQ Bot Account Commit-Queue: Luis Flores --- pw_web/log-viewer/src/components/log-list/log-list.styles.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'pw_web/log-viewer/src/components/log-list/log-list.styles.ts') diff --git a/pw_web/log-viewer/src/components/log-list/log-list.styles.ts b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts index bc45c0de5..8b9013cec 100644 --- a/pw_web/log-viewer/src/components/log-list/log-list.styles.ts +++ b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts @@ -140,6 +140,7 @@ export const styles = css` --md-filled-button-container-elevation: 4; --md-filled-button-hover-container-elevation: 4; bottom: 2rem; + font-family: 'Google Sans', sans-serif; left: 50%; position: absolute; transform: translate(-50%); @@ -190,11 +191,11 @@ export const styles = css` 'wght' 400, 'GRAD' 200, 'opsz' 58; + font-size: 1.25rem; user-select: none; } .overflow-indicator { - height: 100%; pointer-events: none; position: absolute; width: 8rem; @@ -210,7 +211,7 @@ export const styles = css` height: 8rem; pointer-events: none; position: absolute; - width: 100%; + width: calc(100% - 1rem); } .left-indicator { @@ -219,6 +220,7 @@ export const styles = css` transparent, var(--sys-log-viewer-color-overflow-indicator) ); + height: calc(100% - 1rem); justify-self: flex-start; } @@ -228,6 +230,7 @@ export const styles = css` transparent, var(--sys-log-viewer-color-overflow-indicator) ); + height: calc(100% - 1rem); justify-self: flex-end; } -- cgit v1.2.3 From e0b85213d6493b72d9d93019f8577b8cfb89867c Mon Sep 17 00:00:00 2001 From: Luis Flores Date: Tue, 12 Sep 2023 20:22:55 +0000 Subject: pw_web: Fix column sizing & toggling, update UI Table Column Changes - Fix column toggling based on updated test logs - Default column size is now calculated based on the character length of text content - Introduce `columnData` object to contain field names, char. lengths, resize widths, and visibility status and replace `LogColumnState` - Manually-resized column widths are now saved across sessions - Prevent autosizing after a certain number of logs have been added to the table (`_autosizeLocked`) Misc. UI Changes - Replace Google Sans usage with Roboto Flex - Move "Add View" button into the More Actions menu - Add titles (tooltips) to column headers - Update filter field to be right-justified Bugs: b/298096049, b/298096162, b/299502498, b/294598541 Change-Id: I0aaa80abe7ade1081e44456b5af6ac6037eded4e Reviewed-on: https://pigweed-review.googlesource.com/c/pigweed/pigweed/+/169591 Reviewed-by: Asad Memon Commit-Queue: Luis Flores Reviewed-by: Amy Hu Reviewed-by: Anthony DiGirolamo --- .../src/components/log-list/log-list.styles.ts | 37 ++++++++++++++++++---- 1 file changed, 30 insertions(+), 7 deletions(-) (limited to 'pw_web/log-viewer/src/components/log-list/log-list.styles.ts') diff --git a/pw_web/log-viewer/src/components/log-list/log-list.styles.ts b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts index 8b9013cec..7f95c1d96 100644 --- a/pw_web/log-viewer/src/components/log-list/log-list.styles.ts +++ b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts @@ -40,10 +40,10 @@ export const styles = css` table { border-collapse: collapse; + display: block; height: 100%; - min-width: 100vw; table-layout: fixed; - width: auto; + width: 100%; } thead, @@ -56,6 +56,8 @@ export const styles = css` thead { background-color: var(--sys-log-viewer-color-table-header-bg); color: var(--sys-log-viewer-color-table-header-text); + display: block; + width: 100%; } tr { @@ -63,6 +65,7 @@ export const styles = css` display: grid; justify-content: flex-start; width: 100%; + will-change: transform; } .log-row--warning { @@ -98,13 +101,29 @@ export const styles = css` color: var(--text-color); } - .log-row--nowrap .cell-content { + .log-row .cell-content { overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; } - tr:hover > td { + .log-row--nowrap .cell-content { + white-space: nowrap; + } + + tbody tr::before { + background-color: transparent; + bottom: 0; + content: ''; + display: block; + left: 0; + position: absolute; + right: 0; + top: 0; + width: 100%; + z-index: -1; + } + + tbody tr:hover::before { background-color: rgba(var(--md-sys-inverse-surface-rgb), 0.05); } @@ -129,6 +148,10 @@ export const styles = css` white-space: nowrap; } + th[title='severity'] { + visibility: hidden; + } + td { display: inline-flex; position: relative; @@ -139,8 +162,8 @@ export const styles = css` .jump-to-bottom-btn { --md-filled-button-container-elevation: 4; --md-filled-button-hover-container-elevation: 4; - bottom: 2rem; - font-family: 'Google Sans', sans-serif; + bottom: 2.25rem; + font-family: 'Roboto Flex', sans-serif; left: 50%; position: absolute; transform: translate(-50%); -- cgit v1.2.3 From 9b67bfe7a517681c5d233b4f3b6c91288eae0fed Mon Sep 17 00:00:00 2001 From: Amy Hu Date: Thu, 14 Sep 2023 20:16:57 +0000 Subject: pw_web: Fix leading white spaces, scrollbar size, and filters in quotes Fixed: 298096966, 298101185, 298101502 Change-Id: I77f2799b9ec3fa888c1799129129eef0c9947c7d Reviewed-on: https://pigweed-review.googlesource.com/c/pigweed/pigweed/+/170811 Reviewed-by: Luis Flores Reviewed-by: Anthony DiGirolamo Presubmit-Verified: CQ Bot Account Commit-Queue: Amy Hu --- .../src/components/log-list/log-list.styles.ts | 24 +++++++++++++--------- 1 file changed, 14 insertions(+), 10 deletions(-) (limited to 'pw_web/log-viewer/src/components/log-list/log-list.styles.ts') diff --git a/pw_web/log-viewer/src/components/log-list/log-list.styles.ts b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts index 7f95c1d96..5057b4dd9 100644 --- a/pw_web/log-viewer/src/components/log-list/log-list.styles.ts +++ b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts @@ -102,12 +102,14 @@ export const styles = css` } .log-row .cell-content { + display: inline-flex; overflow: hidden; text-overflow: ellipsis; + white-space: pre-wrap; } .log-row--nowrap .cell-content { - white-space: nowrap; + white-space: pre; } tbody tr::before { @@ -159,6 +161,12 @@ export const styles = css` align-items: flex-start; } + .cell-text { + line-height: normal; + text-overflow: ellipsis; + overflow: hidden; + } + .jump-to-bottom-btn { --md-filled-button-container-elevation: 4; --md-filled-button-hover-container-elevation: 4; @@ -265,6 +273,7 @@ export const styles = css` } ::-webkit-scrollbar { + box-shadow: inset 0 0 2rem 2rem var(--md-sys-color-surface-container-low); -webkit-appearance: auto; } @@ -273,30 +282,25 @@ export const styles = css` } ::-webkit-scrollbar-thumb { - min-height: 3rem; - } - - ::-webkit-scrollbar-thumb:horizontal { border-radius: 20px; box-shadow: inset 0 0 2rem 2rem var(--md-sys-color-outline-variant); border: inset 3px transparent; + } + + ::-webkit-scrollbar-thumb:horizontal { border-top: inset 4px transparent; } ::-webkit-scrollbar-thumb:vertical { - border-radius: 20px; - box-shadow: inset 0 0 2rem 2rem var(--md-sys-color-outline-variant); - border: inset 3px transparent; border-left: inset 4px transparent; + height: calc(100% / 3); } ::-webkit-scrollbar-track:horizontal { - box-shadow: inset 0 0 2rem 2rem var(--md-sys-color-surface-container-low); border-top: solid 1px var(--md-sys-color-outline-variant); } ::-webkit-scrollbar-track:vertical { - box-shadow: inset 0 0 2rem 2rem var(--md-sys-color-surface-container-low); border-left: solid 1px var(--md-sys-color-outline-variant); } `; -- cgit v1.2.3 From 0c5eb3d4c354879c0393dd85b7e577ee5662ca2e Mon Sep 17 00:00:00 2001 From: Luis Flores Date: Mon, 18 Sep 2023 21:31:18 +0000 Subject: pw_web: Improve scrolling behavior Changelist - Enable/disable autoscroll based on scroll direction - Add transition to jump-to-bottom button and bottom overflow indicator Bug: b/298097109 Change-Id: I95b11dda409eeee4482937c20bed1b003e5a9239 Reviewed-on: https://pigweed-review.googlesource.com/c/pigweed/pigweed/+/171290 Reviewed-by: Amy Hu Presubmit-Verified: CQ Bot Account Commit-Queue: Luis Flores Reviewed-by: Asad Memon --- .../src/components/log-list/log-list.styles.ts | 28 ++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) (limited to 'pw_web/log-viewer/src/components/log-list/log-list.styles.ts') diff --git a/pw_web/log-viewer/src/components/log-list/log-list.styles.ts b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts index 5057b4dd9..92b336ef7 100644 --- a/pw_web/log-viewer/src/components/log-list/log-list.styles.ts +++ b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts @@ -140,8 +140,7 @@ export const styles = css` } th[hidden], - td[hidden], - .jump-to-bottom-btn[hidden] { + td[hidden] { display: none; } @@ -172,9 +171,9 @@ export const styles = css` --md-filled-button-hover-container-elevation: 4; bottom: 2.25rem; font-family: 'Roboto Flex', sans-serif; - left: 50%; position: absolute; - transform: translate(-50%); + place-self: center; + transform: translateY(15%) scale(0.9); } .resize-handle { @@ -272,6 +271,27 @@ export const styles = css` outline: 1px solid var(--sys-log-viewer-color-table-mark); } + .jump-to-bottom-btn, + .bottom-indicator { + opacity: 0; + transition: + opacity 100ms ease, + transform 100ms ease, + visibility 100ms ease; + visibility: hidden; + } + + .jump-to-bottom-btn[data-visible='true'], + .bottom-indicator[data-visible='true'] { + opacity: 1; + transform: translateY(0) scale(1); + transition: + opacity 250ms ease, + transform 250ms ease, + 250ms ease; + visibility: visible; + } + ::-webkit-scrollbar { box-shadow: inset 0 0 2rem 2rem var(--md-sys-color-surface-container-low); -webkit-appearance: auto; -- cgit v1.2.3 From cf7a170f1a920a887e9fb64f34f431d402ee920b Mon Sep 17 00:00:00 2001 From: Luis Flores Date: Fri, 6 Oct 2023 16:47:21 +0000 Subject: pw_web: Enable manual color scheme setting Changelist: - Enable setting the color scheme manually with the `colorscheme` attribute/`colorScheme` property - Save manually-set color scheme in local storage - Move theming CSS variables to `themes/` directory - Fix a bug where clearing logs didn't work when the search field is empty - Fix a bug where the horizontal table scrolling indicator was rendering incorrectly Bug: b/301498553 Change-Id: I3a055aeee65ff7d8e49461d5818a09995b093295 Reviewed-on: https://pigweed-review.googlesource.com/c/pigweed/pigweed/+/173630 Reviewed-by: Amy Hu Reviewed-by: Asad Memon Commit-Queue: Luis Flores --- .../src/components/log-list/log-list.styles.ts | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) (limited to 'pw_web/log-viewer/src/components/log-list/log-list.styles.ts') diff --git a/pw_web/log-viewer/src/components/log-list/log-list.styles.ts b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts index 92b336ef7..cde2c08e9 100644 --- a/pw_web/log-viewer/src/components/log-list/log-list.styles.ts +++ b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts @@ -126,7 +126,10 @@ export const styles = css` } tbody tr:hover::before { - background-color: rgba(var(--md-sys-inverse-surface-rgb), 0.05); + background-color: rgba( + var(--sys-log-viewer-color-table-row-highlight), + 0.05 + ); } th, @@ -167,8 +170,6 @@ export const styles = css` } .jump-to-bottom-btn { - --md-filled-button-container-elevation: 4; - --md-filled-button-hover-container-elevation: 4; bottom: 2.25rem; font-family: 'Roboto Flex', sans-serif; position: absolute; @@ -195,9 +196,9 @@ export const styles = css` } .resize-handle:hover { - background-color: var(--md-sys-color-primary); + background-color: var(--sys-log-viewer-color-primary); mix-blend-mode: unset; - outline: 1px solid var(--md-sys-color-primary); + outline: 1px solid var(--sys-log-viewer-color-primary); } .resize-handle::before { @@ -267,7 +268,7 @@ export const styles = css` mark { background-color: var(--sys-log-viewer-color-table-mark); border-radius: 2px; - color: var(--md-sys-color-on-primary-container); + color: var(--sys-log-viewer-color-table-mark); outline: 1px solid var(--sys-log-viewer-color-table-mark); } @@ -283,13 +284,10 @@ export const styles = css` .jump-to-bottom-btn[data-visible='true'], .bottom-indicator[data-visible='true'] { - opacity: 1; - transform: translateY(0) scale(1); transition: opacity 250ms ease, transform 250ms ease, 250ms ease; - visibility: visible; } ::-webkit-scrollbar { -- cgit v1.2.3 From a96389142d68f634c8645b186d93573b391e3fff Mon Sep 17 00:00:00 2001 From: Luis Flores Date: Wed, 11 Oct 2023 22:03:48 +0000 Subject: pw_web: Fix invisible jump button Changelist: - Adds back removed styles for jump-to-bottom button - Improves CSS grid performance when updating width values Change-Id: Ic8e866f2765ede6331a3ceb511c6dbce3c3bd844 Reviewed-on: https://pigweed-review.googlesource.com/c/pigweed/pigweed/+/175330 Presubmit-Verified: CQ Bot Account Reviewed-by: Amy Hu Commit-Queue: Luis Flores --- pw_web/log-viewer/src/components/log-list/log-list.styles.ts | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'pw_web/log-viewer/src/components/log-list/log-list.styles.ts') diff --git a/pw_web/log-viewer/src/components/log-list/log-list.styles.ts b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts index cde2c08e9..6dabfb4a0 100644 --- a/pw_web/log-viewer/src/components/log-list/log-list.styles.ts +++ b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts @@ -63,6 +63,7 @@ export const styles = css` tr { border-bottom: 1px solid var(--sys-log-viewer-color-table-cell-outline); display: grid; + grid-template-columns: var(--column-widths); justify-content: flex-start; width: 100%; will-change: transform; @@ -284,10 +285,13 @@ export const styles = css` .jump-to-bottom-btn[data-visible='true'], .bottom-indicator[data-visible='true'] { + opacity: 1; + transform: translateY(0) scale(1); transition: opacity 250ms ease, transform 250ms ease, 250ms ease; + visibility: visible; } ::-webkit-scrollbar { -- cgit v1.2.3 From 724fe756ce247ee49addab1afdd5412da1afc989 Mon Sep 17 00:00:00 2001 From: Luis Flores Date: Thu, 19 Oct 2023 15:01:45 +0000 Subject: pw_web: Reduce table cell padding Changelist: - Reduces default padding for table cells to increase row density - Creates a CSS variable for Log List cell padding and icon size - Fixes search highlight strings missing text color Bug: b/305022558 Change-Id: Ie8317c2c8c289dc93ed9204843e19b9d6f87af0d Reviewed-on: https://pigweed-review.googlesource.com/c/pigweed/pigweed/+/176690 Reviewed-by: Amy Hu Presubmit-Verified: CQ Bot Account Reviewed-by: Asad Memon Commit-Queue: Luis Flores --- .../src/components/log-list/log-list.styles.ts | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) (limited to 'pw_web/log-viewer/src/components/log-list/log-list.styles.ts') diff --git a/pw_web/log-viewer/src/components/log-list/log-list.styles.ts b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts index 6dabfb4a0..a10b36360 100644 --- a/pw_web/log-viewer/src/components/log-list/log-list.styles.ts +++ b/pw_web/log-viewer/src/components/log-list/log-list.styles.ts @@ -88,9 +88,9 @@ export const styles = css` --icon-color: var(--sys-log-viewer-color-debug); } - .log-row--warning .cell-content--icon, - .log-row--error .cell-content--icon, - .log-row--critical .cell-content--icon { + .log-row--warning .cell-icon, + .log-row--error .cell-icon, + .log-row--critical .cell-icon { color: var(--icon-color); } @@ -138,7 +138,7 @@ export const styles = css` display: block; grid-row: 1; overflow: hidden; - padding: 0.5rem 1rem; + padding: var(--sys-log-viewer-table-cell-padding); text-align: left; text-overflow: ellipsis; } @@ -212,10 +212,6 @@ export const styles = css` width: 1rem; } - .cell-content--icon { - padding-top: 0.125rem; - } - .cell-icon { display: block; font-variation-settings: @@ -223,8 +219,11 @@ export const styles = css` 'wght' 400, 'GRAD' 200, 'opsz' 58; - font-size: 1.25rem; + font-size: var(--sys-log-viewer-table-cell-icon-size); user-select: none; + display: grid; + place-content: center; + place-items: center; } .overflow-indicator { @@ -268,8 +267,8 @@ export const styles = css` mark { background-color: var(--sys-log-viewer-color-table-mark); - border-radius: 2px; - color: var(--sys-log-viewer-color-table-mark); + border-radius: 4px; + color: var(--sys-log-viewer-color-table-mark-text); outline: 1px solid var(--sys-log-viewer-color-table-mark); } -- cgit v1.2.3