pw-repl 0.12.4 → 0.12.6

package/AGENTS.md

@@ -20,7 +20,8 @@ If you hit a limitation or write a workaround, consider adding the capability to
   drawn over the page, which the element and mouse commands glide first), `lib/toast.js` (a line of text
   over the page), `lib/overlay.js` (the element the cursor and toast are drawn in, one layer each), `lib/inspect.js` (reading the
   page, screenshots, eval, CDP, waits), `lib/watch.js`, `lib/requestlog.js` (requests, bodies, console),
-  `lib/routes.js`, `lib/network.js`, `lib/emulation.js` (and viewport), `lib/capture.js`, `lib/record.js`
+  `lib/routes.js`, `lib/network.js`, `lib/emulation.js` (and viewport), `lib/capture.js`, `lib/profile.js` (performance traces;
+  `lib/trace.js` reads and sums them up), `lib/record.js`
   (video, through ffmpeg, and the steps file saved with it), `lib/dialogs.js` and `lib/modes.js`. Beneath them, `lib/tabstate.js` is the one record kept per tab, `lib/cdp.js` the CDP
   session kept per tab, and `lib/util.js` small shared helpers. No facility requires `lib/modes.js` or
   `lib/commands.js`, and a unit test fails on a require cycle, which CommonJS would not report.

package/README.md

@@ -54,6 +54,8 @@ pw> console error                       # and see how the page copes
 - **Record:** what someone does in a tab (`watch`), a timeline of requests and console (`capture`), or a
   video of the tab (`record`), with a virtual pointer (`cursor`), captions (`toast`) and highlights
   (`highlight`).
+- **Profile:** what keeps a page's main thread busy (`profile`): long tasks and the function behind each,
+  forced style and layout, each click's or key's time to the next paint, and dropped frames.
 - **Share:** many clients on one REPL, each with its own tab; a command server on a Unix socket or a local
   port, with an HTTP+JSON protocol.
 
@@ -146,6 +148,7 @@ example the Docker bridge gateway, `ip route | awk '/default/ {print $3}'`).
 | see each step as I click              | `watch on --live`                                                                    |
 | replay what I clicked through         | `watch on`, click around, `watch save flow.txt`, then `pw-repl send --file flow.txt` |
 | record requests and console together  | `capture on`, then `capture off`                                                     |
+| find what makes the page slow         | `profile on`, then `profile off`; `profile reload` for a page load                   |
 | fake a backend response               | `route <glob> <status> <json>`, `route <glob> abort`                                 |
 | change or slow an API response        | `route <glob> patch <json>`, `route <glob> delay <secs>`                             |
 | cut or slow the whole network         | `network off`, `network slow`, then `network on`                                     |
@@ -159,11 +162,11 @@ example the Docker bridge gateway, `ip route | awk '/default/ {print $3}'`).
 
 ### Modes
 
-Some commands turn on a mode that stays on until you turn it off: `watch`, `capture`, `route`, `network
-off` or `slow`, `emulate`, `viewport`, `record`, `highlight`, `cursor` and `toast`. While any are on in
-the selected tab, the prompt shows them: `(watch network:off routes:2) pw>`. `modes` lists them for every
-tab, and `modes off` turns them all off. Each of these commands on its own shows its state and what you
-can run next.
+Some commands turn on a mode that stays on until you turn it off: `watch`, `capture`, `profile`, `route`,
+`network off` or `slow`, `emulate`, `viewport`, `record`, `highlight`, `cursor` and `toast`. While any
+are on in the selected tab, the prompt shows them: `(watch network:off routes:2) pw>`. `modes` lists them
+for every tab, and `modes off` turns them all off. Each of these commands on its own shows its state and
+what you can run next.
 
 ## For agents and scripts
 

package/bin/pw-repl.js

@@ -38,7 +38,9 @@ $PW_ENDPOINT, then $PW_SOCKET, then the default.
 send -c <client> (or $PW_CLIENT) sends as a client of the REPL's with a selected tab of its own, so
 several agents can share one REPL; pw-repl help session has the rest.
 
-send exit status: 0 ok, 1 command error, 2 completion not confirmed, 64 usage or unreachable.
+send exit status: 0 ok, 1 command error, 2 completion not confirmed, 64 usage or unreachable. send -t is
+how long send waits for the answer (default 20s); it does not lengthen a command's own limits, such as
+the 5s an action waits for its element.
 
 send --file <file> runs each line of a file as a command, in order, as if typed at the REPL's prompt:
 quoted as the prompt reads it (no shell), with a file it records, uploads or saves relative to this

package/lib/commands.js

@@ -14,6 +14,7 @@ const { commands: networkCommands } = require('./network');
 const { commands: emulationCommands, EMULATE_KINDS } = require('./emulation');
 const { commands: captureCommands } = require('./capture');
 const { commands: recordCommands } = require('./record');
+const { commands: profileCommands } = require('./profile');
 const { commands: inspectCommands } = require('./inspect');
 const { commands: watchCommands, nextTabWanted, waitingForMe, watchNewTab } = require('./watch');
 const { commands: tabsCommands, isOpening } = require('./tabs');
@@ -33,6 +34,7 @@ const commands = {
   ...emulationCommands,
   ...captureCommands,
   ...recordCommands,
+  ...profileCommands,
   ...dialogsCommands,
   ...modesCommands,
 
@@ -117,6 +119,7 @@ function complete(line) {
     if (command === 'watch') return match(['on', 'off', 'new', '--all']);
     if (command === 'capture') return match(['on', 'off']);
     if (command === 'record') return match(['on', 'off']);
+    if (command === 'profile') return match(['on', 'off', 'save', 'reload']);
     if (command === 'cursor') return match(['on', 'off']);
     if (command === 'toast') return match(['off']);
     if (command === 'viewport') return match(['off']);
@@ -124,6 +127,7 @@ function complete(line) {
   }
   if (words.length >= 3 && command === 'watch' && words[1] === 'on') return match(['--changes', '--live', '--next-tab'].filter(f => !words.slice(2, -1).includes(f)));
   if (words.length === 3 && command === 'capture' && words[1] === 'on') return match(['requests', 'console']);
+  if (words.length >= 3 && command === 'profile' && words[1] === 'on') return match(['--cpu']);
   if (words.length === 3 && command === 'emulate' && EMULATE_KINDS.includes(words[1])) return match(['off']);
   if (words.length === 3 && command === 'route' && words[1] === 'off') return match(['--all', ...(state.page ? routesFor(state.page).keys() : [])]);
   return [[], current];

package/lib/elements.js

@@ -5,7 +5,7 @@ const { state, onShutdown } = require('./state');
 const out = require('./output');
 const { takeOptions } = require('./cli-names');
 const { unquote, toSelector, keyName, splitSelector, REF } = require('./syntax');
-const { numbers, hints } = require('./util');
+const { numbers, hints, BUSY_PAGE } = require('./util');
 const { tabState } = require('./tabstate');
 const { cursorOf, aiming, aimAt, glideTo, showClick, showSelect } = require('./cursor');
 const { recordingOf, stepTarget, pauseToShow } = require('./record');
@@ -95,8 +95,13 @@ async function onElement(selector, action, budget = 5000) {
 // or the check the element kept failing.
 function lastBlocker(log) {
   const lines = log.split('\n').map(line => line.trim().replace(/^-\s*/, ''));
+  // Its last step was the action itself: it was sent, and the page stopped answering, as when the click
+  // sets off a long task. A profile started now would miss that task: Chrome traces only what begins
+  // after it starts.
+  const sent = /^performing (\w+) action$/.exec(lines.filter(Boolean).pop() || '');
+  if (sent) return `the ${sent[1]} was sent, and may have landed, but the page stopped answering after it, likely busy with what it set off. A profile shows that only if it is on before the action: profile on, then the action again, if repeating it is safe`;
   const line = lines.reverse().find(l => /intercepts pointer events|element is not |element is outside|not attached|detached/.test(l));
-  if (!line) return 'it never became ready to act on';
+  if (!line) return `it never became ready to act on; ${BUSY_PAGE}`;
   return line.length > 240 ? `${line.slice(0, 240)}…` : line;
 }
 

package/lib/help.js

@@ -69,12 +69,13 @@ tab on its own lists them all.`,
   interact: {
     intro: `Selectors are Playwright selectors (CSS, text=..., role=...) or snapshot refs such as e5.
 Commands use the first match (click, dblclick and hover the first they can use: help click); see help
-fill for selectors with spaces. mousemove and the other mouse commands act at a point instead.`,
+fill for selectors with spaces. mousemove and the other mouse commands act at a point instead. An action
+scrolls its element into view first, as Playwright does; profile counts that scroll in the action's step.`,
     commands: ['click', 'dblclick', 'hover', 'fill', 'type', 'press', 'select', 'check', 'uncheck', 'upload', 'mousemove', 'mouseclick', 'mousedown', 'mouseup', 'mousewheel'],
   },
   inspect: {
     intro: `Output is capped; --all right after the command, or at the end, shows everything (text --all body).`,
-    commands: ['snapshot', 'watch', 'text', 'html', 'attrs', 'listeners', 'count', 'visible', 'links', 'inputs', 'screenshot', 'highlight', 'viewport', 'emulate', 'wait', 'sleep'],
+    commands: ['snapshot', 'watch', 'profile', 'text', 'html', 'attrs', 'listeners', 'count', 'visible', 'links', 'inputs', 'screenshot', 'highlight', 'viewport', 'emulate', 'wait', 'sleep'],
   },
   video: {
     intro: `A video of what you do in a tab, for someone to watch. Record it from a file of commands sent with
@@ -235,7 +236,7 @@ A click at a point: mouseclick <x> <y>. A drag: mousedown, then mousemove to ano
 clicked with click, which waits for it. help mousemove shows how to find a point. The mouse stays at the point, for a mousewheel or mousedown after
 it. The cursor (help cursor) moves there first and shows a ring at the press.`,
   },
-  mousedown: { usage: 'mousedown [button]', summary: 'press a mouse button where the mouse is (left, right or middle)' },
+  mousedown: { usage: 'mousedown [button]', summary: 'press a mouse button at the mouse (left, right, middle)' },
   mouseup: { usage: 'mouseup [button]', summary: 'release a mouse button where the mouse is' },
   mousewheel: {
     usage: 'mousewheel <dx> <dy>',
@@ -252,7 +253,7 @@ scrolled or redrawn. While recording, it scrolls in eased steps over up to 1s (h
     summary: 'clear an input and fill it',
     args: [
       ['<selector>', 'the first word; quote it if it has spaces: fill "text=Your name" Ada.'],
-      ['<value>', 'the rest of the line; quotes around all of it are removed, so fill #name "" clears it.'],
+      ['<value>', 'the rest of the line; quotes around all of it are removed, so fill #name "" clears it. Over send, the shell\'s quotes do it: pw-repl send fill #name "" (\'""\' types two quote marks).'],
     ],
     options: [
       ['--submit', 'at the end: presses Enter in it afterwards.'],
@@ -261,8 +262,8 @@ scrolled or redrawn. While recording, it scrolls in eased steps over up to 1s (h
 once, even while recording: type shows it being typed.`,
   },
   type: {
-    usage: 'type [<selector>] <text> [--submit]',
-    summary: 'type key by key after what the field holds; text as for fill',
+    usage: 'type [--delay=<ms>] [<selector>] <text> [--submit]',
+    summary: 'type key by key after what the field holds',
     args: [
       ['[<selector>]', 'as for fill. Without it (one word, or one quoted), into what has focus: type "garden hose".'],
       ['<text>', 'the rest of the line, as fill\'s value.'],
@@ -281,10 +282,10 @@ Date and time inputs: they take keys part by part, in the order they show them (
 from the first part with a selector, or from the part a click landed on. type says what the input then
 holds. Their ISO form (2026-10-02) is refused, since typed it comes out mangled: fill sets it.`,
   },
-  press: { usage: 'press <key> | press <selector> <key>', summary: 'press a key (Enter, Escape, Control+A; any case), maybe on an element' },
+  press: { usage: 'press <key> | press <selector> <key>', summary: 'press a key: Enter, Escape, Control+A (any case)' },
   select: {
     usage: 'select <selector> <value>',
-    summary: 'choose an option in a select (the value is the rest of the line)',
+    summary: 'choose an option; the value is the rest of the line',
     args: [
       ['<value>', 'an option\'s value or its label.'],
     ],
@@ -314,6 +315,7 @@ all.`,
       ['<selector>', 'outlines the first match, with new refs: those from before stop working.'],
     ],
     options: [
+      ['--all', 'the whole outline, not capped.'],
       ['--full', 'Playwright\'s snapshot unchanged.'],
       ['--grep <text>', 'only the lines containing text (role, name or a flag such as [disabled], any case), each with the named elements around it.'],
       ['--regex <pattern>', '--grep by a regular expression: snapshot --regex "Total: \\d+".'],
@@ -332,7 +334,8 @@ value attribute so too. A field a Show password button made plain text, with no
 shows its value. Every other field shows what it holds (textbox "Name": Ada), and a select its chosen
 option: inputs lists the fields without what they hold.
 
-Output over 60 lines ends with a line count.`,
+Output over 60 lines ends with a line count. Past 12000 characters it is cut at the end of a line, saying
+where: --all shows all.`,
   },
   watch: {
     usage: 'watch on [options] | off | [n|new] | save <file>',
@@ -703,6 +706,74 @@ Kept from when the REPL connects; the last 200 per tab.
 
 A page brought back from the back/forward cache (back, forward) reports its earlier messages again, at
 the time it comes back, though nothing loaded again.`,
+  },
+  profile: {
+    usage: 'profile on [secs] | off | reload | save <file>',
+    summary: 'what slows the tab: long tasks, layouts, input, frames',
+    args: [
+      ['on', 'starts a performance trace of the selected tab, until profile off (at most 120 seconds).'],
+      ['[secs]', 'records that long (1 to 120), then prints. Other commands wait until it ends. Over 20, give send time too: pw-repl send -t 70 profile on 60.'],
+      ['off', 'stops it and prints the summary.'],
+      ['reload', 'reloads the tab and profiles its load, until its network is idle (at most 10s after load) and half a second more. For work that starts later (a timer): profile on, reload, sleep, profile off.'],
+      ['save <file>', 'writes the last profile\'s trace, the tab\'s events only, as Chrome trace JSON for DevTools\' Performance panel (Load profile) or ui.perfetto.dev. It refuses a file that exists.'],
+      ['(none)', 'says whether one is running, or shows the last one.'],
+    ],
+    optionsFor: 'profile on',
+    options: [
+      ['--cpu', 'samples JS more often, and adds the functions that ran longest themselves. The trace gets much bigger.'],
+    ],
+    detail: `For "the page feels slow": what the tab's main thread was busy with, and when. It is a Chrome
+performance trace, as DevTools' Performance panel records (Playwright's browser.startTracing), summed up.
+Use it around something you do (profile on, click e5, profile off), or while the user uses the page: steps
+they take in the browser are in it.
+
+The summary: main-thread busy time by kind (scripting, style/layout, paint, GC, other); the page's
+load marks, when it loaded; each long task (over 50ms), with what set it off, the script it ran, the
+function it spent most time in ("most in"), each as file:line function, and a big response (100 KB or more) that finished just before
+it; forced style and layout (work a script waited for, reading a size or a style), by where in the script; and the steps:
+each click or key press with its time to the next paint (input delay, handlers, presentation), and each
+burst of wheel or scroll events and each drag, with the main thread's busy time and the frames drawn and
+dropped. Times are from when it started. --all lists every long task and step, not the first ones.
+
+Long tasks read kind, what set it off, script: scripting, click event, app.js:120 handleClick. The kind
+is what most of its time went to (GC, style/layout); what set it off is the event or callback that began
+it (timer, promise callbacks); promise callbacks a click handler queued run in the click's task, so
+show as click event. No script is named when none of its code came from a page URL.
+
+A page that freezes: profile on, then do what freezes it. Your commands wait for the page meanwhile, and
+may time out, but the profile records it all; profile off once the page answers again.
+
+Size: a busy page fills Chrome's trace buffer in under a minute (one that restyles many elements as it
+draws, sooner), which stops the profile there, and the summary says so. Stopping a long one takes a
+while, as Chrome writes out its trace: give send time, pw-repl send -t 60 profile off. If send gives up
+first, the profile still ends, and profile shows it.
+
+One profile runs at a time, in a browser: Chrome traces one at a time, the whole browser's, so another
+REPL's profile, or DevTools' Performance panel recording, stops profile on. It belongs to the tab, ends
+if the tab closes (profile shows it), and modes lists it.`,
+    moreAbout: 'what is left out, inlined functions, frames in a background tab, and the mark it leaves in the page',
+    more: `The tab's own renderer only: a cross-site iframe running in a process of its own is left out, and
+so is anything another tab of the same site, sharing the tab's process, does at the same time.
+
+Frames: a tab pw-repl uses is kept drawing as if it were in front (help tab), so its frame counts are a
+tab in front's; one behind another tab draws far less, as the user would see it. The summary says so.
+
+A function the JS engine inlined into its caller counts as the caller, in "most in" and --cpu alike: a
+small hot function called in a loop can show as the loop's function.
+
+A wheel-zoom or drag the page handles in its own script (a map) shows as a step from its events; one the
+browser handles alone, with no listener, may show only as frames.
+
+A page gets scroll events for any scroll, input or not. Those next to a click or key press, with no wheel
+event (an action's scroll into view, or a handler's scrollTo), are that step's: it says the page
+scrolled. A burst of scroll events alone may also be the page's own script scrolling.
+
+A step under way when the profile began (an action still running at profile on) reads before, without
+its busy time: the trace has nothing from before it began.
+
+profile on and off each run console.timeStamp in the page, which prints nothing, so the tab is found in
+the trace even when its page did nothing. The trace is kept in a temporary folder until the next
+profile, or until the REPL stops.`,
   },
   capture: {
     usage: 'capture on [requests|console] [secs] | off',

package/lib/inspect.js

@@ -6,7 +6,7 @@ const out = require('./output');
 const { printOutput } = out;
 const { devices } = require('playwright-core');
 const { toSelector, REF, unquote } = require('./syntax');
-const { regexOf, COMMAND_TIMEOUT } = require('./util');
+const { regexOf, COMMAND_TIMEOUT, BUSY_PAGE } = require('./util');
 const { tabState } = require('./tabstate');
 const { keptSession } = require('./cdp');
 const { CDP_REFUSED } = require('./dialogs');
@@ -127,6 +127,13 @@ async function waitGone(locator, what, timeout) {
 
 const SNAPSHOT_HINT_LINES = 60;
 
+function evaluated(promise) {
+  return withTimeout(promise, 'Page evaluation', COMMAND_TIMEOUT).catch(error => {
+    if (error.message === 'Page evaluation timed out') error.message += ` after ${COMMAND_TIMEOUT / 1000}s; ${BUSY_PAGE}`;
+    throw error;
+  });
+}
+
 // Each matching line (any part of it: role, name, flags such as [disabled]),
 // with the named elements it sits in, so a match can be placed without the
 // rest of the tree.
@@ -422,7 +429,7 @@ const commands = {
       return;
     }
     const lines = text.split('\n').length;
-    printOutput(lines > SNAPSHOT_HINT_LINES ? `${text}\n[${lines} lines; snapshot --grep <text> or snapshot <eN> shows less]` : text, all);
+    printOutput(text, all, lines > SNAPSHOT_HINT_LINES ? `[${lines} lines; snapshot --grep <text> or snapshot <eN> shows less]` : '');
   },
 
   async wait(args) {
@@ -480,7 +487,7 @@ const commands = {
       try {
         // Made from its text by the debugger, as eval is, so a page's CSP cannot
         // refuse it, and in the element's own frame, which may be an iframe.
-        const fn = await withTimeout((await el.ownerFrame()).evaluateHandle(unquote(onRef[1])), 'Page evaluation', COMMAND_TIMEOUT);
+        const fn = await evaluated((await el.ownerFrame()).evaluateHandle(unquote(onRef[1])));
         try {
           printOutput(await el.evaluate((e, f) => f(e), fn), all);
         } finally {
@@ -502,13 +509,13 @@ const commands = {
     const call = `const value = (${args}\n); return typeof value === 'function' ? value() : value;`;
     if (awaits && !single && compiles(AsyncFunction, args)) {
       const session = await keptSession(state.page);
-      const { result, exceptionDetails } = await withTimeout(session.send('Runtime.evaluate', { expression: args, replMode: true, awaitPromise: true, returnByValue: true }), 'Page evaluation', COMMAND_TIMEOUT);
+      const { result, exceptionDetails } = await evaluated(session.send('Runtime.evaluate', { expression: args, replMode: true, awaitPromise: true, returnByValue: true }));
       if (exceptionDetails) throw new Error(exceptionDetails.exception?.description || exceptionDetails.text);
       printOutput(result.value !== undefined ? result.value : result.description ?? 'undefined', all);
       return;
     }
     const expression = single ? `(${awaits ? 'async ' : ''}() => { ${call} })()` : args;
-    const value = await withTimeout(state.page.evaluate(expression), 'Page evaluation', COMMAND_TIMEOUT);
+    const value = await evaluated(state.page.evaluate(expression));
     // An empty string is shown as one, not as no output at all.
     printOutput(value === '' ? '""' : value, all);
     // Quotes around the whole of it, as a shell's quoting sent on, make it a string, not code to run:

package/lib/modes.js

@@ -8,6 +8,7 @@ const { setNetwork } = require('./network');
 const { emulatedKinds, setEmulation, setViewport } = require('./emulation');
 const { recordingOf, finishRecording } = require('./record');
 const { currentCapture, endCapture } = require('./capture');
+const { currentProfile, finishProfile } = require('./profile');
 const { nextTabWanted, waitingText, stopWaitingForNextTab, stopWatching } = require('./watch');
 const { hideHighlights, setLabels } = require('./elements');
 const { cursorOf, cursorOff } = require('./cursor');
@@ -31,6 +32,7 @@ function activeModes(p) {
   if (cursorOf(p)) modes.push('cursor');
   if (toastOf(p)) modes.push('toast');
   if (currentCapture()?.page === p) modes.push('capture');
+  if (currentProfile()?.page === p) modes.push('profile');
   if (recordingOf(p)) modes.push('record');
   return modes;
 }
@@ -87,6 +89,8 @@ function modeOwners(p) {
   if (toast) owners.push([toast.owner ?? null, 'toast']);
   const capture = currentCapture();
   if (capture?.page === p) owners.push([capture.owner ?? null, 'capture']);
+  const profile = currentProfile();
+  if (profile?.page === p) owners.push([profile.owner ?? null, 'profile']);
   const recording = recordingOf(p);
   if (recording) owners.push([recording.owner ?? null, 'record']);
   return owners;
@@ -116,6 +120,8 @@ async function allModesOff(mine = false) {
       if (watch?.on && ours(watch.owner)) { stopWatching(p, watch); done.push('watch off'); }
       const capture = currentCapture();
       if (capture?.page === p && ours(capture.owner)) { endCapture(); done.push('capture off (capture shows it)'); }
+      const profile = currentProfile();
+      if (profile?.page === p && ours(profile.owner)) { await finishProfile(); done.push('profile off (profile shows it)'); }
       const globs = [...(tabState(p).routes || [])].filter(([, route]) => ours(route.owner)).map(([glob]) => glob);
       if (globs.length) { await unroute(p, globs); done.push(`${globs.length} route${globs.length === 1 ? '' : 's'} removed`); }
       if ('network' in tabState(p) && ours(tabState(p).network.owner)) { await setNetwork(p, null); done.push('network on'); }

package/lib/output.js

@@ -65,16 +65,25 @@ function aside(text) {
   else console.log(text);
 }
 
-function printOutput(value, all = false) {
+// A footer is printed after the cut, so it is never cut off itself.
+function printOutput(value, all = false, footer = '') {
   let text;
   if (typeof value === 'string') text = value;
   else text = JSON.stringify(value, null, 2);
   if (text === undefined) text = 'undefined';
   if (!all && text.length > OUTPUT_LIMIT) {
-    log(`${text.slice(0, OUTPUT_LIMIT)}\n[truncated; add --all to the command to show all]`);
-  } else {
-    log(text);
+    // Cut at a line's end, unless the last one within the limit comes so early (a short line before a
+    // long minified one) that little would be shown.
+    const end = text.lastIndexOf('\n', OUTPUT_LIMIT);
+    if (end > OUTPUT_LIMIT / 2) {
+      const shown = text.slice(0, end);
+      const at = shown.split('\n').length;
+      text = `${shown}\n[truncated at line ${at} of ${text.split('\n').length}; add --all to the command to show all]`;
+    } else {
+      text = `${text.slice(0, OUTPUT_LIMIT)}\n[truncated; add --all to the command to show all]`;
+    }
   }
+  log(footer ? `${text}\n${footer}` : text);
 }
 
 module.exports = { OUTPUT_LIMIT, log, error, collect, take, notice, aside, onIdlePrint, onSelectedTab, printOutput };