renderRecordTab function exported

Last updated: 2026-03-05T23:42:26.235Z

Location

src/devtools/tabs/record-tab.tsx:205-243

Metrics

LOC: 39 Complexity: 2 Params: 0

Signature

renderRecordTab(): : void

Source Code

export function renderRecordTab(): void {
  const content = document.getElementById("content");
  renderTo(
    content,
    <RecordTabView
      recordingState={panelState.recordingState}
      steps={panelState.recordedStepsPreview}
      optimizeWithAI={panelState.optimizeWithAI}
      isOptimizing={panelState.isOptimizing}
      readyScript={panelState.readyScript}
      onStart={() => void startRecording()}
      onStop={() => void stopRecording()}
      onPause={() => void pauseRecording()}
      onResume={() => void resumeRecording()}
      onClear={() => void clearRecording()}
      onExport={(fw) => void exportRecording(fw)}
      onCopyScript={() => {
        if (!panelState.readyScript) return;
        void navigator.clipboard
          .writeText(panelState.readyScript.script)
          .then(() => {
            addLog(
              `${t("logRecordExported")} (${panelState.readyScript!.framework})`,
              "success",
            );
          });
      }}
      onDismissScript={() => {
        panelState.readyScript = null;
        renderRecordTab();
      }}
      onToggleOptimizeAI={(checked) => {
        panelState.optimizeWithAI = checked;
      }}
      onRemoveStep={(index) => void removeRecordStep(index)}
      onUpdateStep={(index, value) => void updateRecordStep(index, value)}
    />,
  );
}

Dependencies (Outgoing)

graph LR renderRecordTab["renderRecordTab"] startRecording["startRecording"] stopRecording["stopRecording"] pauseRecording["pauseRecording"] resumeRecording["resumeRecording"] clearRecording["clearRecording"] exportRecording["exportRecording"] removeRecordStep["removeRecordStep"] updateRecordStep["updateRecordStep"] renderRecordTab -->|calls| startRecording renderRecordTab -->|calls| stopRecording renderRecordTab -->|calls| pauseRecording renderRecordTab -->|calls| resumeRecording renderRecordTab -->|calls| clearRecording renderRecordTab -->|calls| exportRecording renderRecordTab -->|calls| renderRecordTab renderRecordTab -->|calls| removeRecordStep renderRecordTab -->|calls| updateRecordStep style renderRecordTab fill:#dbeafe,stroke:#2563eb,stroke-width:2px click renderRecordTab "55c03c4dd1c7d324.html" click startRecording "5a5a69de77cdf6a4.html" click stopRecording "26762b7cb59107d8.html" click pauseRecording "fb35582995858071.html" click resumeRecording "49a268f5555f51d0.html" click clearRecording "f6f301d293745036.html" click exportRecording "6871701ae65ee93c.html" click removeRecordStep "21541bd72fefd844.html" click updateRecordStep "fef88f8a2b53a954.html"

Target	Type
startRecording	calls
stopRecording	calls
pauseRecording	calls
resumeRecording	calls
clearRecording	calls
exportRecording	calls
renderRecordTab	calls
removeRecordStep	calls
updateRecordStep	calls

Impact (Incoming)

graph LR renderRecordTab["renderRecordTab"] renderShell["renderShell"] renderActiveTab["renderActiveTab"] startRecording["startRecording"] stopRecording["stopRecording"] pauseRecording["pauseRecording"] resumeRecording["resumeRecording"] clearRecording["clearRecording"] removeRecordStep["removeRecordStep"] updateRecordStep["updateRecordStep"] refreshRecordPreview["refreshRecordPreview"] exportRecording["exportRecording"] renderRecordStepsTable["renderRecordStepsTable"] renderShell -->|uses| renderRecordTab renderActiveTab -->|calls| renderRecordTab startRecording -->|calls| renderRecordTab stopRecording -->|calls| renderRecordTab pauseRecording -->|calls| renderRecordTab resumeRecording -->|calls| renderRecordTab clearRecording -->|calls| renderRecordTab removeRecordStep -->|calls| renderRecordTab updateRecordStep -->|calls| renderRecordTab refreshRecordPreview -->|calls| renderRecordTab exportRecording -->|calls| renderRecordTab renderRecordTab -->|calls| renderRecordTab renderRecordStepsTable -->|calls| renderRecordTab style renderRecordTab fill:#dbeafe,stroke:#2563eb,stroke-width:2px click renderRecordTab "55c03c4dd1c7d324.html" click renderShell "49d8574256a889e1.html" click renderActiveTab "6d5bc0097c5c25ad.html" click startRecording "951da195ca6b9271.html" click stopRecording "d85adc1465d21faf.html" click pauseRecording "2bbe3bc67dec8040.html" click resumeRecording "ed6b9b4a8af56037.html" click clearRecording "f6f301d293745036.html" click removeRecordStep "21541bd72fefd844.html" click updateRecordStep "fef88f8a2b53a954.html" click refreshRecordPreview "20683e205cfecb97.html" click exportRecording "6871701ae65ee93c.html" click renderRecordStepsTable "9f395ef38e3699a2.html"

Source	Type
renderShell	uses
renderActiveTab	calls
startRecording	calls
stopRecording	calls
pauseRecording	calls
resumeRecording	calls
clearRecording	calls
removeRecordStep	calls
updateRecordStep	calls
refreshRecordPreview	calls
exportRecording	calls
renderRecordTab	calls
renderRecordStepsTable	calls