Add element id's and their documentation

THEMES.md

@@ -38,7 +38,7 @@ A full, complete `index.json` will look something like this:
     "css": ["/index.css"],
     "js": ["/index.js"]
   },
-  "customBackgroundURL": "https://website.com/image.png",
+  "customBackgroundURL": "https://website.com/image.png"
 }
 ```
 
@@ -100,3 +100,6 @@ newButton.innerHTML = "New Button";
 
 document.body.appendChild(newButton);
 ```
+
+## How can i access "x" element to customize?
+Please take a look at documentation of all element id's by clicking [here](/docs/elementIds.md).

docs/elementIds.md

@@ -0,0 +1,129 @@
+# Documentation of Element ID's for custom theming
+
+| #ID                                    | Description                                                     |
+|----------------------------------------|-----------------------------------------------------------------|
+| `#miniDialogContainer`                 | Main container of MiniDialog                                    |
+| `#miniDialogContainerTop`              | Affects only top section of MiniDialog                          |
+| `#miniDialogButtonClose`               | Close button (SVG) of MiniDialog                                |
+| `#miniDialogContent`                   | MiniDialog content                                              |
+| `#rightBarContainer`                   | Main container of RightBar                                      |
+| `#rightBarContent`                     | RightBar content                                                |
+| `#rightBarButtonDiscord`               | Discord button on the RightBar                                  |
+| `#rightBarButtonGithub`                | Github button on the RightBar                                   |
+| `#playButton`                          | Main container for whole launch buttons section                 |
+| `#serverControls`                      | Container of "play on grasscutter" checkbox                     |
+| `#enableGC`                            | "play on grasscutter" checkbox                                  |
+| `#ip`                                  | Server ip input if play on grasscutter is enabled               |
+| `#port`                                | Server port input if play on grasscutter is enabled             |
+| `#httpsEnable`                         | "Enable https" checkbox if play on grasscutter is enabled       |
+| `#officialPlay`                        | Launch button                                                   |
+| `#serverLaunch`                        | Launch server button                                            |
+| `#serverlaunchIcon`                    | Icon (SVG) of server launch button                              |
+| `#serverConfigContainer`               | Main container of server configuration section                  |
+| `#serverLaunchContainer`               | Main container of launch buttons (includes launch server)       |
+| `#topBarContainer`                     | Main container of launcher TopBar (minimize, exit, settings...) |
+| `#title`                               | Title of the TopBar                                             |
+| `#version`                             | Version of the launcher in TopBar                               |
+| `#topBarButtonContainer`               | Container of launcher TopBar buttons only                       |
+| `#closeBtn`                            | Exit launcher button                                            |
+| `#minBtn`                              | Minimize launcher button                                        |
+| `#settingsBtn`                         | Settings button                                                 |
+| `#downloadsBtn`                        | Downloads button (grasscutter resources, grasscutter...)        |
+| `#newsContainer`                       | Main container of the news section                              |
+| `#newsTabsContainer`                   | Container for news tabs                                         |
+| `#commits`                             | News tabs container commits button                              |
+| `#latest_version`                      | News tabs for latest version button                             |
+| `#newsContent`                         | Content section of news container                               |
+| `#newsCommitsTable`                    | Commits table of news section                                   |
+| `#mewsCommitsAuthor`                   | Commit author of commit                                         |
+| `#newsCommitsCommitMessage`            | Commit message of commit                                        |
+| `#dividerContainer`                    | Container for divider line                                      |
+| `#dividerLine`                         | Divider line                                                    |
+| `#downloadMenuContainerGCStable`       | Grasscutter stable update container                             |
+| `#downloadMenuLabelGCStable`           | Label for stable update button                                  |
+| `#downloadMenuButtonGCStable`          | Button container for stable update button                       |
+| `#grasscutterStableBtn`                | "Update grasscutter stable" button                              |
+| `#downloadMenuContainerGCDev`          | Grasscutter development update container                        |
+| `#downloadMenuLabelGCDev`              | Label for latest update button                                  |
+| `#downloadMenuButtonGCDev`             | Button container for latest update button                       |
+| `grasscutterLatestBtn`                 | "Update grasscutter latest" button                              |
+| `#downloadMenuContainerGCStableData`   | Grasscutter stable data update container                        |
+| `#downloadMenuLabelGCStableData`       | Label for stable data update                                    |
+| `#downloadMenuButtonGCStableData`      | Button container for stable data update button                  |
+| `#grasscutterStableRepo`               | "Update grasscutter stable data" button                         |
+| `#downloadMenuContainerGCDevData`      | Grasscutter latest data update container                        |
+| `#downloadMenuLabelGCDevData`          | Label for latest data update                                    |
+| `#downloadMenuButtonGCDevData`         | Button container for latest data update button                  |
+| `#grasscutterDevRepo`                  | "Update grasscutter latest data" button                         |
+| `#downloadMenuContainerResources`      | Container for grasscutter resources download                    |
+| `#downloadMenuLabelResources`          | label for resources download                                    |
+| `#downloadMenuButtonResources`         | Button container for resources download button                  |
+| `#resourcesBtn`                        | "Download grasscutter resources" button                         |
+| `#menuContainer`                       | Generic Popup modal like menu container                         |
+| `#menuContainerTop`                    | Top section of menu container                                   |
+| `#menuHeading`                         | Menu title                                                      |
+| `#menuButtonCloseContainer`            | Container for menu close button                                 |
+| `#menuButtonCloseIcon`                 | Menu close icon (SVG)                                           |
+| `#menuContent`                         | Content section of the menu                                     |
+| `#menuOptionsContainerGameExec`        | Container for game executable option section                    |
+| `#menuOptionsLabelGameExec`            | Label for game executable option                                |
+| `#menuOptionsDirGameExec`              | Set game executable file browser                                |
+| `#menuOptionsContainerGCJar`           | Container for grasscutter jar option                            |
+| `#menuOptionsLabelGCJar`               | Label for grasscutter jar option                                |
+| `#menuOptionsDirGCJar`                 | Set grasscutter jar file browser                                |
+| `#menuOptionsContainerToggleEnc`       | Container for toggle encryption option                          |
+| `#menuOptionsLabelToggleEnc`           | Label for toggle encryption option                              |
+| `#menuOptionsButtonToggleEnc`          | Toggle encryption button container                              |
+| `#toggleEnc`                           | Toggle encryption button                                        |
+| `#menuOptionsContainerGCWGame`         | Container for "grasscutter with game" option                    |
+| `#menuOptionsLabelGCWDame`             | Label for "grasscutter with game" option                        |
+| `#menuOptionsCheckboxGCWGame`          | Container for "grasscutter with game" option checkbox           |
+| `#gcWithGame`                          | Grasscutter with game checkbox                                  |
+| `#menuOptionsContainerThemes`          | Container for themes section                                    |
+| `#menuOptionsLabelThemes`              | Label for set themes option                                     |
+| `#menuOptionsSelectThemes`             | Container for themes select menu                                |
+| `#menuOptionsSelectMenuThemes`         | Set theme select menu                                           |
+| `#menuOptionsContainerJavaPath`        | Container for Java Path option                                  |
+| `#menuOptionsLabelJavaPath`            | Label for Java path option                                      |
+| `#menuOptionsDirJavaPath`              | Container for java path file browser                            |
+| `#menuOptionsContainerBG`              | Container for Background option                                 |
+| `#menuOptionsLabelBG`                  | Label for background option                                     |
+| `#menuOptionsDirBG`                    | Container for background url/local path option                  |
+| `#menuOptionsContainerLang`            | Container for language change option                            |
+| `#menuOptionsLabelLang`                | Label for language change option                                |
+| `#menuOptionsSelectLang`               | Container for language change select menu                       |
+| `#menuOptionsSelectMenuLang`           | Language select menu                                            |
+| `#DownloadProgress`                    | Download progress container                                     |
+| `#bottomSectionContainer`              | Bottom section container                                        |
+| `#miniDownloadContainer`               | Container for mini download                                     |
+| `#commonBigButtonContent`              | Content of big button component                                 |
+| `#commonCheckboxContainer`             | Container of common Checkbox component                          |
+| `#commonCheckboxLabel`                 | Label of common checkbox                                        |
+| `#commonCheckboxDisplay`               | is checked? section of common checkbox                          |
+| `#commonDirInputContainer`             | Container of DirInput component                                 |
+| `#commonDirInputText`                  | Text of DirInput component                                      |
+| `#commonDirInputFileSelContainer`      | DirInput file selector container                                |
+| `#commonDirInputFileSelIcon`           | DirInput file selector icon                                     |
+| `#commonDownloadSectionContainer`      | DownloadSection component container                             |
+| `#commonDownloadSectionTitle`          | Title of download section                                       |
+| `#commonDownloadSectionPath`           | Path of the download section                                    |
+| `#commonDownloadSectionSize`           | File size of download section's file                            |
+| `#commonDownloadSectionProgress`       | Progressbar of the download section                             |
+| `#commonHelpButtonContainer`           | Container for HelpButtons                                       |
+| `#commonHelpButtonClosed`              | HelpButton closed content container                             |
+| `#commonHelpButtonIcon`                | HelpButton icon                                                 |
+| `#commonHelpButtonContainerOpen`       | Container of opened HelpButton                                  |
+| `#commonMainProgressContainer`         | MainProgressBar container                                       |
+| `#commonMainProgress`                  | Container for inner content of MainProgressBar                  |
+| `#commonMainProgressInner`             | MainProgressBar inner                                           |
+| `#commonMainProgressText`              | Text of MainProgressBar                                         |
+| `#commonProgressBarContainer`          | ProgressBar container                                           |
+| `#commonProgressBar`                   | ProgressBar container before content                            |
+| `#commonProgressBarContent`            | ProgressBar content                                             |
+| `#commonProgressbarDownContrContainer` | Container for ProgressBar controls                              |
+| `#commonProgressBarDownStopContainer`  | Container for download stop                                     |
+| `#commonProgressBarDownStopIcon`       | Download stop icon (SVG)                                        |
+| `#commonProgressBarText`               | Text describing the progress bar's job                          |
+| `#commonTextInputContainer`            | Container of TextInput component                                |
+| `#commonTextInputClearableContainer`   | Container if TextInput is clearable                             |
+| `#commonTextInputClearableIcon`        | TextInput clearable icon (SVG)                                  |

src/ui/App.tsx

@@ -166,7 +166,7 @@ class App extends React.Component<IProps, IState> {
         {
           // Mini downloads section
           this.state.miniDownloadsOpen ? (
-            <div className="MiniDownloads">
+            <div className="MiniDownloads" id={'miniDownloadContainer'}>
               <MiniDialog
                 title="Downloads"
                 closeFn={() => {
@@ -209,7 +209,7 @@ class App extends React.Component<IProps, IState> {
           ) : null
         }
 
-        <div className="BottomSection">
+        <div className="BottomSection" id={'bottomSectionContainer'}>
           <ServerLaunchSection />
 
           <div id="DownloadProgress"

src/ui/components/MiniDialog.tsx

@@ -32,16 +32,16 @@ export default class MiniDialog extends React.Component<IProps, never> {
 
   render() {
     return (
-      <div className="MiniDialog">
+      <div className="MiniDialog" id={'miniDialogContainer'}>
         {
           this.props.closeable !== undefined && this.props.closeable ?
-            <div className="MiniDialogTop" onClick={this.props.closeFn}>
+            <div className="MiniDialogTop" id={'miniDialogContainerTop'} onClick={this.props.closeFn}>
               <span>{this.props?.title}</span>
-              <img src={Close} className="MiniDialogClose" />
+              <img src={Close} className="MiniDialogClose" id={'miniDialogButtonClose'} />
             </div> : null
         }
 
-        <div className="MiniDialogInner">
+        <div className="MiniDialogInner" id={'miniDialogContent'}>
           {this.props.children}
         </div>
       </div>

src/ui/components/RightBar.tsx

@@ -16,12 +16,12 @@ export default class RightBar extends React.Component {
 
   render() {
     return (
-      <div className="RightBar">
-        <div className="RightBarInner">
-          <div className="BarDiscord BarImg" onClick={() => this.openInBrowser(DISCORD)}>
+      <div className="RightBar" id={'rightBarContainer'}>
+        <div className="RightBarInner" id={'rightBarContent'}>
+          <div className="BarDiscord BarImg" id={'rightBarButtonDiscord'} onClick={() => this.openInBrowser(DISCORD)}>
             <img src={Discord} />
           </div>
-          <div className="BarGithub BarImg" onClick={() => this.openInBrowser(GITHUB)}>
+          <div className="BarGithub BarImg" id={'rightBarButtonGithub'} onClick={() => this.openInBrowser(GITHUB)}>
             <img src={Github} />
           </div>
         </div>

src/ui/components/ServerLaunchSection.tsx

@@ -196,7 +196,7 @@ export default class ServerLaunchSection extends React.Component<IProps, IState>
         {
           this.state.grasscutterEnabled && (
             <div>
-              <div className="ServerConfig">
+              <div className="ServerConfig" id={'serverConfigContainer'}>
                 <TextInput id="ip" key="ip" placeholder={this.state.ipPlaceholder} onChange={this.setIp} initalValue={this.state.ip} />
                 <TextInput style={{
                   width: '10%',
@@ -210,10 +210,10 @@ export default class ServerLaunchSection extends React.Component<IProps, IState>
         }
 
 
-        <div className="ServerLaunchButtons">
+        <div className="ServerLaunchButtons" id={'serverLaunchContainer'}>
           <BigButton onClick={this.playGame} id="officialPlay">{this.state.buttonLabel}</BigButton>
           <BigButton onClick={this.launchServer} id="serverLaunch">
-            <img className="ServerIcon" src={Server} />
+            <img className="ServerIcon" id={'serverLaunchIcon'} src={Server} />
           </BigButton>
         </div>
       </div>

src/ui/components/TopBar.tsx

@@ -43,14 +43,14 @@ export default class TopBar extends React.Component<IProps, IState> {
 
   render() {
     return (
-      <div className="TopBar" data-tauri-drag-region>
+      <div className="TopBar" id={'topBarContainer'} data-tauri-drag-region>
         <div id="title">
           <span data-tauri-drag-region>
             <Tr text="main.title" />
           </span>
           <span data-tauri-drag-region id="version">{this.state?.version}</span>
         </div>
-        <div className="TopBtns">
+        <div className="TopBtns" id={'topBarButtonContainer'}>
           <div id="closeBtn" onClick={this.handleClose} className='TopButton'>
             <img src={closeIcon} alt="close" />
           </div>

src/ui/components/common/BigButton.tsx

@@ -38,7 +38,7 @@ export default class BigButton extends React.Component<IProps, IState> {
   render() {
     return (
       <div className={'BigButton ' + (this.state.disabled ? 'disabled' : '')} onClick={this.handleClick} id={this.props.id}>
-        <div className="BigButtonText">{this.props.children}</div>
+        <div className="BigButtonText" id={'commonBigButtonContent'}>{this.props.children}</div>
       </div>
     )
   }

src/ui/components/common/Checkbox.tsx

@@ -40,10 +40,10 @@ export default class Checkbox extends React.Component<IProps, IState> {
 
   render() {
     return (
-      <div className="Checkbox">
+      <div className="Checkbox" id={'commonCheckboxContainer'}>
         <input type='checkbox' id={this.props.id} checked={this.state.checked} onChange={this.handleChange} />
-        <label htmlFor={this.props.id}>
-          <div className="CheckboxDisplay">
+        <label id={'commonCheckboxLabel'} htmlFor={this.props.id}>
+          <div className="CheckboxDisplay" id={'commonCheckboxDisplay'}>
             {this.state.checked ? <img src={checkmark} alt='Checkmark' /> : null}
           </div>
           <span>{this.props.label || ''}</span>

src/ui/components/common/DirInput.tsx

@@ -86,8 +86,9 @@ export default class DirInput extends React.Component<IProps, IState> {
 
   render() {
     return (
-      <div className='DirInput'>
+      <div className='DirInput' id='commonDirInputContainer'>
         <TextInput
+          id='commonDirInputText'
           value={this.state.value}
           placeholder={this.state.placeholder}
           clearable={this.props.clearable !== undefined ? this.props.clearable : true}
@@ -99,8 +100,8 @@ export default class DirInput extends React.Component<IProps, IState> {
           }}
           customClearBehaviour={this.props.customClearBehaviour}
         />
-        <div className="FileSelectIcon" onClick={this.handleIconClick}>
-          <img src={File} />
+        <div className="FileSelectIcon" id={'commonDirInputFileSelContainer'} onClick={this.handleIconClick}>
+          <img id={'commonDirInputFileSelIcon'} src={File} />
         </div>
       </div>
     )

src/ui/components/common/DownloadSection.tsx

@@ -21,12 +21,12 @@ export default class DownloadSection extends React.Component<IProps, never> {
 
   render() {
     return (
-      <div className="DownloadSection">
-        <div className="DownloadTitle">
-          <div className="DownloadPath">{this.getFilenameFromPath()}</div>
-          <div className="DownloadStatus"> - {this.props.downloadManager.getDownloadSize(this.props.downloadName)}</div>
+      <div className="DownloadSection" id={'commonDownloadSectionContainer'}>
+        <div className="DownloadTitle" id={'commonDownloadSectionTitle'}>
+          <div className="DownloadPath" id={'commonDownloadSectionPath'}>{this.getFilenameFromPath()}</div>
+          <div className="DownloadStatus" id={'commonDownloadSectionSize'}> - {this.props.downloadManager.getDownloadSize(this.props.downloadName)}</div>
         </div>
-        <div className="DownloadSectionInner">
+        <div className="DownloadSectionInner" id={'commonDownloadSectionProgress'}>
           <ProgressBar path={this.props.downloadName} downloadManager={this.props.downloadManager} />
         </div>
       </div>

src/ui/components/common/HelpButton.tsx

@@ -36,12 +36,12 @@ export default class HelpButton extends React.Component<IProps, IState> {
 
   render() {
     return (
-      <div className="HelpSection">
-        <div className="HelpButton" onMouseEnter={this.setOpen} onMouseLeave={this.setClosed}>
-          <img src={Help} />
+      <div className="HelpSection" id={'commonHelpButtonContainer'}>
+        <div className="HelpButton" id={'commonHelpButtonClosed'} onMouseEnter={this.setOpen} onMouseLeave={this.setClosed}>
+          <img id={'commonHelpButtonIcon'} src={Help} />
         </div>
 
-        <div className="HelpContents" style={{
+        <div className="HelpContents" id={'commonHelpButtonContainerOpen'} style={{
           display: this.state.opened ? 'block' : 'none'
         }}>
           <MiniDialog closeFn={this.setClosed}>

src/ui/components/common/MainProgressBar.tsx

@@ -49,9 +49,9 @@ export default class ProgressBar extends React.Component<IProps, IState> {
 
   render() {
     return (
-      <div className="MainProgressBarWrapper">
-        <div className="ProgressBar">
-          <div className="InnerProgress" style={{
+      <div className="MainProgressBarWrapper" id={'commonMainProgressContainer'}>
+        <div className="ProgressBar" id={'commonMainProgress'}>
+          <div className="InnerProgress" id={'commonMainProgressInner'} style={{
             width: `${(() => {
               // Handles no files downloading
               if (this.state.files === 0) {
@@ -67,7 +67,7 @@ export default class ProgressBar extends React.Component<IProps, IState> {
           }}></div>
         </div>
 
-        <div className="MainProgressText">
+        <div className="MainProgressText" id={'commonMainProgressText'}>
           <Tr text="main.files_downloading" /> {this.state.files} ({this.state.speed})
           <br />
           <Tr text="main.files_extracting" /> {this.state.extracting}

src/ui/components/common/ProgressBar.tsx

@@ -53,12 +53,12 @@ export default class ProgressBar extends React.Component<IProps, IState> {
 
   render() {
     return (
-      <div className="ProgressBarWrapper">
+      <div className="ProgressBarWrapper" id={'commonProgressBarContainer'}>
         <div style={{
           width: '80%'
         }}>
-          <div className="ProgressBar">
-            <div className="InnerProgress" style={{
+          <div className="ProgressBar" id={'commonProgressBar'}>
+            <div className="InnerProgress" id={'commonProgressBarContent'} style={{
               width: `${(() => {
                 // Handles files with content-lengths of 0
                 if (this.state.status === 'finished') {
@@ -73,14 +73,14 @@ export default class ProgressBar extends React.Component<IProps, IState> {
               })()}%`,
             }}></div>
           </div>
-          <div className="DownloadControls">
-            <div onClick={this.stopDownload} className="downloadStop">
-              <img src={Stop}></img>
+          <div className="DownloadControls" id={'commonProgressbarDownContrContainer'}>
+            <div onClick={this.stopDownload} id={'commonProgressBarDownStopContainer'} className="downloadStop">
+              <img id={'commonProgressBarDownStopIcon'} src={Stop}></img>
             </div>
           </div>
         </div>
 
-        <div className="ProgressText">
+        <div className="ProgressText" id={'commonProgressBarText'}>
           {capitalize(this.state.status) || 'Waiting'}
         </div>
       </div>

src/ui/components/common/TextInput.tsx

@@ -44,14 +44,14 @@ export default class TextInput extends React.Component<IProps, IState> {
 
   render() {
     return (
-      <div className="TextInputWrapper" style={this.props.style || {}}>
+      <div className="TextInputWrapper" id={'commonTextInputContainer'} style={this.props.style || {}}>
         <input id={this.props?.id} readOnly={this.props.readOnly || false} placeholder={this.props.placeholder || ''} className="TextInput" value={this.state.value} onChange={(e) => {
           this.setState({ value: e.target.value })
           if (this.props.onChange) this.props.onChange(e.target.value)
         }} />
         {
           this.props.clearable ?
-            <div className="TextClear" onClick={() => {
+            <div className="TextClear" id={'commonTextInputClearableContainer'} onClick={() => {
               // Run custom behaviour first
               if (this.props.customClearBehaviour) return this.props.customClearBehaviour()
 
@@ -61,7 +61,7 @@ export default class TextInput extends React.Component<IProps, IState> {
 
               this.forceUpdate()
             }}>
-              <img src={Close} className="TextInputClear" />
+              <img src={Close} className="TextInputClear" id={'commonTextInputClearableIcon'} />
             </div> : null
         }
       </div>

src/ui/components/menu/Divider.tsx

@@ -5,8 +5,8 @@ import './Divider.css'
 export default class Divider extends React.Component {
   render() {
     return (
-      <div className="Divider">
-        <div className="DividerLine"></div>
+      <div className="Divider" id={'dividerContainer'}>
+        <div className="DividerLine" id={'dividerLine'}></div>
       </div>
     )
   }

src/ui/components/menu/Downloads.tsx

@@ -190,8 +190,8 @@ export default class Downloads extends React.Component<IProps, IState> {
   render() {
     return (
       <Menu closeFn={this.props.closeFn} className="Downloads" heading="Downloads">
-        <div className='DownloadMenuSection'>
-          <div className='DownloadLabel'>
+        <div className='DownloadMenuSection' id={'downloadMenuContainerGCStable'}>
+          <div className='DownloadLabel' id={'downloadMenuLabelGCStable'}>
             <Tr text={
               this.state.grasscutter_set ? 'downloads.grasscutter_stable' : 'downloads.grasscutter_stable_update'
             } />
@@ -199,14 +199,14 @@ export default class Downloads extends React.Component<IProps, IState> {
               <Tr text="help.gc_stable_jar" />
             </HelpButton>
           </div>
-          <div className='DownloadValue'>
+          <div className='DownloadValue' id={'downloadMenuButtonGCStable'}>
             <BigButton disabled={this.state.grasscutter_downloading} onClick={this.downloadGrasscutterStable} id="grasscutterStableBtn" >
               <Tr text="components.download" />
             </BigButton>
           </div>
         </div>
-        <div className='DownloadMenuSection'>
-          <div className='DownloadLabel'>
+        <div className='DownloadMenuSection' id={'downloadMenuContainerGCDev'}>
+          <div className='DownloadLabel' id={'downloadMenuLabelGCDev'}>
             <Tr text={
               this.state.grasscutter_set ? 'downloads.grasscutter_latest' : 'downloads.grasscutter_latest_update'
             } />
@@ -214,7 +214,7 @@ export default class Downloads extends React.Component<IProps, IState> {
               <Tr text="help.gc_dev_jar" />
             </HelpButton>
           </div>
-          <div className='DownloadValue'>
+          <div className='DownloadValue' id={'downloadMenuButtonGCDev'}>
             <BigButton disabled={this.state.grasscutter_downloading} onClick={this.downloadGrasscutterLatest} id="grasscutterLatestBtn" >
               <Tr text="components.download" />
             </BigButton>
@@ -223,8 +223,8 @@ export default class Downloads extends React.Component<IProps, IState> {
 
         <Divider />
 
-        <div className='DownloadMenuSection'>
-          <div className='DownloadLabel'>
+        <div className='DownloadMenuSection' id={'downloadMenuContainerGCStableData'}>
+          <div className='DownloadLabel' id={'downloadMenuLabelGCStableData'}>
             <Tr text={
               this.state.grasscutter_set ? 'downloads.grasscutter_stable_data' : 'downloads.grasscutter_stable_data_update'
             } />
@@ -232,14 +232,14 @@ export default class Downloads extends React.Component<IProps, IState> {
               <Tr text="help.gc_stable_data" />
             </HelpButton>
           </div>
-          <div className='DownloadValue'>
+          <div className='DownloadValue' id={'downloadMenuButtonGCStableData'}>
             <BigButton disabled={this.state.repo_downloading} onClick={this.downloadGrasscutterStableRepo} id="grasscutterStableRepo" >
               <Tr text="components.download" />
             </BigButton>
           </div>
         </div>
-        <div className='DownloadMenuSection'>
-          <div className='DownloadLabel'>
+        <div className='DownloadMenuSection' id={'downloadMenuContainerGCDevData'}>
+          <div className='DownloadLabel' id={'downloadMenuLabelGCDevData'}>
             <Tr text={
               this.state.grasscutter_set ? 'downloads.grasscutter_latest_data' : 'downloads.grasscutter_latest_data_update'
             } />
@@ -247,7 +247,7 @@ export default class Downloads extends React.Component<IProps, IState> {
               <Tr text="help.gc_dev_data" />
             </HelpButton>
           </div>
-          <div className='DownloadValue'>
+          <div className='DownloadValue' id={'downloadMenuButtonGCDevData'}>
             <BigButton disabled={this.state.repo_downloading} onClick={this.downloadGrasscutterStableRepo} id="grasscutterDevRepo" >
               <Tr text="components.download" />
             </BigButton>
@@ -256,14 +256,14 @@ export default class Downloads extends React.Component<IProps, IState> {
 
         <Divider />
 
-        <div className='DownloadMenuSection'>
-          <div className='DownloadLabel'>
+        <div className='DownloadMenuSection' id={'downloadMenuContainerResources'}>
+          <div className='DownloadLabel' id={'downloadMenuLabelResources'}>
             <Tr text="downloads.resources" />
             <HelpButton>
               <Tr text="help.resources" />
             </HelpButton>
           </div>
-          <div className='DownloadValue'>
+          <div className='DownloadValue' id={'downloadMenuButtonResources'}>
             <BigButton disabled={this.state.resources_downloading || !this.state.grasscutter_set || this.state.resources_exist} onClick={this.downloadResources} id="resourcesBtn" >
               <Tr text="components.download" />
             </BigButton>

src/ui/components/menu/Menu.tsx

@@ -17,14 +17,14 @@ export default class Menu extends React.Component<IProps, never> {
 
   render() {
     return (
-      <div className={'Menu ' + this.props.className}>
-        <div className='MenuTop'>
-          <div className="MenuHeading">{this.props.heading}</div>
-          <div className="MenuExit" onClick={this.props.closeFn}>
-            <img src={Close} className="MenuClose" />
+      <div className={'Menu ' + this.props.className} id={'menuContainer'}>
+        <div className='MenuTop' id={'menuContainerTop'}>
+          <div className="MenuHeading" id={'menuHeading'}>{this.props.heading}</div>
+          <div className="MenuExit" id={'menuButtonCloseContainer'} onClick={this.props.closeFn}>
+            <img src={Close} className="MenuClose" id={'menuButtonCloseIcon'} />
           </div>
         </div>
-        <div className='MenuInner'>
+        <div className='MenuInner' id={'menuContent'}>
           {this.props.children}
         </div>
       </div>

src/ui/components/menu/Options.tsx

@@ -170,27 +170,27 @@ export default class Options extends React.Component<IProps, IState> {
   render() {
     return (
       <Menu closeFn={this.props.closeFn} className="Options" heading="Options">
-        <div className='OptionSection'>
-          <div className='OptionLabel'>
+        <div className='OptionSection' id={'menuOptionsContainerGameExec'}>
+          <div className='OptionLabel' id={'menuOptionsLabelGameExec'}>
             <Tr text="options.game_exec" />
           </div>
-          <div className='OptionValue'>
+          <div className='OptionValue' id={'menuOptionsDirGameExec'}>
             <DirInput onChange={this.setGameExec} value={this.state?.game_install_path} extensions={['exe']} />
           </div>
         </div>
-        <div className='OptionSection'>
-          <div className='OptionLabel'>
+        <div className='OptionSection' id={'menuOptionsContainerGCJar'}>
+          <div className='OptionLabel' id={'menuOptionsLabelGCJar'}>
             <Tr text="options.grasscutter_jar" />
           </div>
-          <div className='OptionValue'>
+          <div className='OptionValue' id={'menuOptionsDirGCJar'}>
             <DirInput onChange={this.setGrasscutterJar} value={this.state?.grasscutter_path} extensions={['jar']} />
           </div>
         </div>
-        <div className='OptionSection'>
-          <div className='OptionLabel'>
+        <div className='OptionSection' id={'menuOptionsContainerToggleEnc'}>
+          <div className='OptionLabel' id={'menuOptionsLabelToggleEnc'}>
             <Tr text="options.toggle_encryption" />
           </div>
-          <div className='OptionValue'>
+          <div className='OptionValue' id={'menuOptionsButtonToggleEnc'}>
             <BigButton onClick={this.toggleEncryption} id="toggleEnc">
               {
                 this.state.encryption
@@ -201,23 +201,23 @@ export default class Options extends React.Component<IProps, IState> {
 
         <Divider />
         
-        <div className='OptionSection'>
-          <div className='OptionLabel'>
+        <div className='OptionSection' id={'menuOptionsContainerGCWGame'}>
+          <div className='OptionLabel' id={'menuOptionsLabelGCWDame'}>
             <Tr text="options.grasscutter_with_game" />
           </div>
-          <div className='OptionValue'>
+          <div className='OptionValue' id={'menuOptionsCheckboxGCWGame'}>
             <Checkbox onChange={this.toggleGrasscutterWithGame} checked={this.state?.grasscutter_with_game} id="gcWithGame" />
           </div>
         </div>
 
         <Divider />
 
-        <div className='OptionSection'>
-          <div className='OptionLabel'>
+        <div className='OptionSection' id={'menuOptionsContainerThemes'}>
+          <div className='OptionLabel' id={'menuOptionsLabelThemes'}>
             <Tr text="options.theme" />
           </div>
-          <div className='OptionValue'>
-            <select value={this.state.theme} onChange={(event) => {
+          <div className='OptionValue' id={'menuOptionsSelectThemes'}>
+            <select value={this.state.theme} id={'menuOptionsSelectMenuThemes'} onChange={(event) => {
               this.setTheme(event.target.value)
             }}>
               {this.state.themes.map(t => (
@@ -234,20 +234,20 @@ export default class Options extends React.Component<IProps, IState> {
 
         <Divider />
 
-        <div className='OptionSection'>
-          <div className='OptionLabel'>
+        <div className='OptionSection' id={'menuOptionsContainerJavaPath'}>
+          <div className='OptionLabel' id={'menuOptionsLabelJavaPath'}>
             <Tr text="options.java_path" />
           </div>
-          <div className='OptionValue'>
+          <div className='OptionValue' id={'menuOptionsDirJavaPath'}>
             <DirInput onChange={this.setJavaPath} value={this.state?.java_path} extensions={['exe']} />
           </div>
         </div>
 
-        <div className='OptionSection'>
-          <div className='OptionLabel'>
+        <div className='OptionSection' id={'menuOptionsContainerBG'}>
+          <div className='OptionLabel' id={'menuOptionsLabelBG'}>
             <Tr text="options.background" />
           </div>
-          <div className='OptionValue'>
+          <div className='OptionValue' id={'menuOptionsDirBG'}>
             <DirInput
               onChange={this.setCustomBackground}
               value={this.state?.bg_url_or_path}
@@ -262,12 +262,12 @@ export default class Options extends React.Component<IProps, IState> {
           </div>
         </div>
 
-        <div className='OptionSection'>
-          <div className='OptionLabel'>
+        <div className='OptionSection' id={'menuOptionsContainerLang'}>
+          <div className='OptionLabel' id={'menuOptionsLabelLang'}>
             <Tr text="options.language" />
           </div>
-          <div className='OptionValue'>
-            <select value={this.state.current_language} onChange={(event) => {
+          <div className='OptionValue' id={'menuOptionsSelectLang'}>
+            <select value={this.state.current_language} id={'menuOptionsSelectMenuLang'} onChange={(event) => {
               this.setLanguage(event.target.value)
             }}>
               {this.state.language_options.map(lang => (

src/ui/components/news/NewsSection.tsx

@@ -68,9 +68,9 @@ export default class NewsSection extends React.Component<IProps, IState> {
       const commitsList = obj.slice(0, 10)
       const commitsListHtml = commitsList.map((commit: any) => {
         return (
-          <tr className="Commit" key={commit.sha}>
-            <td className="CommitAuthor"><span>{commit.commit.author.name}</span></td>
-            <td className="CommitMessage"><span>{commit.commit.message}</span></td>
+          <tr className="Commit" id={'newsCommitsTable'} key={commit.sha}>
+            <td className="CommitAuthor" id={'newsCommitsAuthor'}><span>{commit.commit.author.name}</span></td>
+            <td className="CommitMessage" id={'newsCommitsCommitMessage'}><span>{commit.commit.message}</span></td>
           </tr>
         )
       })
@@ -108,8 +108,8 @@ export default class NewsSection extends React.Component<IProps, IState> {
 
   render() {
     return (
-      <div className="NewsSection">
-        <div className="NewsTabs">
+      <div className="NewsSection" id={'newsContainer'}>
+        <div className="NewsTabs" id={'newsTabsContainer'}>
           <div className={'NewsTab ' + (this.state.selected === 'commits' ? 'selected' : '')} id="commits" onClick={() => this.setSelected('commits')}>
             <Tr text="news.latest_commits" />
           </div>
@@ -117,7 +117,7 @@ export default class NewsSection extends React.Component<IProps, IState> {
             <Tr text="news.latest_version" />
           </div>
         </div>
-        <table className="NewsContent">
+        <table className="NewsContent" id={'newsContent'}>
             <tbody>
                 {this.state.news}
             </tbody>