refactor(tutorial): simplify hello_inject step

- Highlight inject button instead of entire editor container
- Add button-specific pulse animation (background flash)
- Remove 'Select Slot' feature item and i18n entries
- Use inset box-shadow for highlight (avoids overflow clipping)
- Update gate hint to reference flashing button

Signed-off-by: VIFEX <vifextech@foxmail.com>

Author: FASTSHIFT

Tools/WebServer/static/css/tutorial.css

@@ -41,23 +41,49 @@
 
 /* Highlighted target section */
 .tutorial-highlight-target {
-  outline: 2px solid var(--vscode-focusBorder, #007acc);
-  outline-offset: -2px;
+  outline: none;
+  box-shadow:
+    inset 0 0 0 3px var(--vscode-focusBorder, #007acc),
+    inset 0 0 12px rgba(0, 122, 204, 0.3);
   border-radius: 4px;
-  transition: outline-color 0.3s ease;
+  transition: box-shadow 0.3s ease;
 }
 
 .tutorial-highlight-pulse {
   animation: tutorial-pulse 2s ease-in-out infinite;
 }
 
+/* Button-specific highlight: flash background color */
+button.tutorial-highlight-target {
+  outline: none;
+  box-shadow: none;
+  animation: tutorial-btn-pulse 1s ease-in-out infinite;
+  border-radius: 4px;
+}
+
+@keyframes tutorial-btn-pulse {
+  0%,
+  100% {
+    background: var(--vscode-button-bg, #007acc);
+    filter: brightness(1);
+  }
+  50% {
+    background: var(--vscode-button-bg, #007acc);
+    filter: brightness(1.6);
+  }
+}
+
 @keyframes tutorial-pulse {
   0%,
   100% {
-    outline-color: var(--vscode-focusBorder, #007acc);
+    box-shadow:
+      inset 0 0 0 3px var(--vscode-focusBorder, #007acc),
+      inset 0 0 12px rgba(0, 122, 204, 0.3);
   }
   50% {
-    outline-color: rgba(0, 122, 204, 0.4);
+    box-shadow:
+      inset 0 0 0 3px rgba(0, 122, 204, 0.5),
+      inset 0 0 20px rgba(0, 122, 204, 0.15);
   }
 }
 

Tools/WebServer/static/js/features/tutorial.js

@@ -66,7 +66,7 @@ const TUTORIAL_STEPS = [
   {
     id: 'hello_inject',
     sidebar: null,
-    highlight: '#editorContainer',
+    highlight: '#injectBtn',
     gate: () => {
       const slotStates = window.FPBState?.slotStates || [];
       return slotStates.some((s) => s && s.occupied);
@@ -861,7 +861,7 @@ const stepRenderers = {
   hello_inject() {
     const step = TUTORIAL_STEPS.find((s) => s.id === 'hello_inject');
     return `
-      <p>${t('tutorial.hello_inject_desc', 'The generated patch template can be injected directly. Select a slot and click inject.')}</p>
+      <p>${t('tutorial.hello_inject_desc', 'Edit the patch code, then click the flashing Inject button.')}</p>
       <div class="tutorial-feature-list">
         <div class="tutorial-feature-item">
           <i class="codicon codicon-edit"></i>
@@ -870,18 +870,11 @@ const stepRenderers = {
             ${t('tutorial.hello_inject_edit_desc', 'Change the <code>fl_println</code> string to your own message.')}
           </div>
         </div>
-        <div class="tutorial-feature-item">
-          <i class="codicon codicon-layers"></i>
-          <div>
-            <strong>${t('tutorial.hello_inject_slot', 'Select Slot')}</strong>
-            ${t('tutorial.hello_inject_slot_desc', 'Make sure an available FPB slot is selected in the toolbar.')}
-          </div>
-        </div>
         <div class="tutorial-feature-item">
           <i class="codicon codicon-play"></i>
           <div>
             <strong>${t('tutorial.hello_inject_run', 'Click Inject')}</strong>
-            ${t('tutorial.hello_inject_run_desc', 'Click the inject button in the toolbar and wait for completion.')}
+            ${t('tutorial.hello_inject_run_desc', 'Click the flashing inject button in the toolbar and wait for completion.')}
           </div>
         </div>
       </div>

Tools/WebServer/static/js/locales/en.js

@@ -586,11 +586,9 @@ window.i18nResources['en'] = {
       hello_inject_desc: 'Modify the code and click inject.',
       hello_inject_edit: 'Edit Code',
       hello_inject_edit_desc: 'Change the <code>fl_println</code> string',
-      hello_inject_slot: 'Select Slot',
-      hello_inject_slot_desc: 'Select an available slot in toolbar',
       hello_inject_run: 'Click Inject',
       hello_inject_run_desc: 'Toolbar → Inject button',
-      gate_hello_inject: 'Select slot → click Inject',
+      gate_hello_inject: 'Click the flashing Inject button',
       gate_hello_inject_ok: '✅ Injection successful!',
 
       gate_hello_verify: 'Switch to Serial terminal tab',

Tools/WebServer/static/js/locales/zh-CN.js

@@ -545,11 +545,9 @@ window.i18nResources['zh-CN'] = {
       hello_inject_desc: '修改代码后点击注入。',
       hello_inject_edit: '修改代码',
       hello_inject_edit_desc: '修改 <code>fl_println</code> 中的字符串',
-      hello_inject_slot: '选择 Slot',
-      hello_inject_slot_desc: '工具栏选择可用槽位',
       hello_inject_run: '点击「注入」',
       hello_inject_run_desc: '工具栏 → 注入按钮',
-      gate_hello_inject: '选择槽位 → 点击「注入」',
+      gate_hello_inject: '点击闪烁的「注入」按钮',
       gate_hello_inject_ok: '✅ 注入成功！',
 
       gate_hello_verify: '切换到「串口」终端标签页',

Tools/WebServer/static/js/locales/zh-TW.js

@@ -546,11 +546,9 @@ window.i18nResources['zh-TW'] = {
       hello_inject_desc: '修改程式碼後點擊注入。',
       hello_inject_edit: '修改程式碼',
       hello_inject_edit_desc: '修改 <code>fl_println</code> 中的字串',
-      hello_inject_slot: '選擇 Slot',
-      hello_inject_slot_desc: '工具列選擇可用槽位',
       hello_inject_run: '點擊「注入」',
       hello_inject_run_desc: '工具列 → 注入按鈕',
-      gate_hello_inject: '選擇槽位 → 點擊「注入」',
+      gate_hello_inject: '點擊閃爍的「注入」按鈕',
       gate_hello_inject_ok: '✅ 注入成功！',
 
       gate_hello_verify: '切換到「串口」終端標籤頁',

Tools/WebServer/tests/js/test_tutorial.js

@@ -621,7 +621,7 @@ module.exports = function (w) {
       assertTrue(body.innerHTML.includes('Inject'));
     });
 
-    it('hello_inject step has 3 feature items', () => {
+    it('hello_inject step has 2 feature items', () => {
       resetMocks();
       clearTutorialStorage();
       setupTutorialDOM();
@@ -630,7 +630,7 @@ module.exports = function (w) {
       const body = getElement('tutorialBody');
       const count = (body.innerHTML.match(/tutorial-feature-item/g) || [])
         .length;
-      assertEqual(count, 3);
+      assertEqual(count, 2);
     });
   });