Add a small plugin for submitting localizations from within Mailspring

app/internal_packages/localizer-help/lib/main.jsx

@@ -0,0 +1,162 @@
+import {
+  localized,
+  MailspringAPIRequest,
+  React,
+  WorkspaceStore,
+  ComponentRegistry,
+} from 'mailspring-exports';
+import { remote } from 'electron';
+
+class SubmitLocalizationsBar extends React.Component {
+  static displayName = 'SubmitLocalizationsBar';
+
+  state = {
+    current: '',
+    proposed: '',
+    selecting: false,
+  };
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.onSelectionBogusClick, true);
+    document.removeEventListener('mousedown', this.onSelectionMouseDown);
+  }
+
+  onSubmit = async () => {
+    const { current, proposed } = this.state;
+
+    try {
+      const { status } = await MailspringAPIRequest.makeRequest({
+        server: 'identity',
+        method: 'POST',
+        body: { current, proposed, language: window.navigator.language },
+        path: '/api/localization-suggestion',
+        json: true,
+      });
+      if (status === 'success') {
+        remote.dialog.showMessageBox({
+          type: 'info',
+          buttons: [localized('OK')],
+          message: localized('Thank You!'),
+          title: localized('Thank You!'),
+          detail: localized(
+            `Your updated localization will be reviewed and included in a future version of Mailspring.`
+          ),
+        });
+      }
+    } catch (err) {
+      AppEnv.showErrorDialog(err.toString());
+    }
+  };
+
+  onSelectionBogusClick = event => {
+    event.preventDefault();
+    event.stopPropagation();
+    document.removeEventListener('click', this.onSelectionBogusClick, true);
+  };
+
+  onSelectionMouseDown = event => {
+    let text = null;
+    const element = document.elementFromPoint(event.clientX, event.clientY);
+
+    if (element) {
+      if (element.nodeName === 'INPUT') {
+        if (element.value) {
+          text = element.value;
+        } else {
+          text = element.placeholder;
+        }
+      } else if (element.innerText.length > 0) {
+        text = element.innerText;
+      } else {
+        const parent = element.closest('[title]');
+        text = parent ? parent.title : '';
+      }
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    document.removeEventListener('mousedown', this.onSelectionMouseDown);
+    if (text && text.length) {
+      this.setState({ selecting: false, current: text, proposed: text });
+    } else {
+      this.setState({ selecting: false });
+    }
+  };
+
+  onToggleSelectionMode = () => {
+    if (this.state.selecting) {
+      document.removeEventListener('mousedown', this.onSelectionMouseDown);
+      document.removeEventListener('click', this.onSelectionBogusClick, true);
+      this.setState({ selecting: false });
+    } else {
+      document.addEventListener('mousedown', this.onSelectionMouseDown);
+      document.addEventListener('click', this.onSelectionBogusClick, true);
+      this.setState({ selecting: true });
+    }
+  };
+
+  render() {
+    const { selecting, current, proposed } = this.state;
+
+    return (
+      <div style={{ height: 40, background: 'moccasin' }}>
+        <div style={{ display: 'flex', alignItems: 'center', height: 40, padding: 10 }}>
+          <span style={{ marginRight: 10, flex: 1 }}>
+            {localized('Submit Improved Localizations')} ({window.navigator.language})
+          </span>
+          <button
+            className="btn"
+            style={selecting ? { border: '1px solid black' } : {}}
+            onClick={this.onToggleSelectionMode}
+          >
+            <img
+              alt="icon"
+              src={'mailspring://localizer-help/assets/choose-element.png'}
+              style={{ width: 13 }}
+            />
+          </button>
+          <input
+            type="text"
+            style={{ flex: 1 }}
+            value={current}
+            placeholder={localized('Existing')}
+            onChange={e => this.setState({ current: e.target.value })}
+          />
+          <span style={{ margin: 10 }}>=</span>
+          <input
+            type="text"
+            style={{ flex: 1 }}
+            value={proposed}
+            placeholder={localized('Localized')}
+            onChange={e => this.setState({ proposed: e.target.value })}
+          />
+          <button onClick={this.onSubmit} className="btn" type="submit" style={{ marginLeft: 10 }}>
+            {localized('Submit')}
+          </button>
+        </div>
+      </div>
+    );
+  }
+}
+
+let visible = false;
+
+export function activate() {
+  AppEnv.commands.add(document.body, 'window:toggle-localizer-tools', () => {
+    if (!visible) {
+      ComponentRegistry.register(SubmitLocalizationsBar, {
+        location: WorkspaceStore.Sheet.Global.Header,
+      });
+    } else {
+      ComponentRegistry.unregister(SubmitLocalizationsBar);
+    }
+
+    visible = !visible;
+  });
+}
+
+export function deactivate() {
+  if (visible) {
+    ComponentRegistry.unregister(SubmitLocalizationsBar);
+  }
+}

app/internal_packages/localizer-help/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "localizer-help",
+  "version": "0.1.0",
+  "main": "./lib/main",
+
+  "isOptional": true,
+  "isHiddenOnPluginsPage": true,
+
+  "title": "Localizer Helper",
+  "description": "Allows localizers to click UI elements and suggest localizations inline.",
+  "icon": "./icon.png",
+
+  "license": "GPL-3.0",
+  "engines": {
+    "mailspring": "*"
+  }
+}

app/lang/en.json

@@ -199,6 +199,7 @@
   "Enter your email account credentials to get started. Mailspring\\nstores your email password securely and it is never sent to our servers.": "Enter your email account credentials to get started. Mailspring\\nstores your email password securely and it is never sent to our servers.",
   "Error": "Error",
   "Event": "Event",
+  "Existing": "Existing",
   "Exit": "Exit",
   "Exit Full Screen": "Exit Full Screen",
   "Expand / collapse conversation": "Expand / collapse conversation",
@@ -309,6 +310,7 @@
   "Loading Messages": "Loading Messages",
   "Loading...": "Loading...",
   "Local Data": "Local Data",
+  "Localized": "Localized",
   "Log Data": "Log Data",
   "Look Up “%@”": "Look Up “%@”",
   "Looking for accounts...": "Looking for accounts...",
@@ -645,6 +647,8 @@
   "Stop": "Stop",
   "Subject": "Subject",
   "Subject Line": "Subject Line",
+  "Submit": "Submit",
+  "Submit Improved Localizations": "Submit Improved Localizations",
   "Subscribe to different update channels to receive previews of new features. Note that some update channels may be less stable!": "Subscribe to different update channels to receive previews of new features. Note that some update channels may be less stable!",
   "Subscription": "Subscription",
   "Successfully connected to %@!": "Successfully connected to %@!",
@@ -660,6 +664,7 @@
   "Template Creation Error": "Template Creation Error",
   "Templates": "Templates",
   "Templates Guide": "Templates Guide",
+  "Thank You!": "Thank You!",
   "Thank you for helping debug Mailspring. Mailspring will now restart.": "Thank you for helping debug Mailspring. Mailspring will now restart.",
   "Thanks for downloading Mailspring! Would you like to move it to your Applications folder?": "Thanks for downloading Mailspring! Would you like to move it to your Applications folder?",
   "The Mailspring Team": "The Mailspring Team",
@@ -710,6 +715,7 @@
   "Toggle Dev Tools": "Toggle Dev Tools",
   "Toggle Developer Tools": "Toggle Developer Tools",
   "Toggle Italic": "Toggle Italic",
+  "Toggle Localizer Tools": "Toggle Localizer Tools",
   "Toggle Screenshot Mode": "Toggle Screenshot Mode",
   "Tomorrow": "Tomorrow",
   "Tomorrow Evening": "Tomorrow Evening",
@@ -812,6 +818,7 @@
   "Your `Sent Mail` folder could not be automatically detected. Visit Preferences > Folders to choose a Sent folder and then try again.": "Your `Sent Mail` folder could not be automatically detected. Visit Preferences > Folders to choose a Sent folder and then try again.",
   "Your `Trash` folder could not be automatically detected. Visit Preferences > Folders to choose a Trash folder and then try again.": "Your `Trash` folder could not be automatically detected. Visit Preferences > Folders to choose a Trash folder and then try again.",
   "Your name": "Your name",
+  "Your updated localization will be reviewed and included in a future version of Mailspring.": "Your updated localization will be reviewed and included in a future version of Mailspring.",
   "Zoom": "Zoom",
   "an email address": "an email address",
   "an email subject": "an email subject",

app/menus/darwin.js

@@ -196,6 +196,7 @@ module.exports = {
         { label: localized('Install a Plugin') + '...', command: 'window:install-package' },
         { type: 'separator' },
         { label: localized('Reload'), command: 'window:reload' },
+        { label: localized('Toggle Localizer Tools'), command: 'window:toggle-localizer-tools' },
         { label: localized('Toggle Developer Tools'), command: 'window:toggle-dev-tools' },
         {
           label: localized('Toggle Component Regions'),

app/menus/linux.js

@@ -167,6 +167,7 @@ module.exports = {
         { label: localized('Install a Plugin') + '...', command: 'window:install-package' },
         { type: 'separator' },
         { label: localized('Reload'), command: 'window:reload' },
+        { label: localized('Toggle Localizer Tools'), command: 'window:toggle-localizer-tools' },
         { label: localized('Toggle Developer Tools'), command: 'window:toggle-dev-tools' },
         {
           label: localized('Toggle Component Regions'),

app/menus/win32.js

@@ -145,6 +145,7 @@ module.exports = {
         { label: localized('Install a Plugin') + '...', command: 'window:install-package' },
         { type: 'separator' },
         { label: localized('Reload'), command: 'window:reload' },
+        { label: localized('Toggle Localizer Tools'), command: 'window:toggle-localizer-tools' },
         { label: localized('Toggle Developer Tools'), command: 'window:toggle-dev-tools' },
         {
           label: localized('Toggle Component Regions'),