Use DetailsShell in ftrace panel, logs panel, and query panel.
Provides a more consistent look and feel to details panels.
Also fixes bug where horizontal scrolling in analyse page was broken.
Bug: 286842471
Change-Id: I789cdc0bc6117b8e522ae5bfb0d3fd75c1b17e95
diff --git a/ui/src/frontend/widgets/callout.ts b/ui/src/frontend/widgets/callout.ts
new file mode 100644
index 0000000..cd583af
--- /dev/null
+++ b/ui/src/frontend/widgets/callout.ts
@@ -0,0 +1,36 @@
+// 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 m from 'mithril';
+
+import {Icon} from './icon';
+
+interface CalloutAttrs {
+ icon?: string;
+ // Remaining attributes forwarded to the underlying HTML <button>.
+ [htmlAttrs: string]: any;
+}
+
+export class Callout implements m.ClassComponent<CalloutAttrs> {
+ view({attrs, children}: m.CVnode<CalloutAttrs>) {
+ const {icon, ...htmlAttrs} = attrs;
+
+ return m(
+ '.pf-callout',
+ {...htmlAttrs},
+ icon && m(Icon, {className: 'pf-left-icon', icon}),
+ children,
+ );
+ }
+}
