ui: Add Zen mode

Author: aMayzner

ui/src/core/app_impl.ts

@@ -126,6 +126,8 @@ export class AppImpl implements App {
   readonly startupCommandsSetting: Setting<CommandInvocation[]>;
   readonly enforceStartupCommandAllowlistSetting: Setting<boolean>;
   private _isInternalUser?: boolean;
+  private _zenModeEnabled = false;
+  private _topbarVisibleInZenMode = false;
 
   // This constructor is invoked only once, when frontend/index.ts invokes
   // AppMainImpl.initialize().
@@ -197,6 +199,34 @@ export class AppImpl implements App {
     };
   }
 
+  get zenModeEnabled(): boolean {
+    return this._zenModeEnabled;
+  }
+
+  get topbarVisibleInZenMode(): boolean {
+    return this._topbarVisibleInZenMode;
+  }
+
+  showTopbarInZenMode(): void {
+    this._topbarVisibleInZenMode = true;
+    raf.scheduleFullRedraw();
+  }
+
+  hideTopbarInZenMode(): void {
+    this._topbarVisibleInZenMode = false;
+    raf.scheduleFullRedraw();
+  }
+
+  toggleZenMode(): void {
+    this._zenModeEnabled = !this._zenModeEnabled;
+    if (this._zenModeEnabled) {
+      // When entering zen mode, reset omnibox and hide topbar
+      this.omnibox.reset(false);
+      this._topbarVisibleInZenMode = false;
+    }
+    raf.scheduleFullRedraw();
+  }
+
   openTraceFromFile(file: File) {
     return this.openTrace({type: 'FILE', file});
   }

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;
   }

ui/src/core_plugins/dev.perfetto.CoreCommands/index.ts

@@ -146,7 +146,12 @@ export default class CoreCommands implements PerfettoPlugin {
     ctx.commands.registerCommand({
       id: 'dev.perfetto.OpenCommandPalette',
       name: 'Open command palette',
-      callback: () => ctx.omnibox.setMode(OmniboxMode.Command),
+      callback: () => {
+        if (AppImpl.instance.zenModeEnabled) {
+          AppImpl.instance.showTopbarInZenMode();
+        }
+        ctx.omnibox.setMode(OmniboxMode.Command);
+      },
       defaultHotkey: '!Mod+Shift+P',
     });
 
@@ -205,6 +210,15 @@ export default class CoreCommands implements PerfettoPlugin {
       icon: 'folder_open',
     });
 
+    ctx.commands.registerCommand({
+      id: 'dev.perfetto.ToggleZenMode',
+      name: 'Toggle zen mode',
+      defaultHotkey: 'Shift+F',
+      callback: () => {
+        AppImpl.instance.toggleZenMode();
+      },
+    });
+
     const OPEN_LEGACY_COMMAND_ID = 'dev.perfetto.OpenTraceInLegacyUi';
     ctx.commands.registerCommand({
       id: OPEN_LEGACY_COMMAND_ID,

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;
@@ -111,16 +112,23 @@ export class Omnibox implements m.ClassComponent<OmniboxAttrs> {
       },
       onSubmit: (value, _alt) => {
         omnibox.resolvePrompt(value);
+        if (app.zenModeEnabled === true) {
+          app.hideTopbarInZenMode();
+        }
       },
       onClose: () => {
         omnibox.rejectPrompt();
+        if (app.zenModeEnabled === true) {
+          app.hideTopbarInZenMode();
+        }
       },
     });
   }
 
   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
@@ -173,10 +181,16 @@ export class Omnibox implements m.ClassComponent<OmniboxAttrs> {
           this.omniboxInputEl.blur();
         }
         omnibox.reset();
+        if (app.zenModeEnabled === true) {
+          app.hideTopbarInZenMode();
+        }
       },
       onSubmit: (key: string) => {
         this.addRecentCommand(key);
         commands.runCommand(key);
+        if (app.zenModeEnabled === true) {
+          app.hideTopbarInZenMode();
+        }
       },
       onGoBack: () => {
         omnibox.reset();
@@ -210,13 +224,19 @@ export class Omnibox implements m.ClassComponent<OmniboxAttrs> {
         const tag = alt ? undefined : 'omnibox_query';
         if (trace === undefined) return;
         addQueryResultsTab(trace, config, tag);
+        if (AppImpl.instance.zenModeEnabled === true) {
+          AppImpl.instance.hideTopbarInZenMode();
+        }
       },
       onClose: () => {
         AppImpl.instance.omnibox.setText('');
         if (this.omniboxInputEl) {
           this.omniboxInputEl.blur();
         }
         AppImpl.instance.omnibox.reset();
+        if (AppImpl.instance.zenModeEnabled === true) {
+          AppImpl.instance.hideTopbarInZenMode();
+        }
       },
       onGoBack: () => {
         AppImpl.instance.omnibox.reset();
@@ -249,6 +269,9 @@ export class Omnibox implements m.ClassComponent<OmniboxAttrs> {
         if (this.omniboxInputEl) {
           this.omniboxInputEl.blur();
         }
+        if (AppImpl.instance.zenModeEnabled === true) {
+          AppImpl.instance.hideTopbarInZenMode();
+        }
       },
       onSubmit: (value, _mod, shift) => {
         if (trace === undefined) return; // No trace loaded.
@@ -261,6 +284,9 @@ export class Omnibox implements m.ClassComponent<OmniboxAttrs> {
         if (this.omniboxInputEl) {
           this.omniboxInputEl.blur();
         }
+        if (AppImpl.instance.zenModeEnabled === true) {
+          AppImpl.instance.hideTopbarInZenMode();
+        }
       },
       rightContent: trace && this.renderStepThrough(trace),
     });

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',

ui/src/frontend/ui_main.ts

@@ -57,17 +57,21 @@ export class UiMain implements m.ClassComponent {
       (trace?.engine.numRequestsPending ?? 0) > 0 ||
       taskTracker.hasPendingTasks();
 
+    const zenMode = app.zenModeEnabled;
+    const showStatusBar = showStatusBarFlag.get() && !zenMode;
+    const showTopbar = !zenMode || app.topbarVisibleInZenMode;
+
     return m('main.pf-ui-main', [
-      m(Sidebar),
-      m(Topbar, {trace}),
+      !zenMode && m(Sidebar),
+      showTopbar && m(Topbar, {trace}),
       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(),
     ]);
   }

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.
    */