ui: Add Zen mode

aMayzner · aMayzner · commit c8dd1cd917ee · 2025-11-19T10:34:41.000Z
diff --git a/ui/src/assets/topbar.scss b/ui/src/assets/topbar.scss
@@ -35,6 +35,21 @@
     }
   }
 
+  // Zen mode: hide topbar by default, show when it has focus or when explicitly shown
+  &.pf-zen-mode {
+    display: none;
+
+    // Show topbar when explicitly marked to show (has text, pending focus, or non-search mode)
+    &.pf-zen-mode--show {
+      display: flex;
+    }
+
+    // Always show topbar when it has focus (user is interacting with omnibox)
+    &:focus-within {
+      display: flex;
+    }
+  }
+
   &__error-box {
     position: absolute;
     right: 10px;
diff --git a/ui/src/core/app_impl.ts b/ui/src/core/app_impl.ts
@@ -126,6 +126,7 @@ export class AppImpl implements App {
   readonly startupCommandsSetting: Setting<CommandInvocation[]>;
   readonly enforceStartupCommandAllowlistSetting: Setting<boolean>;
   private _isInternalUser?: boolean;
+  private _zenModeEnabled = false;
 
   // This constructor is invoked only once, when frontend/index.ts invokes
   // AppMainImpl.initialize().
@@ -197,6 +198,16 @@ export class AppImpl implements App {
     };
   }
 
+  get zenModeEnabled(): boolean {
+    return this._zenModeEnabled;
+  }
+
+  toggleZenMode(): void {
+    this._zenModeEnabled = !this._zenModeEnabled;
+    // Zen mode controls sidebar existence
+    this.sidebar.toggleEnabled();
+  }
+
   openTraceFromFile(file: File) {
     return this.openTrace({type: 'FILE', file});
   }
diff --git a/ui/src/core/sidebar_manager.ts b/ui/src/core/sidebar_manager.ts
@@ -20,14 +20,14 @@ export type SidebarMenuItemInternal = SidebarMenuItem & {
 };
 
 export class SidebarManagerImpl implements SidebarManager {
-  readonly enabled: boolean;
+  private _enabled: boolean;
   private _visible: boolean;
   private lastId = 0;
 
   readonly menuItems = new Registry<SidebarMenuItemInternal>((m) => m.id);
 
   constructor(args: {disabled?: boolean; hidden?: boolean}) {
-    this.enabled = !args.disabled;
+    this._enabled = !args.disabled;
     this._visible = !args.hidden;
   }
 
@@ -39,12 +39,26 @@ export class SidebarManagerImpl implements SidebarManager {
     return this.menuItems.register(itemInt);
   }
 
+  public get enabled() {
+    return this._enabled;
+  }
+
   public get visible() {
     return this._visible;
   }
 
+  public toggleEnabled() {
+    this._enabled = !this._enabled;
+  }
+
   public toggleVisibility() {
-    if (!this.enabled) return;
+    // When sidebar is disabled, just enable it and make it visible
+    // (This typically happens when exiting zen mode via sidebar commands)
+    if (!this._enabled) {
+      this._enabled = true;
+      this._visible = true;
+      return;
+    }
     this._visible = !this._visible;
   }
 }
diff --git a/ui/src/core/trace_impl.ts b/ui/src/core/trace_impl.ts
@@ -314,6 +314,14 @@ export class TraceImpl implements Trace, Disposable {
     return this.app.isInternalUser;
   }
 
+  get zenModeEnabled(): boolean {
+    return this.app.zenModeEnabled;
+  }
+
+  toggleZenMode(): void {
+    this.app.toggleZenMode();
+  }
+
   get perfDebugging() {
     return this.app.perfDebugging;
   }
diff --git a/ui/src/core_plugins/dev.perfetto.CoreCommands/index.ts b/ui/src/core_plugins/dev.perfetto.CoreCommands/index.ts
@@ -205,6 +205,43 @@ export default class CoreCommands implements PerfettoPlugin {
       icon: 'folder_open',
     });
 
+    ctx.commands.registerCommand({
+      id: 'dev.perfetto.ToggleSidebar',
+      name: 'Toggle sidebar',
+      callback: () => {
+        const app = AppImpl.instance;
+        // If in zen mode, exit zen mode instead of just toggling sidebar
+        if (app.zenModeEnabled) {
+          app.toggleZenMode();
+        } else {
+          app.sidebar.toggleEnabled();
+        }
+      },
+    });
+
+    ctx.commands.registerCommand({
+      id: 'dev.perfetto.ToggleSidebarVisibility',
+      name: 'Toggle sidebar visibility',
+      callback: () => {
+        const app = AppImpl.instance;
+        // If in zen mode, exit zen mode instead of just toggling visibility
+        if (app.zenModeEnabled) {
+          app.toggleZenMode();
+        } else {
+          app.sidebar.toggleVisibility();
+        }
+      },
+    });
+
+    ctx.commands.registerCommand({
+      id: 'dev.perfetto.ToggleZenMode',
+      name: 'Toggle zen mode',
+      defaultHotkey: 'Shift+Z',
+      callback: () => {
+        AppImpl.instance.toggleZenMode();
+      },
+    });
+
     const OPEN_LEGACY_COMMAND_ID = 'dev.perfetto.OpenTraceInLegacyUi';
     ctx.commands.registerCommand({
       id: OPEN_LEGACY_COMMAND_ID,
diff --git a/ui/src/frontend/omnibox.ts b/ui/src/frontend/omnibox.ts
@@ -75,7 +75,8 @@ export class Omnibox implements m.ClassComponent<OmniboxAttrs> {
   }
 
   private renderPromptOmnibox(): m.Children {
-    const omnibox = AppImpl.instance.omnibox;
+    const app = AppImpl.instance;
+    const omnibox = app.omnibox;
     const prompt = assertExists(omnibox.pendingPrompt);
 
     let options: OmniboxOption[] | undefined = undefined;
@@ -120,7 +121,8 @@ export class Omnibox implements m.ClassComponent<OmniboxAttrs> {
 
   private renderCommandOmnibox(): m.Children {
     // Fuzzy-filter commands by the filter string.
-    const {commands, omnibox} = AppImpl.instance;
+    const app = AppImpl.instance;
+    const {commands, omnibox} = app;
     const filteredCmds = commands.fuzzyFilterCommands(omnibox.text);
 
     // Create an array of commands with attached heuristics from the recent
diff --git a/ui/src/frontend/timeline_page/timeline_page.ts b/ui/src/frontend/timeline_page/timeline_page.ts
@@ -57,12 +57,14 @@ class TimelinePage implements m.ClassComponent<TimelinePageAttrs> {
 
   view({attrs}: m.CVnode<TimelinePageAttrs>) {
     const {trace} = attrs;
+    const zenMode = AppImpl.instance.zenModeEnabled;
+    const showOverview = OVERVIEW_PANEL_FLAG.get() && !zenMode;
     return m(
       '.pf-timeline-page',
       m(
         TabPanel,
         {trace},
-        OVERVIEW_PANEL_FLAG.get() &&
+        showOverview &&
           m(Minimap, {
             trace,
             className: 'pf-timeline-page__overview',
diff --git a/ui/src/frontend/topbar.ts b/ui/src/frontend/topbar.ts
@@ -72,16 +72,18 @@ class TraceErrorIcon implements m.ClassComponent<TraceImplAttrs> {
 
 export interface TopbarAttrs {
   readonly trace?: TraceImpl;
+  readonly className?: string;
 }
 
 export class Topbar implements m.ClassComponent<TopbarAttrs> {
   view({attrs}: m.Vnode<TopbarAttrs>) {
-    const {trace} = attrs;
+    const {trace, className} = attrs;
     return m(
       '.pf-topbar',
       {
         className: classNames(
           !AppImpl.instance.sidebar.visible && 'pf-topbar--hide-sidebar',
+          className,
         ),
       },
       m(Omnibox, {trace}),
diff --git a/ui/src/frontend/ui_main.ts b/ui/src/frontend/ui_main.ts
@@ -13,9 +13,11 @@
 // limitations under the License.
 
 import m from 'mithril';
+import {classNames} from '../base/classnames';
 import {AppImpl} from '../core/app_impl';
 import {CookieConsent} from '../core/cookie_consent';
 import {featureFlags} from '../core/feature_flags';
+import {OmniboxMode} from '../core/omnibox_manager';
 import {LinearProgress} from '../widgets/linear_progress';
 import {maybeRenderFullscreenModalDialog} from '../widgets/modal';
 import {initCssConstants} from './css_constants';
@@ -57,17 +59,33 @@ export class UiMain implements m.ClassComponent {
       (trace?.engine.numRequestsPending ?? 0) > 0 ||
       taskTracker.hasPendingTasks();
 
+    const zenMode = app.zenModeEnabled;
+    const showStatusBar = showStatusBarFlag.get() && !zenMode;
+
+    // In zen mode, topbar visibility is controlled by CSS classes
+    // Show topbar when: not in search mode, has text, or should focus
+    const shouldShowTopbarInZenMode =
+      app.omnibox.mode !== OmniboxMode.Search ||
+      app.omnibox.text.length > 0 ||
+      app.omnibox.focusOmniboxNextRender;
+
     return m('main.pf-ui-main', [
-      m(Sidebar),
-      m(Topbar, {trace}),
+      app.sidebar.enabled && m(Sidebar),
+      m(Topbar, {
+        trace,
+        className: classNames(
+          zenMode && 'pf-zen-mode',
+          zenMode && shouldShowTopbarInZenMode && 'pf-zen-mode--show',
+        ),
+      }),
       m(LinearProgress, {
         className: 'pf-ui-main__loading',
         state: isSomethingLoading ? 'indeterminate' : 'none',
       }),
       m('.pf-ui-main__page-container', app.pages.renderPageForCurrentRoute()),
       m(CookieConsent),
       maybeRenderFullscreenModalDialog(),
-      showStatusBarFlag.get() && renderStatusBar(trace),
+      showStatusBar && renderStatusBar(trace),
       app.perfDebugging.renderPerfStats(),
     ]);
   }
diff --git a/ui/src/public/app.ts b/ui/src/public/app.ts
@@ -61,6 +61,16 @@ export interface App {
   // certain internal links or expose certain experimental features by default.
   readonly isInternalUser: boolean;
 
+  // True if zen mode is enabled. Zen mode hides the sidebar, overview,
+  // and status bar to provide a distraction-free viewing experience.
+  readonly zenModeEnabled: boolean;
+
+  /**
+   * Toggle zen mode on/off. Zen mode hides the sidebar, overview,
+   * and status bar to provide a distraction-free viewing experience.
+   */
+  toggleZenMode(): void;
+
   /**
    * Navigate to a new page.
    */
diff --git a/ui/src/public/sidebar.ts b/ui/src/public/sidebar.ts
@@ -43,6 +43,10 @@ export const SIDEBAR_SECTIONS = {
 export type SidebarSections = keyof typeof SIDEBAR_SECTIONS;
 
 export interface SidebarManager {
+  /**
+   * Whether the sidebar is enabled (rendered in DOM).
+   * When false, the sidebar is completely removed from rendering.
+   */
   readonly enabled: boolean;
 
   /**
@@ -53,13 +57,22 @@ export interface SidebarManager {
   addMenuItem(menuItem: SidebarMenuItem): void;
 
   /**
-   * Gets the current visibility of the sidebar.
+   * Gets the current visibility of the sidebar (CSS visibility).
+   * Different from enabled - when visible=false, sidebar is hidden but still in DOM.
    */
   get visible(): boolean;
 
   /**
-   * Toggles the visibility of the sidebar. Can only be called when
-   * `sidebarEnabled` returns `ENABLED`.
+   * Toggles whether the sidebar is enabled (rendered in DOM).
+   * When disabled, the sidebar is completely removed from rendering.
+   */
+  toggleEnabled(): void;
+
+  /**
+   * Toggles the visibility of the sidebar (CSS visibility).
+   * If the sidebar is disabled, this will enable it and make it visible.
+   * Otherwise, toggles between visible and hidden states.
+   * Note: When in zen mode, use the zen mode toggle commands instead.
    */
   toggleVisibility(): void;
 }

Original file line number	Diff line number	Diff line change
`@@ -314,6 +314,14 @@ export class TraceImpl implements Trace, Disposable {`
`314`	`314`	`return this.app.isInternalUser;`
`315`	`315`	`}`
`316`	`316`
	`317`	`+ get zenModeEnabled(): boolean {`
	`318`	`+ return this.app.zenModeEnabled;`
	`319`	`+ }`
	`320`	`+`
	`321`	`+ toggleZenMode(): void {`
	`322`	`+ this.app.toggleZenMode();`
	`323`	`+ }`
	`324`	`+`
`317`	`325`	`get perfDebugging() {`
`318`	`326`	`return this.app.perfDebugging;`
`319`	`327`	`}`