Add text input widget

Bug: 270688694
Change-Id: Ia1476b6da61c2e32df8b78bad2eb57ec3cdc93c1

ui/src/assets/perfetto.scss

@@ -28,3 +28,4 @@
 @import "widgets_page";
 @import "widgets/button";
 @import "widgets/checkbox";
+@import "widgets/text_input";

ui/src/assets/widgets/text_input.scss

@@ -0,0 +1,51 @@
+// Copyright (C) 2023 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-text-input {
+  font-family: $pf-font;
+  font-size: inherit;
+  outline: none; // Disable the default outline
+  border: none; // Disable the default border
+  border-bottom: solid 1px $pf-minimal-foreground; // Thin underline
+  background: none;
+  transition: border $pf-anim-timing, box-shadow $pf-anim-timing,
+    background $pf-anim-timing;
+
+  // Round only the top corners to avoid rounding the edges of the underline
+  border-radius: $pf-border-radius $pf-border-radius 0 0;
+
+  // The gentle hover effect indicates this component is interactive
+  &:hover {
+    background: $pf-minimal-background-hover;
+  }
+
+  &:focus {
+    background: $pf-minimal-background-hover;
+    border-bottom: solid 1px $pf-primary-background;
+
+    // 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 $pf-primary-background;
+  }
+
+  &[disabled] {
+    border-bottom-color: $pf-minimal-foreground-disabled;
+    color: $pf-minimal-foreground-disabled;
+    background: $pf-minimal-background-disabled;
+    cursor: not-allowed;
+  }
+}

ui/src/assets/widgets_page.scss

@@ -14,6 +14,7 @@
 
 .widgets-page {
   padding: 20px;
+  font-size: 16px;
 
   h1 {
     margin: 32px 0 0 0;

ui/src/frontend/widgets/text_input.ts

@@ -0,0 +1,30 @@
+// Copyright (C) 2023 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 * as m from 'mithril';
+
+export interface TextInputAttrs {
+  [htmlAttrs: string]: any;
+}
+
+// For now, this component is just a simple wrapper around a plain old input
+// element, which does no more than specify a class. However, in the future we
+// might want to add more features such as an optional icon or button (e.g. a
+// clear button), at which point the benefit of having this as a component would
+// become more apparent.
+export class TextInput implements m.ClassComponent<TextInputAttrs> {
+  view({attrs}: m.CVnode<TextInputAttrs>) {
+    return m('input.pf-text-input', attrs);
+  }
+}

ui/src/frontend/widgets_page.ts

@@ -18,6 +18,7 @@ import {globals} from './globals';
 import {createPage} from './pages';
 import {Button} from './widgets/button';
 import {Checkbox} from './widgets/checkbox';
+import {TextInput} from './widgets/text_input';
 
 interface WidgetShowcaseAttrs {
   initialOpts: any;
@@ -102,6 +103,17 @@ export const WidgetsPage = createPage({
             disabled: false,
           },
         }),
+        m('h2', 'Text Input'),
+        m(WidgetShowcase, {
+          renderWidget: ({placeholder, ...rest}) => m(TextInput, {
+            placeholder: placeholder ? 'Placeholder...' : '',
+            ...rest,
+          }),
+          initialOpts: {
+            placeholder: true,
+            disabled: false,
+          },
+        }),
     );
   },
 });