docs: Add v0 UI plugins doc page
Change-Id: Idf14e4b4bb2758f281786255a0485b8d6d80c5fe
diff --git a/docs/contributing/ui-plugins.md b/docs/contributing/ui-plugins.md
new file mode 100644
index 0000000..7a674e8
--- /dev/null
+++ b/docs/contributing/ui-plugins.md
@@ -0,0 +1,81 @@
+# UI plugins
+The Perfetto UI can be extended with plugins. These plugins are shipped
+part of Perfetto.
+
+## Create a plugin
+The guide below explains how to create a plugin for the Perfetto UI.
+
+### Prepare for UI development
+First we need to prepare the UI development environment.
+You will need to use a MacOS or Linux machine.
+Follow the steps below or see the
+[Getting Started](./getting-started) guide for more detail.
+
+```sh
+git clone https://android.googlesource.com/platform/external/perfetto/
+cd perfetto
+./tool/install-build-deps --ui
+```
+
+### Copy the plugin skeleton
+```sh
+cp -r ui/plugins/com.example.Skeleton ui/plugins/<your-plugin-name>
+```
+Now edit `ui/plugins/<your-plugin-name>/index.ts`.
+Search for all instances of `SKELETON: <instruction>` in the file and
+follow the instructions.
+
+Notes on naming:
+- Don't name the directory `XyzPlugin` just `Xyz`.
+- The `pluginId` and directory name must match.
+- Plugins should be prefixed with the reversed components of a domain
+ name you control. For example if `example.com` is your domain your
+ plugin should be named `com.example.Foo`.
+- Core plugins maintained by the Perfetto team should use
+ `dev.perfetto.Foo`.
+
+### Start the dev server
+```sh
+./ui/run-dev-server
+```
+Now navigate to [](http://localhost:10000/settings)
+
+### Upload your plugin for review
+- Update `ui/plugins/<your-plugin-name>/OWNERS` to include your email.
+- Follow the [Contributing](./getting-started#contributing)
+ instructions to upload your CL to the codereview tool.
+- Once uploaded add `hjd@google.com` as a reviewer for your CL.
+
+## Plugin extension points
+Plugins can extend a handful of specific places in the UI. The sections
+below show these extension points and give examples of how they can be
+used.
+
+### Commands
+TBD
+
+### Tracks
+TBD
+
+### Detail tabs
+TBD
+
+### Metric Visualisations
+TBD
+
+## Guide to the plugin API
+TBD
+
+## Default plugins
+TBD
+
+## Misc notes
+- Plugins must be licensed under
+ [Apache-2.0](https://spdx.org/licenses/Apache-2.0.html)
+ the same as all other code in the repository.
+- Plugins are the responsibility of the OWNERS of that plugin to
+ maintain, not the responsibility of the Perfetto team. All
+ efforts will be made to keep the plugin API stable and existing
+ plugins working however plugins that remain unmaintained for long
+ periods of time will be disabled and ultimately deleted.
+
diff --git a/docs/toc.md b/docs/toc.md
index 6fe3ae9..b0d8fc1 100644
--- a/docs/toc.md
+++ b/docs/toc.md
@@ -75,11 +75,12 @@
* [Getting started](contributing/getting-started.md)
* [Build instructions](contributing/build-instructions.md)
* [Running tests](contributing/testing.md)
- * [Common tasks](contributing/common-tasks.md)
+ * [UI plugins](contributing/ui-plugins.md)
+ * [UI development hints](contributing/ui-development.md)
* [Embedding Perfetto](contributing/embedding.md)
* [Releasing the SDK](contributing/sdk-releasing.md)
* [Chrome branches](contributing/chrome-branches.md)
- * [UI development](contributing/ui-development.md)
+ * [Common tasks](contributing/common-tasks.md)
* [Press](contributing/perfetto-in-the-press.md)
* [Design documents](#)
diff --git a/ui/src/plugins/com.example.Skeleton/OWNERS b/ui/src/plugins/com.example.Skeleton/OWNERS
new file mode 100644
index 0000000..1acc35b
--- /dev/null
+++ b/ui/src/plugins/com.example.Skeleton/OWNERS
@@ -0,0 +1 @@
+# SKELETON: Add your email to this file!
diff --git a/ui/src/plugins/com.example.Skeleton/index.ts b/ui/src/plugins/com.example.Skeleton/index.ts
new file mode 100644
index 0000000..c7735c0
--- /dev/null
+++ b/ui/src/plugins/com.example.Skeleton/index.ts
@@ -0,0 +1,41 @@
+// 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 {
+ EngineProxy,
+ PluginContext,
+ Store,
+ TracePlugin,
+} from '../../public';
+
+interface State {}
+
+// SKELETON: Rename this class to match your plugin.
+class Skeleton implements TracePlugin {
+ static migrate(_initialState: unknown): State {
+ return {};
+ }
+
+ constructor(_store: Store<State>, _engine: EngineProxy) {}
+
+ dispose(): void {}
+}
+
+export const plugin = {
+ // SKELETON: Update pluginId to match the directory of the plugin.
+ pluginId: 'com.example.Skeleton',
+ activate: (ctx: PluginContext) => {
+ ctx.registerTracePluginFactory(Skeleton);
+ },
+};
