serialization fix and slight tooltip tweak

i found the tooltip got snagged if moving mouse downward along a list

Author: toddtarsi

Diff for: packages/selenium-ide/src/browser/I18N/util.ts

@@ -41,8 +41,10 @@ const flattenOneLevel = <T extends RecursiveShape>(
     if (value && typeof value === 'object') {
       flattenOneLevel<T>(keyPath, getValue, target, value as T)
     } else {
-      // @ts-expect-error our shape traversal kinda sucks :(
-      acc[keyPath] = getValue(keyPath, value)
+      if (typeof value !== 'function') {
+        // @ts-expect-error our shape traversal kinda sucks :(
+        acc[keyPath] = getValue(keyPath, value)
+      }
     }
     return acc
   }, target as T)

Diff for: packages/selenium-ide/src/browser/I18N/zh/index.ts

@@ -1,6 +1,5 @@
 import type { LanguageMap } from '../en/index'
 import commandMap from '@seleniumhq/side-model/dist/I18N/zh/Commands'
-import { transformNestedObject } from '../util'
 
 // 窗口顶部菜单
 const windowTab = {
@@ -202,7 +201,7 @@ const testCore = {
   playFromStart: '从头开始回放',
 }
 
-export const backend: LanguageMap = {
+export const language: LanguageMap = {
   windowTab,
   electronMenuTree,
   fileMenuTree,
@@ -222,4 +221,4 @@ export const backend: LanguageMap = {
   commandMap,
 }
 
-export const frontend = transformNestedObject((_k, v) => v, backend)
+export default language

Diff for: packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Suites/SuitesDrawer.tsx

@@ -8,6 +8,7 @@ import { context } from 'browser/contexts/suites'
 import SuitesToolbar from './Toolbar'
 import { FormattedMessage } from 'react-intl'
 import languageMap from 'browser/I18N/keys'
+import { QuestionMark } from '@mui/icons-material'
 
 const {
   state: { setActiveSuite: setSelected },
@@ -21,27 +22,32 @@ const SuitesDrawer: FC = () => {
   const suites = useContext(context)
   return (
     <Drawer>
-      <SuitesToolbar />
+      <SuitesToolbar>
+        <Tooltip
+          title={<FormattedMessage id={languageMap.suitesTab.tooltip} />}
+        >
+          <QuestionMark
+            className="mx-2"
+            sx={{ color: 'primary.main', scale: 0.75 }}
+          />
+        </Tooltip>
+      </SuitesToolbar>
       <List className="flex-col flex-1 overflow-y" dense>
         {suites
           .slice()
           .sort((a, b) => a.name.localeCompare(b.name))
           .map(({ id, name }) => (
-            <Tooltip
-              title={<FormattedMessage id={languageMap.suitesTab.tooltip} />}
-            >
-              <RenamableListItem
-                id={id}
-                key={id}
-                name={name}
-                onContextMenu={() => {
-                  window.sideAPI.menus.open('suiteManager', [id])
-                }}
-                rename={rename}
-                selected={id === activeSuiteID}
-                setSelected={setSelected}
-              />
-            </Tooltip>
+            <RenamableListItem
+              id={id}
+              key={id}
+              name={name}
+              onContextMenu={() => {
+                window.sideAPI.menus.open('suiteManager', [id])
+              }}
+              rename={rename}
+              selected={id === activeSuiteID}
+              setSelected={setSelected}
+            />
           ))}
       </List>
     </Drawer>

Diff for: packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Tests/TestsDrawer.tsx

@@ -15,7 +15,7 @@ import { context as testsContext } from 'browser/contexts/tests'
 import { context as testResultsContext } from 'browser/contexts/playback-test-results'
 import { FormattedMessage, useIntl } from 'react-intl'
 import languageMap from 'browser/I18N/keys'
-import { QuestionAnswer } from '@mui/icons-material'
+import { QuestionMark } from '@mui/icons-material'
 
 const {
   state: { setActiveTest: setSelected, setActiveSuite },
@@ -65,7 +65,10 @@ const TestsDrawer: FC = () => {
           <Tooltip
             title={<FormattedMessage id={languageMap.testsTab.tooltip} />}
           >
-            <QuestionAnswer />
+            <QuestionMark
+              className="mx-2"
+              sx={{ color: 'primary.main', scale: 0.75 }}
+            />
           </Tooltip>
         </EditorToolbar>
         <FormControl size="small">
@@ -87,7 +90,9 @@ const TestsDrawer: FC = () => {
             sx={{ bottom: 0 }}
             value={safeSuiteID}
           >
-            <MenuItem value=""><FormattedMessage id={languageMap.testsTab.allTests} /></MenuItem>
+            <MenuItem value="">
+              <FormattedMessage id={languageMap.testsTab.allTests} />
+            </MenuItem>
             {suites.map((s) => (
               <MenuItem key={s.id} value={s.id}>
                 {s.name}

Diff for: packages/selenium-ide/src/main/api/classes/EventListener.ts

@@ -68,7 +68,7 @@ const baseListener = <ARGS extends VariadicArgs, RESULT extends any>(
   }
 }
 
-const responsePaths = ['recorder.onRequestelementAt']
+const responsePaths = ['recorder.onRequestElementAt']
 const wrappedListener = <ARGS extends VariadicArgs>(
   path: string,
   session: Session,
@@ -115,6 +115,7 @@ const wrappedListener = <ARGS extends VariadicArgs>(
             resolve(null)
           }
         } catch (e) {
+          console.error(e)
           // Sender has expired
           removeListener(event)
         }

Diff for: packages/selenium-ide/src/main/session/controllers/Projects/index.ts

@@ -132,7 +132,8 @@ export default class ProjectsController {
           }
         }
         await this.onProjectLoaded(loadedProject, filepath)
-        return await this.session.state.get()
+        const state = await this.session.state.get()
+        return JSON.parse(JSON.stringify(state))
       }
       return null
     } else {
@@ -148,7 +149,8 @@ export default class ProjectsController {
 
   async select(useArgs = false): Promise<void> {
     // When we're opened with a side file in the path
-    let argsFilepath = process.argv.find((arg) => arg.startsWith('--side-file=')) || ''
+    let argsFilepath =
+      process.argv.find((arg) => arg.startsWith('--side-file=')) || ''
     if (this.filepath) {
       await this.load(this.filepath)
     } else if (useArgs && argsFilepath) {
@@ -174,9 +176,8 @@ export default class ProjectsController {
     let project: ProjectShape
     try {
       project = JSON.parse(fileContents)
-      project.plugins = project?.plugins?.filter(
-        (plugin) => typeof plugin === 'string'
-      ) ?? []
+      project.plugins =
+        project?.plugins?.filter((plugin) => typeof plugin === 'string') ?? []
       return project
     } catch (e) {
       console.log((e as Error).message)

Diff for: packages/selenium-ide/src/main/session/controllers/System/index.ts

@@ -64,7 +64,9 @@ export default class SystemController extends BaseController {
       // lang DNE, stay en
     } finally {
       if (frontend) {
-        return flattenNestedObject(this.languageMap)
+        // React intl uses a flat dict so we convert it here
+        const frontendMap = flattenNestedObject(this.languageMap)
+        return frontendMap
       }
       return this.languageMap
     }