log and code export features

Author: toddtarsi

packages/selenium-ide/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seleniumhq/selenium-ide",
-  "version": "4.0.0-alpha.25",
+  "version": "4.0.0-alpha.26",
   "private": true,
   "description": "Selenium IDE electron app",
   "author": "Todd <[email protected]>",
@@ -107,7 +107,7 @@
     "@seleniumhq/code-export-ruby-rspec": "^4.0.0-alpha.0",
     "@seleniumhq/side-code-export": "^4.0.0-alpha.2",
     "@seleniumhq/get-driver": "^4.0.0-alpha.1",
-    "@seleniumhq/side-api": "^4.0.0-alpha.11",
+    "@seleniumhq/side-api": "^4.0.0-alpha.12",
     "@seleniumhq/side-model": "^4.0.0-alpha.2",
     "@seleniumhq/side-plugin-example": "^4.0.0-alpha.1",
     "@seleniumhq/side-runtime": "^4.0.0-alpha.14",

packages/selenium-ide/src/browser/index.css

@@ -36,6 +36,9 @@ body,
 .pos-abs {
   position: absolute;
 }
+.pos-fixed {
+  position: fixed;
+}
 
 /**
  * Opacity utils
@@ -163,6 +166,10 @@ body,
   padding-top: 0;
 }
 
+.p-1 {
+  padding: 0.125rem;
+}
+
 .py-3 {
   padding-bottom: 0.5rem;
   padding-top: 0.5rem;

packages/selenium-ide/src/browser/windows/Logger/components/Logger/index.tsx

@@ -0,0 +1,46 @@
+import Delete from '@mui/icons-material/Delete'
+import { Paper } from '@mui/material'
+import IconButton from '@mui/material/IconButton'
+import { LogLevel } from 'electron-log'
+import React from 'react'
+
+const consoleStyle = {
+  fontSize: '0.75rem',
+  lineHeight: '1.2',
+}
+
+const SIDELogger: React.FC = () => {
+  const logContainer = React.useRef<HTMLPreElement>(null)
+  React.useEffect(() => {
+    const handleLog = (level: LogLevel, log: string) => {
+      logContainer.current?.append(
+        `${new Date().toLocaleTimeString()} [${level}] ${log}\n`
+      )
+      window.scrollTo(0, logContainer.current?.scrollHeight ?? 0)
+    }
+    window.sideAPI.system.onLog.addListener(handleLog)
+    return () => {
+      window.sideAPI.system.onLog.removeListener(handleLog)
+    }
+  }, [logContainer])
+  return (
+    <>
+      <pre ref={logContainer} style={consoleStyle} />
+      <div className="p-1 pos-fixed" style={{ top: 0, right: 0 }}>
+        <Paper className="p-1" elevation={3}>
+          <IconButton
+            onClick={() => {
+              if (logContainer.current) {
+                logContainer.current.innerHTML = ''
+              }
+            }}
+          >
+            <Delete />
+          </IconButton>
+        </Paper>
+      </div>
+    </>
+  )
+}
+
+export default SIDELogger

packages/selenium-ide/src/browser/windows/Logger/controller.ts

@@ -0,0 +1,25 @@
+import { WindowConfig } from 'browser/types'
+import Electron from 'electron'
+
+const dimensions = {
+  height: 200,
+  width: 800,
+}
+export const window: WindowConfig['window'] = () => {
+  const display = Electron.screen.getPrimaryDisplay()
+  return {
+    ...dimensions,
+    x:
+      Math.floor(display.bounds.width / 2) -
+      Math.floor(dimensions.width / 2) -
+      275,
+    y:
+      Math.floor(display.bounds.height) -
+      Math.floor(dimensions.height) -
+      50,
+    title: 'Logs',
+    webPreferences: {
+      nodeIntegrationInSubFrames: true,
+    }
+  }
+}

packages/selenium-ide/src/browser/windows/Logger/preload.ts

@@ -0,0 +1 @@
+import '../../helpers/preload'

packages/selenium-ide/src/browser/windows/Logger/renderer.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import AppWrapper from 'browser/components/AppWrapper'
+import renderWhenReady from 'browser/helpers/renderWhenReady'
+import SIDELogger from './components/Logger'
+
+const ProjectPlaybackControls = () =>(
+  <AppWrapper>
+    <SIDELogger />
+  </AppWrapper>
+)
+
+renderWhenReady(ProjectPlaybackControls)

packages/selenium-ide/src/browser/windows/controller.ts

@@ -1,4 +1,5 @@
 export * as Chromedriver from './Chromedriver/controller'
+export * as Logger from './Logger/controller'
 export * as PlaybackWindow from './PlaybackWindow/controller'
 export * as ProjectEditor from './ProjectEditor/controller'
 export * as Splash from './Splash/controller'

packages/selenium-ide/src/main/index.ts

@@ -1,11 +1,12 @@
 import 'v8-compile-cache'
 import 'source-map-support/register'
 import { app } from 'electron'
-import log from 'electron-log'
+import log, { LogMessage } from 'electron-log'
 import store from './store'
 import createSession from './session'
 import installReactDevtools from './install-react-devtools'
 import { join } from 'path'
+import { inspect } from 'util'
 
 // Configure log file
 const logFile = Date.now() + '.main.log'
@@ -30,6 +31,12 @@ process.on('uncaughtException', (error) => {
 // Instantiate the session
 const session = createSession(app, store)
 
+// Wire up logging to the frontend
+const appTransport = (msg: LogMessage) =>
+  session.api.system.onLog.dispatchEvent(msg.level, inspect(msg.data))
+appTransport.level = 'debug' as const
+log.transports.app = appTransport
+
 app.on('open-file', async (_e, path) => {
   await session.projects.load(path)
 })

packages/selenium-ide/src/main/session/controllers/Menu/menus/suiteManager.ts

@@ -12,7 +12,7 @@ export const suiteManagerCommands: MenuComponent<[string[]]> =
             suiteIDs.map((suiteID) => session.api.suites.delete(suiteID))
           )
         },
-        label: 'Delete Suite(s)',
+        label: 'Delete suite(s)',
       },
       { type: 'separator' },
       ...outputFormats.map((formatName) => ({

packages/selenium-ide/src/main/session/controllers/Menu/menus/testManager.ts

@@ -12,7 +12,7 @@ export const testManagerCommands: MenuComponent<[string[]]> =
             testIDs.map((testID) => session.api.tests.delete(testID))
           )
         },
-        label: 'Delete Suite(s)',
+        label: 'Delete test(s)',
       },
       { type: 'separator' },
       ...outputFormats.map((formatName) => ({