Add show diff check marks setting to accessibility settings

app/src/lib/stores/app-store.ts

@@ -238,7 +238,11 @@ import {
 } from './updates/changes-state'
 import { ManualConflictResolution } from '../../models/manual-conflict-resolution'
 import { BranchPruner } from './helpers/branch-pruner'
-import { enableLinkUnderlines, enableMoveStash } from '../feature-flag'
+import {
+  enableDiffCheckMarks,
+  enableLinkUnderlines,
+  enableMoveStash,
+} from '../feature-flag'
 import { Banner, BannerType } from '../../models/banner'
 import { ComputedAction } from '../../models/computed-action'
 import {
@@ -2223,10 +2227,9 @@ export class AppStore extends TypedBaseStore<IAppState> {
       ? getBoolean(underlineLinksKey, underlineLinksDefault)
       : false
 
-    this.showDiffCheckMarks = getBoolean(
-      showDiffCheckMarksKey,
-      showDiffCheckMarksDefault
-    )
+    this.showDiffCheckMarks = enableDiffCheckMarks()
+      ? getBoolean(showDiffCheckMarksKey, showDiffCheckMarksDefault)
+      : false
 
     this.emitUpdateNow()
 

app/src/ui/app.tsx

@@ -1661,6 +1661,7 @@ export class App extends React.Component<IAppProps, IAppState> {
             repositoryIndicatorsEnabled={this.state.repositoryIndicatorsEnabled}
             onOpenFileInExternalEditor={this.openFileInExternalEditor}
             underlineLinks={this.state.underlineLinks}
+            showDiffCheckMarks={this.state.showDiffCheckMarks}
           />
         )
       case PopupType.RepositorySettings: {

app/src/ui/preferences/accessibility.tsx

@@ -5,6 +5,9 @@ import { Checkbox, CheckboxValue } from '../lib/checkbox'
 interface IAccessibilityPreferencesProps {
   readonly underlineLinks: boolean
   readonly onUnderlineLinksChanged: (value: boolean) => void
+
+  readonly showDiffCheckMarks: boolean
+  readonly onShowDiffCheckMarksChanged: (value: boolean) => void
 }
 
 export class Accessibility extends React.Component<
@@ -36,6 +39,25 @@ export class Accessibility extends React.Component<
             messages, comments, and other text fields. This can help make links
             easier to distinguish. {this.renderExampleLink()}
           </p>
+
+          <Checkbox
+            label="Show Checkmarks In Diff"
+            value={
+              this.props.showDiffCheckMarks
+                ? CheckboxValue.On
+                : CheckboxValue.Off
+            }
+            onChange={this.onShowDiffCheckMarksChanged}
+            ariaDescribedBy="diff-checkmarks-setting-description"
+          />
+          <p
+            id="diff-checkmarks-setting-description"
+            className="git-settings-description"
+          >
+            When enabled, check marks will be displayed along side the line
+            numbers and groups of line numbers in the diff when committing. When
+            disabled, the line number controls will be less prominent.
+          </p>
         </div>
       </DialogContent>
     )
@@ -59,4 +81,10 @@ export class Accessibility extends React.Component<
   ) => {
     this.props.onUnderlineLinksChanged(event.currentTarget.checked)
   }
+
+  private onShowDiffCheckMarksChanged = (
+    event: React.FormEvent<HTMLInputElement>
+  ) => {
+    this.props.onShowDiffCheckMarksChanged(event.currentTarget.checked)
+  }
 }

app/src/ui/preferences/preferences.tsx

@@ -70,6 +70,7 @@ interface IPreferencesProps {
   readonly repositoryIndicatorsEnabled: boolean
   readonly onOpenFileInExternalEditor: (path: string) => void
   readonly underlineLinks: boolean
+  readonly showDiffCheckMarks: boolean
 }
 
 interface IPreferencesState {
@@ -114,6 +115,8 @@ interface IPreferencesState {
   readonly globalGitConfigPath: string | null
 
   readonly underlineLinks: boolean
+
+  readonly showDiffCheckMarks: boolean
 }
 
 /** The app-level preferences component. */
@@ -154,6 +157,7 @@ export class Preferences extends React.Component<
       isLoadingGitConfig: true,
       globalGitConfigPath: null,
       underlineLinks: this.props.underlineLinks,
+      showDiffCheckMarks: this.props.showDiffCheckMarks,
     }
   }
 
@@ -440,6 +444,8 @@ export class Preferences extends React.Component<
         View = (
           <Accessibility
             underlineLinks={this.state.underlineLinks}
+            showDiffCheckMarks={this.state.showDiffCheckMarks}
+            onShowDiffCheckMarksChanged={this.onShowDiffCheckMarksChanged}
             onUnderlineLinksChanged={this.onUnderlineLinksChanged}
           />
         )
@@ -550,6 +556,10 @@ export class Preferences extends React.Component<
     this.setState({ underlineLinks })
   }
 
+  private onShowDiffCheckMarksChanged = (showDiffCheckMarks: boolean) => {
+    this.setState({ showDiffCheckMarks })
+  }
+
   private renderFooter() {
     const hasDisabledError = this.state.disallowedCharactersMessage != null