Add UX experiments page
diff --git a/ui/src/plugins/dev.perfetto.UxPlayground/index.ts b/ui/src/plugins/dev.perfetto.UxPlayground/index.ts new file mode 100644 index 0000000..471b0dc --- /dev/null +++ b/ui/src/plugins/dev.perfetto.UxPlayground/index.ts
@@ -0,0 +1,39 @@ +// Copyright (C) 2026 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 './styles.scss'; +import m from 'mithril'; +import type {App} from '../../public/app'; +import type {PerfettoPlugin} from '../../public/plugin'; +import {UxPlaygroundPage} from './ux_playground_page'; + +// A scratch page for experimenting with UX designs. Add new experiments in +// ux_playground_page.ts. Reachable at #!/ux. +export default class implements PerfettoPlugin { + static readonly id = 'dev.perfetto.UxPlayground'; + + static onActivate(app: App): void { + app.pages.registerPage({ + route: '/ux', + render: (subpage) => m(UxPlaygroundPage, {app, subpage}), + }); + app.sidebar.addMenuItem({ + section: 'settings', + text: 'UX Playground', + href: '#!/ux', + icon: 'science', + sortOrder: 99, + }); + } +}
diff --git a/ui/src/plugins/dev.perfetto.UxPlayground/styles.scss b/ui/src/plugins/dev.perfetto.UxPlayground/styles.scss new file mode 100644 index 0000000..d11b2c5 --- /dev/null +++ b/ui/src/plugins/dev.perfetto.UxPlayground/styles.scss
@@ -0,0 +1,19 @@ +// Copyright (C) 2026 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. + +.pf-ux-playground { + height: 100%; + overflow: auto; + padding: 24px; +}
diff --git a/ui/src/plugins/dev.perfetto.UxPlayground/ux_playground_page.ts b/ui/src/plugins/dev.perfetto.UxPlayground/ux_playground_page.ts new file mode 100644 index 0000000..871e0c7 --- /dev/null +++ b/ui/src/plugins/dev.perfetto.UxPlayground/ux_playground_page.ts
@@ -0,0 +1,30 @@ +// Copyright (C) 2026 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 type {App} from '../../public/app'; + +export interface UxPlaygroundPageAttrs { + readonly app: App; + readonly subpage?: string; +} + +// Blank scratch page for experimenting with UX designs. +export class UxPlaygroundPage + implements m.ClassComponent<UxPlaygroundPageAttrs> +{ + view() { + return m('.pf-ux-playground'); + } +}