ui: Add combined android log filter input

ui/src/assets/perfetto.scss

@@ -46,6 +46,7 @@
 @import "widgets/editor";
 @import "widgets/empty_state";
 @import "widgets/error";
+@import "widgets/filter_input";
 @import "widgets/flamegraph";
 @import "widgets/form";
 @import "widgets/grid_layout";

ui/src/assets/theme.scss

@@ -16,6 +16,13 @@ $border-radius: 2px;
 $border-radius-large: 4px;
 $anim-timing: 150ms cubic-bezier(0.4, 0, 0.2, 1);
 
+@mixin background-surface {
+  background-color: var(--pf-color-background);
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E");
+  background-size: 100%;
+}
+
+$box-shadow-0: 0px 1px 3px var(--pf-color-box-shadow);
 $box-shadow-1: 0px 2px 6px var(--pf-color-box-shadow);
 $box-shadow-2: 0px 4px 12px var(--pf-color-box-shadow);
 $box-shadow-3: 0px 8px 16px var(--pf-color-box-shadow);

ui/src/assets/widgets/details_shell.scss

@@ -28,6 +28,7 @@
     gap: 6px;
     padding: 8px 8px 5px 8px;
     border-bottom: 1px solid var(--pf-color-border);
+    background: var(--pf-color-background);
 
     .pf-header-title {
       font-size: 18px;
@@ -53,6 +54,19 @@
     }
   }
 
+  &.pf-fill-buttons-space {
+    .pf-header-bar {
+      .pf-header-description {
+        flex-grow: 0;
+        flex-shrink: 1;
+      }
+
+      .pf-header-buttons {
+        flex-grow: 1;
+      }
+    }
+  }
+
   .pf-content {
     flex-grow: 1;
     overflow-x: auto;

ui/src/assets/widgets/empty_state.scss

@@ -22,6 +22,7 @@
   user-select: none;
   margin: auto;
   justify-content: center;
+  color: var(--pf-color-text-muted);
 
   &__main-icon {
     font-size: 5em; // Size of the icon is relative to the font size.

ui/src/assets/widgets/filter_input.scss

@@ -0,0 +1,83 @@
+// Copyright (C) 2025 The Android Open Source Project
+//
+// 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
+//
+//      http://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 "../theme";
+
+.pf-filter-input {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  font-size: inherit;
+  outline: none; // Disable the default outline
+  border: none; // Disable the default border
+  border-bottom: solid 1px var(--pf-color-border); // Thin underline
+  background: none;
+  transition:
+    border $anim-timing,
+    box-shadow $anim-timing,
+    background $anim-timing;
+
+  // Round only the top corners to avoid rounding the edges of the underline
+  border-radius: $border-radius $border-radius 0 0;
+
+  input {
+    outline: none;
+    border: none;
+    background: none;
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+    flex-grow: 1;
+  }
+
+  i {
+    cursor: pointer;
+    font-size: smaller;
+    margin-left: 2px;
+  }
+
+  &__scroller {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    overflow-y: auto;
+    max-height: 300px;
+  }
+
+  &__option-row {
+    overflow: hidden;
+    cursor: pointer;
+    border-radius: 2px;
+    flex: 0 0 auto;
+
+    &--selected {
+      background: color_active(transparent);
+    }
+  }
+
+  // The gentle hover effect indicates this component is interactive
+  &:hover {
+    background: color_hover(transparent);
+  }
+
+  &:focus-within {
+    background: color_hover(transparent);
+    border-bottom: solid 1px var(--pf-color-primary);
+
+    // The box-shadow thickens the bottom border, without adding to the height.
+    // This is the same technique used by materializecss:
+    // See https://materializecss.com/text-inputs.html
+    box-shadow: 0 1px 0 var(--pf-color-primary);
+  }
+}

ui/src/assets/widgets/grid.scss

@@ -101,11 +101,16 @@ $border-3: 2px solid var(--pf-color-border);
 }
 
 .pf-grid {
+  display: flex;
+  flex-direction: column;
+
   font-family: var(--pf-font-compact);
   font-size: 14px;
   overflow: auto;
-  align-items: flex-start;
   isolation: isolate; // Improves layerization performance.
+  background-color: var(--pf-color-background);
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.2'/%3E%3C/svg%3E");
+  background-size: 100%;
 
   // If fill height is set, the grid should fill the height of its parent, and
   // the table content should scroll, otherwise it takes the height of the table
@@ -115,14 +120,16 @@ $border-3: 2px solid var(--pf-color-border);
   }
 
   &__header {
+    flex: 0 0 auto;
+
     display: flex;
     flex-direction: column;
-    background: var(--pf-color-background);
     border-bottom: $border-1;
     min-width: max-content;
     position: sticky;
     top: 0;
     z-index: 1; // Ensure header is above body rows when scrolling.
+    background: var(--pf-color-background);
   }
 
   &__puck {
@@ -131,6 +138,8 @@ $border-3: 2px solid var(--pf-color-border);
 
   &__body {
     min-width: max-content;
+    background: var(--pf-color-background);
+    flex: 0 0 auto;
 
     .pf-grid__row {
       &:hover {
@@ -140,6 +149,10 @@ $border-3: 2px solid var(--pf-color-border);
     }
   }
 
+  &__empty-state {
+    margin-block: auto;
+  }
+
   &__row {
     display: flex;
     align-items: stretch;
@@ -152,6 +165,10 @@ $border-3: 2px solid var(--pf-color-border);
     position: relative; // Positioned element in order to place absolutely positioned children relative to this.
     border-right: $border-2;
 
+    &:last-child {
+      margin-right: 10px;
+    }
+
     &[draggable="true"] {
       cursor: grab;
 

ui/src/components/widgets/data_grid/data_grid.ts

@@ -22,6 +22,7 @@ import {Anchor} from '../../../widgets/anchor';
 import {Box} from '../../../widgets/box';
 import {Button} from '../../../widgets/button';
 import {Chip} from '../../../widgets/chip';
+import {EmptyState} from '../../../widgets/empty_state';
 import {LinearProgress} from '../../../widgets/linear_progress';
 import {MenuDivider, MenuItem, MenuTitle} from '../../../widgets/menu';
 import {Stack, StackAuto} from '../../../widgets/stack';
@@ -824,6 +825,34 @@ export class DataGrid implements m.ClassComponent<DataGridAttrs> {
         onReady: (api) => {
           this.gridApi = api;
         },
+        emptyState:
+          rows?.totalRows === 0
+            ? m(
+                EmptyState,
+                {
+                  icon: filters.length > 0 ? 'filter_list_off' : 'database',
+                  title:
+                    filters.length > 0
+                      ? 'No results match your filters'
+                      : 'No data available',
+                  fillHeight: true,
+                },
+                filters.length > 0 &&
+                  m(Button, {
+                    label: 'Clear all filters',
+                    onclick: () => {
+                      // Clear all filters
+                      filters.forEach((_, index) => {
+                        onFilterRemove(index);
+                      });
+                      // Reset sorting if we have control
+                      if (onSort !== noOp) {
+                        onSort({direction: 'UNSORTED'});
+                      }
+                    },
+                  }),
+              )
+            : undefined,
       }),
     );
   }

ui/src/plugins/com.android.AndroidLog/index.ts

@@ -31,12 +31,12 @@ const VERSION = 1;
 const DEFAULT_STATE: AndroidLogPluginState = {
   version: VERSION,
   filter: {
-    // The first two log priorities are ignored.
-    minimumLevel: 2,
+    minimumLevel: undefined,
     tags: [],
     textEntry: '',
     hideNonMatching: true,
     machineExcludeList: [],
+    pids: [],
   },
 };
 

ui/src/plugins/com.android.AndroidLog/logs_panel.scss

@@ -20,6 +20,10 @@
   font-size: 11px;
   font-family: var(--pf-font-monospace);
 
+  &__filter {
+    flex: 1;
+  }
+
   &__row {
     &--debug {
       color: log-level-color(hsl(155, 79%, 51%), 30%);