Merge pull request #8 from TukanDev/main

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"
 }
 ```
 
@@ -70,6 +70,9 @@ body {
 }
 ```
 
+## How can I change XYZ element?
+Every element is documented and describe [here](/docs/elementIds.md). Every\* single DOM element is assigned an ID to allow for easy and hyper-specific editing.
+
 ## Writing your JS
 
 There are no limitations to what you can do with JS. It is safe, as it is sandboxed within the webpage, so there is no possibility of it being able to do anything more than what any regular webpage can do.

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>