Move the 100% match indicator into the editor menu (#4413)

The indicator pushed the menu down by its own height on every string
that had a perfect match, and let it back up on every string that didn't.
Moving between such strings made the menu jump, which #4410 made worse by
removing the confirmation dialog that used to slow that movement down.

Show it next to the translation length instead.

Author: mathjazz

translate/public/locale/en-US/translate.ftl

@@ -236,7 +236,8 @@ editor-KeyboardShortcuts--copy-from-next-helper-shortcut = <mod1>Ctrl</mod1> + <
 ## Editor machinery source indicator
 ## Shown when a perfect match is provided automatically from translation memory
 
-editor-MachinerySourceIndicator--text = <stress>100%</stress> MATCH FROM TRANSLATION MEMORY
+editor-MachinerySourceIndicator--match = <stress>100%</stress> MATCH
+    .title = 100% Translation Memory match
 
 
 ## Editor New Contributor Tooltip

translate/src/modules/editor/components/Editor.tsx

@@ -5,13 +5,11 @@ import { TranslationForm } from '~/modules/translationform';
 import './Editor.css';
 import { EditorMenu } from './EditorMenu';
 import { NewContributorTooltip } from './NewContributorTooltip';
-import { MachinerySourceIndicator } from './MachinerySourceIndicator';
 
 export const Editor = () => (
   <div className='editor'>
     <NewContributorTooltip />
     <TranslationForm />
-    <MachinerySourceIndicator />
     <EditorMenu />
   </div>
 );

translate/src/modules/editor/components/EditorMenu.tsx

@@ -16,6 +16,7 @@ import { EditorSettings } from './EditorSettings';
 import { FailedChecks } from './FailedChecks';
 import { FtlSwitch } from './FtlSwitch';
 import { KeyboardShortcuts } from './KeyboardShortcuts';
+import { MachinerySourceIndicator } from './MachinerySourceIndicator';
 import { TranslationLength } from './TranslationLength';
 
 /**
@@ -79,6 +80,7 @@ function MenuContent() {
       <EditorSettings settings={settings} updateSetting={updateSetting} />
       <KeyboardShortcuts />
       <TranslationLength />
+      <MachinerySourceIndicator />
       <div className='actions'>
         <Localized id='editor-EditorMenu--button-copy' attrs={{ title: true }}>
           <button

translate/src/modules/editor/components/MachinerySourceIndicator.css

@@ -1,22 +1,13 @@
 .tm-source {
+  background-color: var(--background-1);
+  border: 1px solid var(--main-border-1);
+  border-radius: 3px;
+  color: var(--editor-menu-color);
+  float: left;
   font-size: 11px;
-  padding: 10px 0;
-  border-bottom: 1px solid var(--main-border-1);
-  border-top: 1px solid var(--main-border-1);
-  width: 100%;
-  text-align: center;
-  background: var(--editor-menu-background);
-  color: var(--light-grey-6);
-}
-
-.translationform + .tm-source {
-  background: var(--editor-form-background);
-}
-
-.dark-theme[data-editor-theme='dark'] .singlefield ~ .tm-source,
-.light-theme[data-editor-theme='light'] .singlefield ~ .tm-source,
-[data-editor-theme='match'] .singlefield ~ .tm-source {
-  background: var(--editor-background);
+  line-height: 20px;
+  margin-left: 5px;
+  padding: 9px;
 }
 
 .tm-source .stress {

translate/src/modules/editor/components/MachinerySourceIndicator.test.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { EditorData } from '~/context/Editor';
+import { MockLocalizationProvider } from '~/test/utils';
+
+import { MachinerySourceIndicator } from './MachinerySourceIndicator';
+
+const field = (value) => ({
+  id: '',
+  name: '',
+  keys: [],
+  labels: [],
+  handle: { current: { value } },
+});
+
+const mount = (editor) =>
+  render(
+    <MockLocalizationProvider
+      resources={[
+        `editor-MachinerySourceIndicator--match = <stress>100%</stress> MATCH
+    .title = 100% Translation Memory match`,
+      ]}
+    >
+      <EditorData.Provider
+        value={{
+          fields: [field('Bonjour')],
+          machinery: { manual: false, sources: [], translation: 'Bonjour' },
+          sourceView: false,
+          ...editor,
+        }}
+      >
+        <MachinerySourceIndicator />
+      </EditorData.Provider>
+    </MockLocalizationProvider>,
+  );
+
+describe('<MachinerySourceIndicator>', () => {
+  it('shows for content that was filled in automatically', () => {
+    const { container } = mount();
+
+    const indicator = container.querySelector('.tm-source');
+    expect(indicator).not.toBeNull();
+    expect(indicator.textContent).toContain('100%');
+    expect(indicator.getAttribute('title')).toBeTruthy();
+  });
+
+  it('shows nothing for a manual copy', () => {
+    const { container } = mount({
+      machinery: { manual: true, sources: [], translation: 'Bonjour' },
+    });
+
+    expect(container.querySelector('.tm-source')).toBeNull();
+  });
+
+  it('shows nothing once the filled-in content has been edited', () => {
+    const { container } = mount({ fields: [field('Bonjour !')] });
+
+    expect(container.querySelector('.tm-source')).toBeNull();
+  });
+});

translate/src/modules/editor/components/MachinerySourceIndicator.tsx

@@ -22,11 +22,12 @@ export function MachinerySourceIndicator() {
 
   return (
     <Localized
-      id='editor-MachinerySourceIndicator--text'
+      id='editor-MachinerySourceIndicator--match'
+      attrs={{ title: true }}
       elems={{ stress: <span className='stress' /> }}
     >
-      <div className='tm-source'>
-        {'<stress>100%</stress> MATCH FROM TRANSLATION MEMORY'}
+      <div className='tm-source' title='100% Translation Memory match'>
+        {'<stress>100%</stress> MATCH'}
       </div>
     </Localized>
   );