Merge remote-tracking branch 'goog/upstream-main' into update231018

Bug: 277108894
Test: Test: CHQTS, build rpc_world, mm, simulation tests, check logcat
Change-Id: I04994ccad602eefcb2e5945abae2a1cd0525b69f

2 files changed, 19 insertions, 42 deletions

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 {
diff --git a/pw_web/log-viewer/src/components/log-list/log-list.ts b/pw_web/log-viewer/src/components/log-list/log-list.ts
index 894f77dbc..ca450fc94 100644
--- a/pw_web/log-viewer/src/components/log-list/log-list.ts
+++ b/pw_web/log-viewer/src/components/log-list/log-list.ts
@@ -129,7 +129,7 @@ export class LogList extends LitElement {
     }
 
     if (changedProperties.has('columnData')) {
-      this.updateColumnWidths();
+      this.updateColumnWidths(this.generateGridTemplateColumns());
     }
   }
 
@@ -139,36 +139,18 @@ export class LogList extends LitElement {
     this._tableBody.removeEventListener('rangeChanged', this.onRangeChanged);
   }
 
-  private onTableRowAdded = (mutations: MutationRecord[]) => {
-    mutations.forEach((mutation) => {
-      // Check for added nodes
-      if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
-        const addedRows = Array.from(mutation.addedNodes).filter(
-          (node) => node.nodeName === 'TR',
-        ) as HTMLTableRowElement[];
-
-        if (addedRows.length <= 0) {
-          return;
-        }
-
-        // Force repaint to prevent flickering
-        this._table.offsetTop;
-
-        // Update header row alongside newly-added rows
-        const rowsToUpdate = [this._tableRows[0], ...addedRows];
-
-        if (!this._autosizeLocked) {
-          this.autosizeColumns();
-        } else {
-          this.updateColumnWidths(rowsToUpdate);
-        }
+  private onTableRowAdded = () => {
+    if (!this._autosizeLocked) {
+      this.autosizeColumns();
+    }
 
-        // Disable auto-sizing once a certain number of updates to the logs array have been made
-        if (this.logUpdateCount >= this.AUTOSIZE_LIMIT) {
-          this._autosizeLocked = true;
-        }
-      }
-    });
+    // Disable auto-sizing once a certain number of updates to the logs array have been made
+    if (this.logUpdateCount >= this.AUTOSIZE_LIMIT) {
+      this._autosizeLocked = true;
+    }
+    if (!this._autosizeLocked) {
+      this.autosizeColumns();
+    }
   };
 
   /** Called when the Lit virtualizer updates its range of entries. */
@@ -223,8 +205,6 @@ export class LogList extends LitElement {
         }
       });
     });
-
-    this.updateColumnWidths(rows);
   };
 
   private generateGridTemplateColumns(
@@ -258,12 +238,8 @@ export class LogList extends LitElement {
     return gridTemplateColumns.trim();
   }
 
-  private updateColumnWidths(rows: HTMLTableRowElement[] = this._tableRows) {
-    const gridTemplateColumns = this.generateGridTemplateColumns();
-
-    for (const row of rows) {
-      row.style.gridTemplateColumns = gridTemplateColumns;
-    }
+  private updateColumnWidths(gridTemplateColumns: string) {
+    this.style.setProperty('--column-widths', gridTemplateColumns);
   }
 
   /**
@@ -423,10 +399,7 @@ export class LogList extends LitElement {
       columnIndex,
     );
 
-    // Update the grid layout for each row
-    this._tableRows.forEach((row) => {
-      row.style.gridTemplateColumns = gridTemplateColumns;
-    });
+    this.updateColumnWidths(gridTemplateColumns);
   }
 
   render() {