Add element id's and their documentation

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>