1 files changed, 29 insertions, 5 deletions
diff --git a/ui/src/frontend/pages.ts b/ui/src/frontend/pages.ts
index 3f3e29fbf..06bff8cda 100644
--- a/ui/src/frontend/pages.ts
+++ b/ui/src/frontend/pages.ts
@@ -39,22 +39,46 @@ class Alerts implements m.ClassComponent {
   }
 }
 
+const TogglePerfDebugButton = {
+  view() {
+    return m(
+        '.perf-monitor-button',
+        m('button',
+          {
+            onclick: () => globals.frontendLocalState.togglePerfDebug(),
+          },
+          m('i.material-icons',
+            {
+              title: 'Toggle Perf Debug Mode',
+            },
+            'assessment')));
+  }
+};
+
+const PerfStats: m.Component = {
+  view() {
+    const perfDebug = globals.frontendLocalState.perfDebug;
+    const children = [m(TogglePerfDebugButton)];
+    if (perfDebug) {
+      children.unshift(m('.perf-stats-content'));
+    }
+    return m(`.perf-stats[expanded=${perfDebug}]`, children);
+  }
+};
+
 /**
  * Wrap component with common UI elements (nav bar etc).
  */
 export function createPage(component: m.Component): m.Component {
   const pageComponent = {
     view() {
-      const children = [
+      return [
         m(Sidebar),
         m(Topbar),
         m(Alerts),
         m(component),
+        m(PerfStats),
       ];
-      if (globals.frontendLocalState.perfDebug) {
-        children.push(m('.perf-stats'));
-      }
-      return children;
     },
   };