Add storage and UI for anonymizing only the logged in user.

source/options/components/anonymize-usernames.tsx

@@ -37,6 +37,17 @@ export class AnonymizeUsernamesSetting extends Component<SettingProps, State> {
     this.setState({data});
   };
 
+  selfOnlyClicked = async () => {
+    const {data} = this.state;
+    if (data === undefined) {
+      return;
+    }
+
+    data.value.selfOnly = !data.value.selfOnly;
+    await data.save();
+    this.setState({data});
+  };
+
   render() {
     const {data} = this.state;
     if (data === undefined) {
@@ -52,6 +63,17 @@ export class AnonymizeUsernamesSetting extends Component<SettingProps, State> {
       </option>
     ));
 
+    const selfOnlyCheckbox = (
+      <label>
+        <input
+          type="checkbox"
+          checked={data.value.selfOnly}
+          onClick={this.selfOnlyClicked}
+        ></input>
+        Only hide own username
+      </label>
+    );
+
     return (
       <Setting {...this.props}>
         <p class="info">
@@ -67,6 +89,7 @@ export class AnonymizeUsernamesSetting extends Component<SettingProps, State> {
               {replacementTypeOptions}
             </select>
           </li>
+          <li>{selfOnlyCheckbox}</li>
         </ul>
       </Setting>
     );

source/storage/anonymize-usernames.ts

@@ -20,4 +20,5 @@ export function isReplacementType(input: string): input is ReplacementType {
  */
 export type AnonymizeUsernamesData = {
   replacementType: ReplacementType;
+  selfOnly: boolean;
 };

source/storage/exports.ts

@@ -84,6 +84,7 @@ export const storageValues = {
     key: Feature.AnonymizeUsernames,
     value: {
       replacementType: ReplacementType.Numerical,
+      selfOnly: false,
     },
     storage: browser.storage.sync,
   }),