feat:更新参考文献提示工具 #709
Open
feat:更新参考文献提示工具 #709
+773
−608
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
审阅者指南此 PR 通过重构 ReferenceTooltips 小工具的 JavaScript 和 CSS，使其与最新的上游版本同步，从而提高了模块化、可配置性、主题化（包括暗模式）和可维护性。 重构后的 ReferenceTooltips 模块的类图classDiagram
class TooltippedElement {
+$element
+$originalElement
+type
+comment
+noRef
+showRef($element, ePageX, ePageY)
+hideRef(immediately)
+onBodyClick(e)
+onWindowResize()
}
class Tooltip {
+te : TooltippedElement
+id
+$content
+$element
+$tail
+parent
+isPresent
+disappearing
+show()
+hide()
+calculatePosition(ePageX, ePageY)
+upToTopParent(func, parameters, stopAtTrue)
}
TooltippedElement --> Tooltip : creates
Tooltip --> TooltippedElement : references
class SettingsDialog {
+enableCheckbox
+activationMethodSelect
+delayInput
+tooltipsForCommentsCheckbox
+panelSettings
+panelDisabled
+stackLayout
+getSetupProcess(data)
+getActionProcess(action)
+getBodyHeight()
}
class OO.ui.WindowManager
SettingsDialog --> OO.ui.WindowManager : uses
Tooltip --> SettingsDialog : opens
文件级更改
提示和命令与 Sourcery 交互
自定义你的体验访问你的仪表板以：
获取帮助Original review guide in EnglishReviewer's GuideThis PR syncs the ReferenceTooltips gadget to the latest upstream version by refactoring its JavaScript and CSS for improved modularity, configurability, theming (including dark mode), and maintainability. Class diagram for refactored ReferenceTooltips modulesclassDiagram
class TooltippedElement {
+$element
+$originalElement
+type
+comment
+noRef
+showRef($element, ePageX, ePageY)
+hideRef(immediately)
+onBodyClick(e)
+onWindowResize()
}
class Tooltip {
+te : TooltippedElement
+id
+$content
+$element
+$tail
+parent
+isPresent
+disappearing
+show()
+hide()
+calculatePosition(ePageX, ePageY)
+upToTopParent(func, parameters, stopAtTrue)
}
TooltippedElement --> Tooltip : creates
Tooltip --> TooltippedElement : references
class SettingsDialog {
+enableCheckbox
+activationMethodSelect
+delayInput
+tooltipsForCommentsCheckbox
+panelSettings
+panelDisabled
+stackLayout
+getSetupProcess(data)
+getActionProcess(action)
+getBodyHeight()
}
class OO.ui.WindowManager
SettingsDialog --> OO.ui.WindowManager : uses
Tooltip --> SettingsDialog : opens
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
你好！我已审阅了你的更改，以下是一些反馈：
- 这个文件变得非常大，并且混合了多个关注点；请考虑将其拆分为独立的模块或类（例如 Tooltip、SettingsDialog、初始化），以提高可读性和可维护性。
- 存在大量
var重复声明——始终切换到const/let有助于防止变量提升陷阱并使作用域更清晰。 - 存在遗留的注释掉的代码（例如
mediawiki.page.ready变通方法和cursorWaitCSS 切换）；清理这些代码将减少干扰并避免混淆。
给 AI 代理的提示
请处理此代码审查中的注释：
## 整体注释
- 这个文件变得非常大，并且混合了多个关注点；请考虑将其拆分为独立的模块或类（例如 Tooltip、SettingsDialog、初始化），以提高可读性和可维护性。
- 存在大量 `var` 重复声明——始终切换到 `const`/`let` 有助于防止变量提升陷阱并使作用域更清晰。
- 存在遗留的注释掉的代码（例如 `mediawiki.page.ready` 变通方法和 `cursorWait` CSS 切换）；清理这些代码将减少干扰并避免混淆。
## 单独注释
### 注释 1
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:91-105` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 避免在块内使用函数声明，优先使用函数赋值表达式。([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>解释</summary>函数声明在 Javascript 中可能会被提升（hoisted），但不同浏览器之间的行为不一致。
变量提升通常会造成混淆，应避免使用。与其在块内使用函数声明，不如使用函数表达式，它会在作用域内创建函数。
</details>
</issue_to_address>
### 注释 2
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:107-113` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 避免在块内使用函数声明，优先使用函数赋值表达式。([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>解释</summary>函数声明在 Javascript 中可能会被提升（hoisted），但不同浏览器之间的行为不一致。
变量提升通常会造成混淆，应避免使用。与其在块内使用函数声明，不如使用函数表达式，它会在作用域内创建函数。
</details>
</issue_to_address>
### 注释 3
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:115-119` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 避免在块内使用函数声明，优先使用函数赋值表达式。([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>解释</summary>函数声明在 Javascript 中可能会被提升（hoisted），但不同浏览器之间的行为不一致。
变量提升通常会造成混淆，应避免使用。与其在块内使用函数声明，不如使用函数表达式，它会在作用域内创建函数。
</details>
</issue_to_address>
### 注释 4
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:121-144` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 避免在块内使用函数声明，优先使用函数赋值表达式。([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>解释</summary>函数声明在 Javascript 中可能会被提升（hoisted），但不同浏览器之间的行为不一致。
变量提升通常会造成混淆，应避免使用。与其在块内使用函数声明，不如使用函数表达式，它会在作用域内创建函数。
</details>
</issue_to_address>
### 注释 5
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:125` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 使用 `const` 或 `let` 代替 `var`。([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>解释</summary>推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。
如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。
来自 [Airbnb JavaScript 风格指南](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### 注释 6
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:150-163` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 避免在块内使用函数声明，优先使用函数赋值表达式。([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>解释</summary>函数声明在 Javascript 中可能会被提升（hoisted），但不同浏览器之间的行为不一致。
变量提升通常会造成混淆，应避免使用。与其在块内使用函数声明，不如使用函数表达式，它会在作用域内创建函数。
</details>
</issue_to_address>
### 注释 7
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:151` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 使用 `const` 或 `let` 代替 `var`。([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>解释</summary>推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。
如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。
来自 [Airbnb JavaScript 风格指南](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### 注释 8
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:165-169` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 避免在块内使用函数声明，优先使用函数赋值表达式。([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>解释</summary>函数声明在 Javascript 中可能会被提升（hoisted），但不同浏览器之间的行为不一致。
变量提升通常会造成混淆，应避免使用。与其在块内使用函数声明，不如使用函数表达式，它会在作用域内创建函数。
</details>
</issue_to_address>
### 注释 9
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:248` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 使用 `const` 或 `let` 代替 `var`。([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>解释</summary>推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。
如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。
来自 [Airbnb JavaScript 风格指南](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### 注释 10
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:345` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 使用 `const` 或 `let` 代替 `var`。([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>解释</summary>推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。
如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。
来自 [Airbnb JavaScript 风格指南](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### 注释 11
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:347-349` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 避免在块内使用函数声明，优先使用函数赋值表达式。([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>解释</summary>函数声明在 Javascript 中可能会被提升（hoisted），但不同浏览器之间的行为不一致。
变量提升通常会造成混淆，应避免使用。与其在块内使用函数声明，不如使用函数表达式，它会在作用域内创建函数。
</details>
</issue_to_address>
### 注释 12
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:376-889` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 避免在块内使用函数声明，优先使用函数赋值表达式。([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>解释</summary>函数声明在 Javascript 中可能会被提升（hoisted），但不同浏览器之间的行为不一致。
变量提升通常会造成混淆，应避免使用。与其在块内使用函数声明，不如使用函数表达式，它会在作用域内创建函数。
</details>
</issue_to_address>
### 注释 13
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:377-587` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 避免在块内使用函数声明，优先使用函数赋值表达式。([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>解释</summary>函数声明在 Javascript 中可能会被提升（hoisted），但不同浏览器之间的行为不一致。
变量提升通常会造成混淆，应避免使用。与其在块内使用函数声明，不如使用函数表达式，它会在作用域内创建函数。
</details>
</issue_to_address>
### 注释 14
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:384-386` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 避免在块内使用函数声明，优先使用函数赋值表达式。([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>解释</summary>函数声明在 Javascript 中可能会被提升（hoisted），但不同浏览器之间的行为不一致。
变量提升通常会造成混淆，应避免使用。与其在块内使用函数声明，不如使用函数表达式，它会在作用域内创建函数。
</details>
</issue_to_address>
### 注释 15
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:411` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 使用 `const` 或 `let` 代替 `var`。([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>解释</summary>推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。
如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。
来自 [Airbnb JavaScript 风格指南](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### 注释 16
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:525` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 使用 `const` 或 `let` 代替 `var`。([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>解释</summary>推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。
如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。
来自 [Airbnb JavaScript 风格指南](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### 注释 17
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:529` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 使用 `const` 或 `let` 代替 `var`。([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>解释</summary>推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。
如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。
来自 [Airbnb JavaScript 风格指南](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### 注释 18
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:589` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 使用 `const` 或 `let` 代替 `var`。([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>解释</summary>推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。
如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。
来自 [Airbnb JavaScript 风格指南](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### 注释 19
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:601` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 使用 `const` 或 `let` 代替 `var`。([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>解释</summary>推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。
如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。
来自 [Airbnb JavaScript 风格指南](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### 注释 20
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:643-645` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 使用 `const` 或 `let` 代替 `var`。([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>解释</summary>推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。
如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。
来自 [Airbnb JavaScript 风格指南](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### 注释 21
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:647-649` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 使用 `const` 或 `let` 代替 `var`。([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>解释</summary>推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。
如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。
来自 [Airbnb JavaScript 风格指南](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### 注释 22
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:739` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 使用 `const` 或 `let` 代替 `var`。([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>解释</summary>推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。
如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。
来自 [Airbnb JavaScript 风格指南](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### 注释 23
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:780` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 使用 `const` 或 `let` 代替 `var`。([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>解释</summary>推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。
如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。
来自 [Airbnb JavaScript 风格指南](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### 注释 24
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:808` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 使用 `const` 或 `let` 代替 `var`。([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>解释</summary>推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。
如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。
来自 [Airbnb JavaScript 风格指南](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### 注释 25
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:811` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 使用 `const` 或 `let` 代替 `var`。([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>解释</summary>推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。
如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。
来自 [Airbnb JavaScript 风格指南](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### 注释 26
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:814` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 使用 `const` 或 `let` 代替 `var`。([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>解释</summary>推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。
如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。
来自 [Airbnb JavaScript 风格指南](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### 注释 27
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:815` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 使用 `const` 或 `let` 代替 `var`。([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>解释</summary>推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。
如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。
来自 [Airbnb JavaScript 风格指南](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### 注释 28
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:816` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 使用 `const` 或 `let` 代替 `var`。([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>解释</summary>推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。
如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。
来自 [Airbnb JavaScript 风格指南](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### 注释 29
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:818` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 使用 `const` 或 `let` 代替 `var`。([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>解释</summary>推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。
如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。
来自 [Airbnb JavaScript 风格指南](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### 注释 30
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:819-824` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** 使用 `const` 或 `let` 代替 `var`。([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>解释</summary>推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。
如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。
来自 [Airbnb JavaScript 风格指南](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>请帮助我变得更有用！请点击每个评论上的 👍 或 👎，我将使用这些反馈来改进您的评论。
Original comment in English
Hey there - I've reviewed your changes - here's some feedback:
- This file has grown very large and mixes multiple concerns; consider breaking it up into separate modules or classes (e.g. Tooltip, SettingsDialog, initialization) to improve readability and maintainability.
- There are a lot of var redeclarations—switching to const/let consistently would help prevent hoisting pitfalls and make scoping clearer.
- There’s leftover commented-out code (e.g. the mediawiki.page.ready workaround and cursorWait CSS toggles); cleaning these up would reduce noise and avoid confusion.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- This file has grown very large and mixes multiple concerns; consider breaking it up into separate modules or classes (e.g. Tooltip, SettingsDialog, initialization) to improve readability and maintainability.
- There are a lot of var redeclarations—switching to const/let consistently would help prevent hoisting pitfalls and make scoping clearer.
- There’s leftover commented-out code (e.g. the mediawiki.page.ready workaround and cursorWait CSS toggles); cleaning these up would reduce noise and avoid confusion.
## Individual Comments
### Comment 1
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:91-105` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Avoid function declarations, favouring function assignment expressions, inside blocks. ([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>Explanation</summary>Function declarations may be hoisted in Javascript, but the behaviour is inconsistent between browsers.
Hoisting is generally confusing and should be avoided. Rather than using function declarations inside blocks, you
should use function expressions, which create functions in-scope.
</details>
</issue_to_address>
### Comment 2
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:107-113` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Avoid function declarations, favouring function assignment expressions, inside blocks. ([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>Explanation</summary>Function declarations may be hoisted in Javascript, but the behaviour is inconsistent between browsers.
Hoisting is generally confusing and should be avoided. Rather than using function declarations inside blocks, you
should use function expressions, which create functions in-scope.
</details>
</issue_to_address>
### Comment 3
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:115-119` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Avoid function declarations, favouring function assignment expressions, inside blocks. ([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>Explanation</summary>Function declarations may be hoisted in Javascript, but the behaviour is inconsistent between browsers.
Hoisting is generally confusing and should be avoided. Rather than using function declarations inside blocks, you
should use function expressions, which create functions in-scope.
</details>
</issue_to_address>
### Comment 4
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:121-144` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Avoid function declarations, favouring function assignment expressions, inside blocks. ([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>Explanation</summary>Function declarations may be hoisted in Javascript, but the behaviour is inconsistent between browsers.
Hoisting is generally confusing and should be avoided. Rather than using function declarations inside blocks, you
should use function expressions, which create functions in-scope.
</details>
</issue_to_address>
### Comment 5
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:125` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Use `const` or `let` instead of `var`. ([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>Explanation</summary>`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code).
`let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than
function-scoped.
From the [Airbnb JavaScript Style Guide](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### Comment 6
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:150-163` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Avoid function declarations, favouring function assignment expressions, inside blocks. ([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>Explanation</summary>Function declarations may be hoisted in Javascript, but the behaviour is inconsistent between browsers.
Hoisting is generally confusing and should be avoided. Rather than using function declarations inside blocks, you
should use function expressions, which create functions in-scope.
</details>
</issue_to_address>
### Comment 7
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:151` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Use `const` or `let` instead of `var`. ([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>Explanation</summary>`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code).
`let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than
function-scoped.
From the [Airbnb JavaScript Style Guide](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### Comment 8
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:165-169` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Avoid function declarations, favouring function assignment expressions, inside blocks. ([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>Explanation</summary>Function declarations may be hoisted in Javascript, but the behaviour is inconsistent between browsers.
Hoisting is generally confusing and should be avoided. Rather than using function declarations inside blocks, you
should use function expressions, which create functions in-scope.
</details>
</issue_to_address>
### Comment 9
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:248` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Use `const` or `let` instead of `var`. ([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>Explanation</summary>`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code).
`let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than
function-scoped.
From the [Airbnb JavaScript Style Guide](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### Comment 10
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:345` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Use `const` or `let` instead of `var`. ([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>Explanation</summary>`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code).
`let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than
function-scoped.
From the [Airbnb JavaScript Style Guide](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### Comment 11
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:347-349` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Avoid function declarations, favouring function assignment expressions, inside blocks. ([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>Explanation</summary>Function declarations may be hoisted in Javascript, but the behaviour is inconsistent between browsers.
Hoisting is generally confusing and should be avoided. Rather than using function declarations inside blocks, you
should use function expressions, which create functions in-scope.
</details>
</issue_to_address>
### Comment 12
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:376-889` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Avoid function declarations, favouring function assignment expressions, inside blocks. ([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>Explanation</summary>Function declarations may be hoisted in Javascript, but the behaviour is inconsistent between browsers.
Hoisting is generally confusing and should be avoided. Rather than using function declarations inside blocks, you
should use function expressions, which create functions in-scope.
</details>
</issue_to_address>
### Comment 13
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:377-587` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Avoid function declarations, favouring function assignment expressions, inside blocks. ([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>Explanation</summary>Function declarations may be hoisted in Javascript, but the behaviour is inconsistent between browsers.
Hoisting is generally confusing and should be avoided. Rather than using function declarations inside blocks, you
should use function expressions, which create functions in-scope.
</details>
</issue_to_address>
### Comment 14
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:384-386` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Avoid function declarations, favouring function assignment expressions, inside blocks. ([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>Explanation</summary>Function declarations may be hoisted in Javascript, but the behaviour is inconsistent between browsers.
Hoisting is generally confusing and should be avoided. Rather than using function declarations inside blocks, you
should use function expressions, which create functions in-scope.
</details>
</issue_to_address>
### Comment 15
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:411` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Use `const` or `let` instead of `var`. ([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>Explanation</summary>`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code).
`let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than
function-scoped.
From the [Airbnb JavaScript Style Guide](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### Comment 16
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:525` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Use `const` or `let` instead of `var`. ([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>Explanation</summary>`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code).
`let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than
function-scoped.
From the [Airbnb JavaScript Style Guide](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### Comment 17
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:529` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Use `const` or `let` instead of `var`. ([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>Explanation</summary>`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code).
`let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than
function-scoped.
From the [Airbnb JavaScript Style Guide](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### Comment 18
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:589` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Use `const` or `let` instead of `var`. ([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>Explanation</summary>`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code).
`let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than
function-scoped.
From the [Airbnb JavaScript Style Guide](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### Comment 19
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:601` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Use `const` or `let` instead of `var`. ([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>Explanation</summary>`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code).
`let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than
function-scoped.
From the [Airbnb JavaScript Style Guide](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### Comment 20
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:643-645` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Use `const` or `let` instead of `var`. ([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>Explanation</summary>`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code).
`let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than
function-scoped.
From the [Airbnb JavaScript Style Guide](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### Comment 21
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:647-649` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Use `const` or `let` instead of `var`. ([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>Explanation</summary>`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code).
`let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than
function-scoped.
From the [Airbnb JavaScript Style Guide](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### Comment 22
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:739` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Use `const` or `let` instead of `var`. ([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>Explanation</summary>`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code).
`let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than
function-scoped.
From the [Airbnb JavaScript Style Guide](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### Comment 23
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:780` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Use `const` or `let` instead of `var`. ([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>Explanation</summary>`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code).
`let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than
function-scoped.
From the [Airbnb JavaScript Style Guide](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### Comment 24
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:808` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Use `const` or `let` instead of `var`. ([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>Explanation</summary>`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code).
`let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than
function-scoped.
From the [Airbnb JavaScript Style Guide](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### Comment 25
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:811` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Use `const` or `let` instead of `var`. ([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>Explanation</summary>`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code).
`let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than
function-scoped.
From the [Airbnb JavaScript Style Guide](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### Comment 26
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:814` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Use `const` or `let` instead of `var`. ([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>Explanation</summary>`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code).
`let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than
function-scoped.
From the [Airbnb JavaScript Style Guide](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### Comment 27
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:815` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Use `const` or `let` instead of `var`. ([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>Explanation</summary>`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code).
`let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than
function-scoped.
From the [Airbnb JavaScript Style Guide](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### Comment 28
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:816` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Use `const` or `let` instead of `var`. ([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>Explanation</summary>`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code).
`let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than
function-scoped.
From the [Airbnb JavaScript Style Guide](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### Comment 29
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:818` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Use `const` or `let` instead of `var`. ([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>Explanation</summary>`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code).
`let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than
function-scoped.
From the [Airbnb JavaScript Style Guide](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>
### Comment 30
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:819-824` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Use `const` or `let` instead of `var`. ([`avoid-using-var`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-using-var))
<details><summary>Explanation</summary>`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code).
`let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than
function-scoped.
From the [Airbnb JavaScript Style Guide](https://airbnb.io/javascript/#references--prefer-const)
</details>
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Comment on lines
91
to
105
| function setSettingsCookie() { | ||
| mw.cookie.set( | ||
| 'RTsettings', | ||
| ( | ||
| Number( enabled ) + | ||
| '|' + | ||
| delay + | ||
| '|' + | ||
| Number( activatedByClick ) + | ||
| '|' + | ||
| Number( tooltipsForComments ) | ||
| ), | ||
| { path: '/', expires: 90 * SECONDS_IN_A_DAY, prefix: '' } | ||
| ); | ||
| } |
There was a problem hiding this comment.
issue (code-quality): 避免在块内使用函数声明，优先使用函数赋值表达式。(avoid-function-declarations-in-blocks)
解释
函数声明在 Javascript 中可能会被提升（hoisted），但不同浏览器之间的行为不一致。 变量提升通常会造成混淆，应避免使用。与其在块内使用函数声明，不如使用函数表达式，它会在作用域内创建函数。Original comment in English
issue (code-quality): Avoid function declarations, favouring function assignment expressions, inside blocks. (avoid-function-declarations-in-blocks)
Explanation
Function declarations may be hoisted in Javascript, but the behaviour is inconsistent between browsers. Hoisting is generally confusing and should be avoided. Rather than using function declarations inside blocks, you should use function expressions, which create functions in-scope.
Comment on lines
107
to
113
| function enableRt() { | ||
| enabled = true; | ||
| setSettingsCookie(); | ||
| $(".rt-enableItem").remove(); | ||
| rt($content); | ||
| mw.notify(mw.msg("rt-enabled")); | ||
| }; | ||
|
|
||
| const disableRt = () => { | ||
| $content.find(teSelector).removeClass("rt-commentedText").off(".rt"); | ||
| $body.off(".rt"); | ||
| $window.off(".rt"); | ||
| }; | ||
|
|
||
| const addEnableLink = () => { | ||
| $( '.rt-enableItem' ).remove(); | ||
| rt( $content ); | ||
| mw.notify( mw.msg( 'rt-enabled' ) ); | ||
| } |
There was a problem hiding this comment.
issue (code-quality): 避免在块内使用函数声明，优先使用函数赋值表达式。(avoid-function-declarations-in-blocks)
解释
函数声明在 Javascript 中可能会被提升（hoisted），但不同浏览器之间的行为不一致。 变量提升通常会造成混淆，应避免使用。与其在块内使用函数声明，不如使用函数表达式，它会在作用域内创建函数。Original comment in English
issue (code-quality): Avoid function declarations, favouring function assignment expressions, inside blocks. (avoid-function-declarations-in-blocks)
Explanation
Function declarations may be hoisted in Javascript, but the behaviour is inconsistent between browsers. Hoisting is generally confusing and should be avoided. Rather than using function declarations inside blocks, you should use function expressions, which create functions in-scope.
Comment on lines
115
to
119
| function disableRt() { | ||
| $content.find( teSelector ).removeClass( 'rt-commentedText' ).off( '.rt' ); | ||
| $body.off( '.rt' ); | ||
| $window.off( '.rt' ); | ||
| } |
There was a problem hiding this comment.
issue (code-quality): 避免在块内使用函数声明，优先使用函数赋值表达式。(avoid-function-declarations-in-blocks)
解释
函数声明在 Javascript 中可能会被提升（hoisted），但不同浏览器之间的行为不一致。 变量提升通常会造成混淆，应避免使用。与其在块内使用函数声明，不如使用函数表达式，它会在作用域内创建函数。Original comment in English
issue (code-quality): Avoid function declarations, favouring function assignment expressions, inside blocks. (avoid-function-declarations-in-blocks)
Explanation
Function declarations may be hoisted in Javascript, but the behaviour is inconsistent between browsers. Hoisting is generally confusing and should be avoided. Rather than using function declarations inside blocks, you should use function expressions, which create functions in-scope.
Comment on lines
121
to
144
| function addEnableLink() { | ||
| // #footer-places – Vector | ||
| // #f-list – Timeless, Monobook, Modern | ||
| // parent of #footer li – Cologne Blue | ||
| let $footer = $("#footer-places, #f-list"); | ||
| if (!$footer.length) { | ||
| $footer = $("#footer li").parent(); | ||
| var $footer = $( '#footer-places, #f-list' ); | ||
| if ( !$footer.length ) { | ||
| $footer = $( '#footer li' ).parent(); | ||
| } | ||
| $footer.append( | ||
| $("<li>") | ||
| .addClass("rt-enableItem") | ||
| .append( | ||
| $("<a>") | ||
| .text(mw.msg("rt-enable-footer")) | ||
| .attr("href", "javascript:") | ||
| .on("click", (e) => { | ||
| e.preventDefault(); | ||
| enableRt(); | ||
| }), | ||
| ), | ||
| ); | ||
| }; | ||
| if ( !$footer.find( '.rt-enableItem' ).length ) { | ||
| $footer.append( | ||
| $( '<li>' ) | ||
| .addClass( 'rt-enableItem' ) | ||
| .append( | ||
| $( '<a>' ) | ||
| .text( mw.msg( 'rt-enable-footer' ) ) | ||
| .attr( 'href', '#' ) | ||
| .click( function ( e ) { | ||
| e.preventDefault(); | ||
| enableRt(); | ||
| } ) | ||
| ) | ||
| ); | ||
| } | ||
| } |
There was a problem hiding this comment.
issue (code-quality): 避免在块内使用函数声明，优先使用函数赋值表达式。(avoid-function-declarations-in-blocks)
解释
函数声明在 Javascript 中可能会被提升（hoisted），但不同浏览器之间的行为不一致。 变量提升通常会造成混淆，应避免使用。与其在块内使用函数声明，不如使用函数表达式，它会在作用域内创建函数。Original comment in English
issue (code-quality): Avoid function declarations, favouring function assignment expressions, inside blocks. (avoid-function-declarations-in-blocks)
Explanation
Function declarations may be hoisted in Javascript, but the behaviour is inconsistent between browsers. Hoisting is generally confusing and should be avoided. Rather than using function declarations inside blocks, you should use function expressions, which create functions in-scope.| let $footer = $("#footer-places, #f-list"); | ||
| if (!$footer.length) { | ||
| $footer = $("#footer li").parent(); | ||
| var $footer = $( '#footer-places, #f-list' ); |
There was a problem hiding this comment.
issue (code-quality): 使用 const 或 let 代替 var。(avoid-using-var)
解释
推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。 如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。Original comment in English
issue (code-quality): Use const or let instead of var. (avoid-using-var)
Explanation
`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code). `let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than function-scoped.From the Airbnb JavaScript Style Guide
| var tailSideWidth = 13; | ||
|
|
||
| // We tilt the square 45 degrees, so we need square root to calculate the distance. | ||
| var tailWidth = tailSideWidth * Math.SQRT2; |
There was a problem hiding this comment.
issue (code-quality): 使用 const 或 let 代替 var。(avoid-using-var)
解释
推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。 如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。Original comment in English
issue (code-quality): Use const or let instead of var. (avoid-using-var)
Explanation
`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code). `let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than function-scoped.From the Airbnb JavaScript Style Guide
|
|
||
| // We tilt the square 45 degrees, so we need square root to calculate the distance. | ||
| var tailWidth = tailSideWidth * Math.SQRT2; | ||
| var tailHeight = tailWidth / 2; |
There was a problem hiding this comment.
issue (code-quality): 使用 const 或 let 代替 var。(avoid-using-var)
解释
推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。 如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。Original comment in English
issue (code-quality): Use const or let instead of var. (avoid-using-var)
Explanation
`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code). `let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than function-scoped.From the Airbnb JavaScript Style Guide
| // We tilt the square 45 degrees, so we need square root to calculate the distance. | ||
| var tailWidth = tailSideWidth * Math.SQRT2; | ||
| var tailHeight = tailWidth / 2; | ||
| var tailCenterDelta = tailSideWidth + 1 - ( tailWidth / 2 ); |
There was a problem hiding this comment.
issue (code-quality): 使用 const 或 let 代替 var。(avoid-using-var)
解释
推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。 如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。Original comment in English
issue (code-quality): Use const or let instead of var. (avoid-using-var)
Explanation
`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code). `let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than function-scoped.From the Airbnb JavaScript Style Guide
| var tailHeight = tailWidth / 2; | ||
| var tailCenterDelta = tailSideWidth + 1 - ( tailWidth / 2 ); | ||
|
|
||
| var tooltip = this; |
There was a problem hiding this comment.
issue (code-quality): 使用 const 或 let 代替 var。(avoid-using-var)
解释
推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。 如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。Original comment in English
issue (code-quality): Use const or let instead of var. (avoid-using-var)
Explanation
`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code). `let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than function-scoped.From the Airbnb JavaScript Style Guide
Comment on lines
819
to
824
| var getTop = function ( isBelow ) { | ||
| var delta = isBelow ? | ||
| teOffset.height + tailHeight : | ||
| -tooltip.$element.outerHeight() - tailHeight + 1; | ||
| return teOffset.top + delta; | ||
| }; |
There was a problem hiding this comment.
issue (code-quality): 使用 const 或 let 代替 var。(avoid-using-var)
解释
推荐使用 `const`，因为它能确保您无法重新分配引用（这可能导致有 bug 和令人困惑的代码）。 如果您需要重新分配引用，可以使用 `let`——它比 `var` 更受欢迎，因为它具有块级作用域而不是函数级作用域。Original comment in English
issue (code-quality): Use const or let instead of var. (avoid-using-var)
Explanation
`const` is preferred as it ensures you cannot reassign references (which can lead to buggy and confusing code). `let` may be used if you need to reassign references - it's preferred to `var` because it is block- rather than function-scoped.From the Airbnb JavaScript Style Guide
Saoutax
added
enhancement
Contributor
Author
|
好像css里面的有些类是用不上的，比如tail，我们这边没有公式，但是我不大敢删太多（） |
Member
Contributor
Author
|
诶我怎么rerequest了（） |
Contributor
Author
Member
本地。 |
Contributor
Author
行吧，晚点试试。 |
Member
有的吧 |
Contributor
Author
本地跑了一下，好像不太符合预期，测试commit：ljlofficial@60cb183
|
Contributor
Author
111真的吗（） |
Member
请勿使用 Windows（ 顺便 |
Contributor
Author
斯，那我还是拿我的fedora试试吧（ 总感觉没啥区别啊（x） |
Contributor
Author
好吧不行
|
Member
对的，手动修一下括号位置就行了 |
Saoutax
suggested changes
Oct 1, 2025
Member
Saoutax
left a comment
Saoutax
left a comment
There was a problem hiding this comment.
Assignment to constant
怎么把let改成const了
Contributor
Author
eslint要求改用const……等会我回滚一下。 |
Contributor
Author
|
@sourcery-ai review |
There was a problem hiding this comment.
Hey there - I've reviewed your changes and they look great!
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:71-73` </location>
<code_context>
+
+ const $body = $(document.body);
+ const $window = $(window);
+ const $overlay = $('<div>')
+ .addClass('rt-overlay')
+ .appendTo($body);
+ // Can't use before https://phabricator.wikimedia.org/T369880 is resolved
</code_context>
<issue_to_address>
**suggestion:** Overlay element is appended to body but not styled or managed for stacking context.
Please add explicit CSS for .rt-overlay to ensure proper stacking and prevent layout conflicts with other overlays.
```suggestion
const $overlay = $('<div>')
.addClass('rt-overlay')
.appendTo($body);
// Inject CSS for .rt-overlay to ensure proper stacking and layout
if (!document.getElementById('rt-overlay-style')) {
$('<style>')
.attr('id', 'rt-overlay-style')
.prop('type', 'text/css')
.html(
'.rt-overlay {' +
'position: fixed;' +
'top: 0; left: 0; width: 100vw; height: 100vh;' +
'z-index: 9999;' +
'pointer-events: none;' +
'background: transparent;' +
'}'
)
.appendTo(document.head);
}
```
</issue_to_address>
### Comment 2
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:89-98` </location>
<code_context>
- `${+enabled}|${delay}|${+activatedByClick}|${+tooltipsForComments}`,
- { path: "/", expires: 90 * SECONDS_IN_A_DAY, prefix: "" },
- );
+ const setSettingsCookie = () => {
+ mw.cookie.set(
+ "RTsettings",
+
+ `${Number(enabled)
+ }|${
+ delay
+ }|${
+ Number(activatedByClick)
+ }|${
+ Number(tooltipsForComments)}`,
+ { path: "/", expires: 90 * 60 * 60 * 24, prefix: "" },
+ );
+ };
</code_context>
<issue_to_address>
**issue (bug_risk):** Cookie expiration calculation changed and may be incorrect.
Please verify whether 'expires' expects days or seconds in mw.cookie.set, as this change may alter the intended expiration period.
</issue_to_address>
### Comment 3
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:900` </location>
<code_context>
+ }
- const settingsString = mw.cookie.get("RTsettings", "");
+ settingsString = mw.cookie.get("RTsettings", "");
if (settingsString) {
settings = settingsString.split("|");
</code_context>
<issue_to_address>
**issue (complexity):** Consider extracting settings handling, tooltip positioning, and event wiring into separate modules or classes to simplify and clarify the main script.
Here are a few concrete ways to tame the complexity without losing any features:
1. Extract your cookie‐parsing/serializing logic into a tiny util module.
This removes the repeated `split("|")`/`join("|")` code, and centralizes defaults:
```js
// utils/settings.js
export function readRTSettings() {
const raw = mw.cookie.get("RTsettings", "") || "";
const [e, d, c, f] = raw.split("|");
return {
enabled: Boolean(+e),
delay: Number(d) || 200,
activatedByClick: Boolean(+c),
tooltipsForComments:
f === undefined
? IS_TOUCHSCREEN && IS_MOBILE
: Boolean(+f)
};
}
export function writeRTSettings({ enabled, delay, activatedByClick, tooltipsForComments }) {
mw.cookie.set(
"RTsettings",
[+enabled, delay, +activatedByClick, +tooltipsForComments].join("|"),
{ path: "/", expires: 90 * SECONDS_IN_A_DAY, prefix: "" }
);
}
```
Then in your main script:
```js
import { readRTSettings, writeRTSettings } from "./utils/settings";
let settings = readRTSettings();
let { enabled, delay, activatedByClick, tooltipsForComments } = settings;
// …later, when the user changes options:
writeRTSettings({ enabled, delay, activatedByClick, tooltipsForComments });
```
2. Pull your position‐calculation into a pure function.
Right now `calculatePosition` is hundreds of lines in two places. Instead, have:
```js
// utils/position.js
export function positionTooltip($tip, target, { ePageX, ePageY } = {}) {
const rects = target.getClientRects().length
? [...target.getClientRects()]
: [target.getBoundingClientRect()];
// pick the correct rect, compute top/left, flip if necessary…
// return { top, left, tailOffsetX, above: boolean }
}
```
And in Tooltip:
```js
import { positionTooltip } from "./utils/position";
class Tooltip {
// …
calculatePosition(ePageX, ePageY) {
const { top, left, tailOffsetX, above } =
positionTooltip(this.$element, this.te.$element.get(0), { ePageX, ePageY });
this.$element.css({ top, left });
this.$tail.css("left", `${tailOffsetX}px`);
this.$element.toggleClass("rt-tooltip-above", above);
}
}
```
3. Restore an ES6 class for `TooltippedElement` so event‐handlers aren’t closures in the constructor:
```js
class TooltippedElement {
constructor($el) {
if (!$el) return;
this.$el = $el;
this.type = this.detectType($el);
this.bindEvents();
}
detectType($el) {
if ($el.is(REF_LINK_SELECTOR)) {
return $el.prop("tagName") === "SUP" ? "supRef" : "harvardRef";
}
return "commentedText";
}
bindEvents() {
const start = this.onStart.bind(this);
const end = this.onEnd.bind(this);
if (activatedByClick) {
this.$el.on("click.rt", start);
} else {
this.$el.on("mouseenter.rt", start)
.on("mouseleave.rt", end);
}
}
onStart(e) { /* … */ }
onEnd() { /* … */ }
}
```
By pulling out these three concerns—**settings I/O**, **positioning**, and **element wiring**—into focused modules or methods, the main file will shrink dramatically, and each piece becomes far easier to read and maintain.
</issue_to_address>
### Comment 4
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:147-160` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Avoid function declarations, favouring function assignment expressions, inside blocks. ([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>Explanation</summary>Function declarations may be hoisted in Javascript, but the behaviour is inconsistent between browsers.
Hoisting is generally confusing and should be avoided. Rather than using function declarations inside blocks, you
should use function expressions, which create functions in-scope.
</details>
</issue_to_address>
### Comment 5
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:343-345` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Avoid function declarations, favouring function assignment expressions, inside blocks. ([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>Explanation</summary>Function declarations may be hoisted in Javascript, but the behaviour is inconsistent between browsers.
Hoisting is generally confusing and should be avoided. Rather than using function declarations inside blocks, you
should use function expressions, which create functions in-scope.
</details>
</issue_to_address>
### Comment 6
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:373-583` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Avoid function declarations, favouring function assignment expressions, inside blocks. ([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>Explanation</summary>Function declarations may be hoisted in Javascript, but the behaviour is inconsistent between browsers.
Hoisting is generally confusing and should be avoided. Rather than using function declarations inside blocks, you
should use function expressions, which create functions in-scope.
</details>
</issue_to_address>
### Comment 7
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:380-382` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Avoid function declarations, favouring function assignment expressions, inside blocks. ([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>Explanation</summary>Function declarations may be hoisted in Javascript, but the behaviour is inconsistent between browsers.
Hoisting is generally confusing and should be avoided. Rather than using function declarations inside blocks, you
should use function expressions, which create functions in-scope.
</details>
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Comment on lines
71
to
73
| const $overlay = $('<div>') | ||
| .addClass('rt-overlay') | ||
| .appendTo($body); |
There was a problem hiding this comment.
suggestion: Overlay element is appended to body but not styled or managed for stacking context.
Please add explicit CSS for .rt-overlay to ensure proper stacking and prevent layout conflicts with other overlays.
Suggested change
| const $overlay = $('<div>') | |
| .addClass('rt-overlay') | |
| .appendTo($body); | |
| const $overlay = $('<div>') | |
| .addClass('rt-overlay') | |
| .appendTo($body); | |
| // Inject CSS for .rt-overlay to ensure proper stacking and layout | |
| if (!document.getElementById('rt-overlay-style')) { | |
| $('<style>') | |
| .attr('id', 'rt-overlay-style') | |
| .prop('type', 'text/css') | |
| .html( | |
| '.rt-overlay {' + | |
| 'position: fixed;' + | |
| 'top: 0; left: 0; width: 100vw; height: 100vh;' + | |
| 'z-index: 9999;' + | |
| 'pointer-events: none;' + | |
| 'background: transparent;' + | |
| '}' | |
| ) | |
| .appendTo(document.head); | |
| } |
Comment on lines
+89
to
+98
| const setSettingsCookie = () => { | ||
| mw.cookie.set( | ||
| "RTsettings", | ||
|
|
||
| `${Number(enabled) | ||
| }|${ | ||
| delay | ||
| }|${ | ||
| Number(activatedByClick) | ||
| }|${ |
There was a problem hiding this comment.
issue (bug_risk): Cookie expiration calculation changed and may be incorrect.
Please verify whether 'expires' expects days or seconds in mw.cookie.set, as this change may alter the intended expiration period.
| } | ||
|
|
||
| const settingsString = mw.cookie.get("RTsettings", ""); | ||
| settingsString = mw.cookie.get("RTsettings", ""); |
There was a problem hiding this comment.
issue (complexity): Consider extracting settings handling, tooltip positioning, and event wiring into separate modules or classes to simplify and clarify the main script.
Here are a few concrete ways to tame the complexity without losing any features:
- Extract your cookie‐parsing/serializing logic into a tiny util module.
This removes the repeatedsplit("|")/join("|")code, and centralizes defaults:
// utils/settings.js
export function readRTSettings() {
const raw = mw.cookie.get("RTsettings", "") || "";
const [e, d, c, f] = raw.split("|");
return {
enabled: Boolean(+e),
delay: Number(d) || 200,
activatedByClick: Boolean(+c),
tooltipsForComments:
f === undefined
? IS_TOUCHSCREEN && IS_MOBILE
: Boolean(+f)
};
}
export function writeRTSettings({ enabled, delay, activatedByClick, tooltipsForComments }) {
mw.cookie.set(
"RTsettings",
[+enabled, delay, +activatedByClick, +tooltipsForComments].join("|"),
{ path: "/", expires: 90 * SECONDS_IN_A_DAY, prefix: "" }
);
}Then in your main script:
import { readRTSettings, writeRTSettings } from "./utils/settings";
let settings = readRTSettings();
let { enabled, delay, activatedByClick, tooltipsForComments } = settings;
// …later, when the user changes options:
writeRTSettings({ enabled, delay, activatedByClick, tooltipsForComments });- Pull your position‐calculation into a pure function.
Right nowcalculatePositionis hundreds of lines in two places. Instead, have:
// utils/position.js
export function positionTooltip($tip, target, { ePageX, ePageY } = {}) {
const rects = target.getClientRects().length
? [...target.getClientRects()]
: [target.getBoundingClientRect()];
// pick the correct rect, compute top/left, flip if necessary…
// return { top, left, tailOffsetX, above: boolean }
}And in Tooltip:
import { positionTooltip } from "./utils/position";
class Tooltip {
// …
calculatePosition(ePageX, ePageY) {
const { top, left, tailOffsetX, above } =
positionTooltip(this.$element, this.te.$element.get(0), { ePageX, ePageY });
this.$element.css({ top, left });
this.$tail.css("left", `${tailOffsetX}px`);
this.$element.toggleClass("rt-tooltip-above", above);
}
}- Restore an ES6 class for
TooltippedElementso event‐handlers aren’t closures in the constructor:
class TooltippedElement {
constructor($el) {
if (!$el) return;
this.$el = $el;
this.type = this.detectType($el);
this.bindEvents();
}
detectType($el) {
if ($el.is(REF_LINK_SELECTOR)) {
return $el.prop("tagName") === "SUP" ? "supRef" : "harvardRef";
}
return "commentedText";
}
bindEvents() {
const start = this.onStart.bind(this);
const end = this.onEnd.bind(this);
if (activatedByClick) {
this.$el.on("click.rt", start);
} else {
this.$el.on("mouseenter.rt", start)
.on("mouseleave.rt", end);
}
}
onStart(e) { /* … */ }
onEnd() { /* … */ }
}By pulling out these three concerns—settings I/O, positioning, and element wiring—into focused modules or methods, the main file will shrink dramatically, and each piece becomes far easier to read and maintain.
There was a problem hiding this comment.
你好 - 我已经审阅了你的更改，它们看起来很棒！
AI 代理提示
请处理此代码审查中的评论：
## 个人评论
### 评论 1
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:89-98` </location>
<code_context>
- `${+enabled}|${delay}|${+activatedByClick}|${+tooltipsForComments}`,
- { path: "/", expires: 90 * SECONDS_IN_A_DAY, prefix: "" },
- );
+ const setSettingsCookie = () => {
+ mw.cookie.set(
+ "RTsettings",
+
+ `${Number(enabled)
+ }|${
+ delay
+ }|${
+ Number(activatedByClick)
+ }|${
+ Number(tooltipsForComments)}`,
+ { path: "/", expires: 90 * 60 * 60 * 24, prefix: "" },
+ );
+ };
</code_context>
<issue_to_address>
**问题 (bug_risk):** Cookie 过期时间计算可能不正确。
请验证 mw.cookie.set 的 'expires' 参数应该以天还是秒为单位指定，因为当前值可能会导致意外的过期时间。
</issue_to_address>
### 评论 2
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:583-369` </location>
<code_context>
+ .addClass("rt-scroll")
+ .appendTo($hoverArea);
- if (!activatedByClick) {
- this.$element
- .on("mouseenter", () => {
- if (!this.disappearing) {
- this.upToTopParent((tt) => {
- tt.show();
- });
- }
- })
</code_context>
<issue_to_address>
**小问题:** 事件处理程序使用 $.now() 而不是 Date.now()；这可能会影响一致性。
请在整个代码库中统一使用 Date.now() 进行时间戳记录，以避免不一致。
</issue_to_address>
### 评论 3
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:9` </location>
<code_context>
(() => {
// enwiki settings
- const REF_LINK_SELECTOR = '.reference, a[href^="#CITEREF"]',
</code_context>
<issue_to_address>
**问题 (复杂度):** 考虑将大型 IIFE 重构为每个主要组件的独立 ES6 类，以提高可维护性和清晰度。
你已经很好地保留了 100% 的现有行为，但这次重写牺牲了独立 ES6 类的清晰度，换来了一个包含大量嵌套闭包和手动原型修改的 800 行的庞大函数。如果你将每个部分重新提取到自己的类中，你将会：
• 将 80 行 `function TooltippedElement(…) { … }` + 手动原型代码折叠成
```js
class TooltippedElement {
constructor($element) {
if (!$element) return;
this.$element = $element;
this.type = this.detectType($element);
this.bindEvents();
}
detectType($el) { /* supRef | harvardRef | commentedText */ }
bindEvents() {
const start = this.onStart.bind(this);
const end = this.onEnd.bind(this);
const evs = activatedByClick
? { 'click.rt': start, 'contextmenu.rt': start }
: { 'mouseenter.rt': start, 'mouseleave.rt': end };
this.$element.on(evs);
}
onStart(e) {
if (activatedByClick && this.type !== 'commentedText' && e.type !== 'contextmenu') {
e.preventDefault();
}
this.showRef(e.pageX, e.pageY);
}
onEnd() {
this.hideRef();
}
showRef(x, y) { /* … */ }
hideRef(immediately) { /* … */ }
onBodyClick = (e) => { /* … */ }
onWindowResize = () => {
this.tooltip?.calculatePosition();
}
}
```
• 删除**所有**内联的 `this.showRef = function…` / `TooltippedElement.prototype…` 冗余代码，并且
• 将你的主循环简化为
```js
$content.find(teSelector).each((i, ele) => {
new TooltippedElement($(ele));
});
```
同样，你的 `SettingsDialog` 和 `Tooltip` 看起来也可以很好地折叠回适当的类：
```js
class SettingsDialog extends OO.ui.ProcessDialog {
static static = {
...super.static,
name: 'settingsDialog',
title: mw.msg('rt-settings-title'),
actions: [
{ modes: 'basic', action: 'save', label: mw.msg('rt-save'), flags: ['primary','progressive'] },
{ modes: 'basic', action: 'cancel', label: mw.msg('rt-cancel'), flags: ['safe'] },
/* … */
]
};
initialize() {
super.initialize();
this.buildForm();
}
buildForm() {
this.enableOption = new OO.ui.RadioOptionWidget({ label: mw.msg('rt-enable') });
this.disableOption = new OO.ui.RadioOptionWidget({ label: mw.msg('rt-disable') });
/* … */
}
getSetupProcess(data) {
return super.getSetupProcess(data)
.next(() => {
this.stackLayout.setItem(this.panelSettings);
this.actions.setMode('basic');
}, this);
}
getActionProcess(action) {
if (action === 'save') {
return new OO.ui.Process(() => {
/* … identical logic … */
});
}
return super.getActionProcess(action);
}
getBodyHeight() {
return this.stackLayout.getCurrentItem().$element.outerHeight(true);
}
}
```
将每个关注点拆分到自己的 ES6 类文件中——而不是在一个巨大的 IIFE 中重新定义所有内容——将会：
• 重用原型而不是在每次实例化时重新创建方法
• 显著扁平化你的调用树
• 消除大部分“`const foo = this; function bar(){ … }`”重新绑定噪音
你所有现有的逻辑都可以在这些类中保持不变。你将保持 100% 的覆盖率，但会恢复可维护性。
</issue_to_address>
### 评论 4
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:147-160` </location>
<code_context>
</code_context>
<issue_to_address>
**问题 (代码质量):** 避免在块内使用函数声明，倾向于使用函数赋值表达式。([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>解释</summary>函数声明在 Javascript 中可能会被提升（hoisted），但在不同浏览器中的行为不一致。
提升通常会令人困惑，应该避免。与其在块内使用函数声明，不如使用函数表达式，它们会在作用域内创建函数。
</details>
</issue_to_address>
### 评论 5
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:343-345` </location>
<code_context>
</code_context>
<issue_to_address>
**问题 (代码质量):** 避免在块内使用函数声明，倾向于使用函数赋值表达式。([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>解释</summary>函数声明在 Javascript 中可能会被提升（hoisted），但在不同浏览器中的行为不一致。
提升通常会令人困惑，应该避免。与其在块内使用函数声明，不如使用函数表达式，它们会在作用域内创建函数。
</details>
</issue_to_address>
### 评论 6
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:373-583` </location>
<code_context>
</code_context>
<issue_to_address>
**问题 (代码质量):** 避免在块内使用函数声明，倾向于使用函数赋值表达式。([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>解释</summary>函数声明在 Javascript 中可能会被提升（hoisted），但在不同浏览器中的行为不一致。
提升通常会令人困惑，应该避免。与其在块内使用函数声明，不如使用函数表达式，它们会在作用域内创建函数。
</details>
</issue_to_address>
### 评论 7
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:380-382` </location>
<code_context>
</code_context>
<issue_to_address>
**问题 (代码质量):** 避免在块内使用函数声明，倾向于使用函数赋值表达式。([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>解释</summary>函数声明在 Javascript 中可能会被提升（hoisted），但在不同浏览器中的行为不一致。
提升通常会令人困惑，应该避免。与其在块内使用函数声明，不如使用函数表达式，它们会在作用域内创建函数。
</details>
</issue_to_address>帮助我更有用！请点击每个评论上的 👍 或 👎，我将使用这些反馈来改进你的评论。
Original comment in English
Hey there - I've reviewed your changes and they look great!
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:89-98` </location>
<code_context>
- `${+enabled}|${delay}|${+activatedByClick}|${+tooltipsForComments}`,
- { path: "/", expires: 90 * SECONDS_IN_A_DAY, prefix: "" },
- );
+ const setSettingsCookie = () => {
+ mw.cookie.set(
+ "RTsettings",
+
+ `${Number(enabled)
+ }|${
+ delay
+ }|${
+ Number(activatedByClick)
+ }|${
+ Number(tooltipsForComments)}`,
+ { path: "/", expires: 90 * 60 * 60 * 24, prefix: "" },
+ );
+ };
</code_context>
<issue_to_address>
**issue (bug_risk):** Cookie expiration calculation may be incorrect.
Verify whether 'expires' should be specified in days or seconds for mw.cookie.set, as the current value may result in an unintended expiration period.
</issue_to_address>
### Comment 2
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:583-369` </location>
<code_context>
+ .addClass("rt-scroll")
+ .appendTo($hoverArea);
- if (!activatedByClick) {
- this.$element
- .on("mouseenter", () => {
- if (!this.disappearing) {
- this.upToTopParent((tt) => {
- tt.show();
- });
- }
- })
</code_context>
<issue_to_address>
**nitpick:** Event handler uses $.now() instead of Date.now(); may affect consistency.
Standardize timestamping by using Date.now() throughout the codebase to avoid inconsistencies.
</issue_to_address>
### Comment 3
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:9` </location>
<code_context>
(() => {
// enwiki settings
- const REF_LINK_SELECTOR = '.reference, a[href^="#CITEREF"]',
</code_context>
<issue_to_address>
**issue (complexity):** Consider refactoring the large IIFE into separate ES6 classes for each major component to improve maintainability and clarity.
You’ve already done a great job preserving 100% of the existing behavior, but this rewrite trades the clarity of standalone ES6 classes for a huge 800-line monster function full of nested closures and manual prototype hacks. If you pulled each thing back out into its own class—you’d
• collapse 80 lines of `function TooltippedElement(…) { … }` + manual prototype into
```js
class TooltippedElement {
constructor($element) {
if (!$element) return;
this.$element = $element;
this.type = this.detectType($element);
this.bindEvents();
}
detectType($el) { /* supRef | harvardRef | commentedText */ }
bindEvents() {
const start = this.onStart.bind(this);
const end = this.onEnd.bind(this);
const evs = activatedByClick
? { 'click.rt': start, 'contextmenu.rt': start }
: { 'mouseenter.rt': start, 'mouseleave.rt': end };
this.$element.on(evs);
}
onStart(e) {
if (activatedByClick && this.type !== 'commentedText' && e.type !== 'contextmenu') {
e.preventDefault();
}
this.showRef(e.pageX, e.pageY);
}
onEnd() {
this.hideRef();
}
showRef(x, y) { /* … */ }
hideRef(immediately) { /* … */ }
onBodyClick = (e) => { /* … */ }
onWindowResize = () => {
this.tooltip?.calculatePosition();
}
}
```
• remove **all** of the inline `this.showRef = function…` / `TooltippedElement.prototype…` cruft, and
• simplify your main loop to
```js
$content.find(teSelector).each((i, ele) => {
new TooltippedElement($(ele));
});
```
Likewise your `SettingsDialog` and `Tooltip` both look like they’d collapse nicely back into proper classes:
```js
class SettingsDialog extends OO.ui.ProcessDialog {
static static = {
...super.static,
name: 'settingsDialog',
title: mw.msg('rt-settings-title'),
actions: [
{ modes: 'basic', action: 'save', label: mw.msg('rt-save'), flags: ['primary','progressive'] },
{ modes: 'basic', action: 'cancel', label: mw.msg('rt-cancel'), flags: ['safe'] },
/* … */
]
};
initialize() {
super.initialize();
this.buildForm();
}
buildForm() {
this.enableOption = new OO.ui.RadioOptionWidget({ label: mw.msg('rt-enable') });
this.disableOption = new OO.ui.RadioOptionWidget({ label: mw.msg('rt-disable') });
/* … */
}
getSetupProcess(data) {
return super.getSetupProcess(data)
.next(() => {
this.stackLayout.setItem(this.panelSettings);
this.actions.setMode('basic');
}, this);
}
getActionProcess(action) {
if (action === 'save') {
return new OO.ui.Process(() => {
/* … identical logic … */
});
}
return super.getActionProcess(action);
}
getBodyHeight() {
return this.stackLayout.getCurrentItem().$element.outerHeight(true);
}
}
```
Splitting each concern into its own ES6 class file – rather than redefining everything inside one enormous IIFE – will:
• re-use prototypes instead of recreating methods on every instantiation
• dramatically flatten your call tree
• eliminate most of the “`const foo = this; function bar(){ … }`” rebinding noise
All of your existing logic fits into these classes unchanged. You’ll keep 100% of coverage, but regain maintainability.
</issue_to_address>
### Comment 4
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:147-160` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Avoid function declarations, favouring function assignment expressions, inside blocks. ([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>Explanation</summary>Function declarations may be hoisted in Javascript, but the behaviour is inconsistent between browsers.
Hoisting is generally confusing and should be avoided. Rather than using function declarations inside blocks, you
should use function expressions, which create functions in-scope.
</details>
</issue_to_address>
### Comment 5
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:343-345` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Avoid function declarations, favouring function assignment expressions, inside blocks. ([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>Explanation</summary>Function declarations may be hoisted in Javascript, but the behaviour is inconsistent between browsers.
Hoisting is generally confusing and should be avoided. Rather than using function declarations inside blocks, you
should use function expressions, which create functions in-scope.
</details>
</issue_to_address>
### Comment 6
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:373-583` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Avoid function declarations, favouring function assignment expressions, inside blocks. ([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>Explanation</summary>Function declarations may be hoisted in Javascript, but the behaviour is inconsistent between browsers.
Hoisting is generally confusing and should be avoided. Rather than using function declarations inside blocks, you
should use function expressions, which create functions in-scope.
</details>
</issue_to_address>
### Comment 7
<location> `src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js:380-382` </location>
<code_context>
</code_context>
<issue_to_address>
**issue (code-quality):** Avoid function declarations, favouring function assignment expressions, inside blocks. ([`avoid-function-declarations-in-blocks`](https://docs.sourcery.ai/Reference/Rules-and-In-Line-Suggestions/JavaScript/Default-Rules/avoid-function-declarations-in-blocks))
<details><summary>Explanation</summary>Function declarations may be hoisted in Javascript, but the behaviour is inconsistent between browsers.
Hoisting is generally confusing and should be avoided. Rather than using function declarations inside blocks, you
should use function expressions, which create functions in-scope.
</details>
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Comment on lines
+89
to
+98
| const setSettingsCookie = () => { | ||
| mw.cookie.set( | ||
| "RTsettings", | ||
|
|
||
| `${Number(enabled) | ||
| }|${ | ||
| delay | ||
| }|${ | ||
| Number(activatedByClick) | ||
| }|${ |
There was a problem hiding this comment.
问题 (bug_risk): Cookie 过期时间计算可能不正确。
请验证 mw.cookie.set 的 'expires' 参数应该以天还是秒为单位指定，因为当前值可能会导致意外的过期时间。
Original comment in English
issue (bug_risk): Cookie expiration calculation may be incorrect.
Verify whether 'expires' should be specified in days or seconds for mw.cookie.set, as the current value may result in an unintended expiration period.
|
|
||
| this.onWindowResize = () => { | ||
| te.tooltip.calculatePosition(); | ||
| }; |
There was a problem hiding this comment.
小问题: 事件处理程序使用 $.now() 而不是 Date.now()；这可能会影响一致性。
请在整个代码库中统一使用 Date.now() 进行时间戳记录，以避免不一致。
Original comment in English
nitpick: Event handler uses $.now() instead of Date.now(); may affect consistency.
Standardize timestamping by using Date.now() throughout the codebase to avoid inconsistencies.
Contributor
Author
我已经鸽了好久了，我看一下。 |
gui-ying233
approved these changes
Nov 11, 2025
Contributor
Author
|
请重点检查对移动端的检测和重复窗口的检测是否异常。 |
Contributor
Author
|
gui-ying233
approved these changes
Nov 11, 2025
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR updates the ReferenceTooltips gadget to the latest upstream version from English Wikipedia (oldid 1234748547 for JS, 1234748639 for CSS). The update includes significant refactoring and modernization of both the JavaScript and CSS code.
Key changes:
- Refactored from ES6 classes to function constructors for better compatibility
- Added support for dark/night theme through CSS variables
- Restructured CSS with BEM-style class names (rt-overlay, rt-hoverArea, rt-scroll, rt-content, rt-tail)
- Introduced global configuration overrides (window.rt_* variables)
- Redesigned settings dialog using OOUI framework
- Improved tooltip positioning calculations and accessibility attributes
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 8 comments.
| File | Description |
|---|---|
| src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.js | Major refactoring: converted classes to functions, added overlay container, improved OOUI settings dialog, updated event handling, and enhanced configurability with window.rt_* overrides |
| src/gadgets/ReferenceTooltips/Gadget-ReferenceTooltips.css | Modernized styling with CSS variables for theming, converted px to em units, restructured with BEM naming, added dark theme support, and improved tooltip positioning |
| src/global/zh/GHIAHistory.json | Auto-generated commit history entries for user U:LJL |
Comment on lines
+135
to
+137
| $("<a>") | ||
| .text(mw.msg("rt-enable-footer")) | ||
| .attr("href", "#") |
There was a problem hiding this comment.
Using href="#" for links that trigger JavaScript actions is not ideal. This causes the page to scroll to the top if preventDefault fails or isn't executed in time. Consider using href="javascript:void(0)" or better yet, use a <button> element instead of an anchor since this is not a navigation link.
Suggested change
| $("<a>") | |
| .text(mw.msg("rt-enable-footer")) | |
| .attr("href", "#") | |
| $("<button>") | |
| .text(mw.msg("rt-enable-footer")) | |
| .addClass("rt-enableButton") |
Comment on lines
+600
to
+616
| .filter(function (i) { | ||
| const $this = $(this); | ||
| return ( | ||
| this.nodeType === Node.TEXT_NODE | ||
| || !( | ||
| $this.is(".mw-cite-backlink") | ||
| || i === 0 | ||
| // Template:Cnote, Template:Note | ||
| && ($this.is("b") | ||
| // Template:Note_label | ||
| || $this.is("a") | ||
| && $this.attr("href").indexOf("#ref") === 0 | ||
| ) | ||
|
|
||
| ) | ||
| ); | ||
| }) |
There was a problem hiding this comment.
The filter callback function is complex and hard to read with nested conditions. Consider extracting this logic into a named function for better maintainability. For example:
function shouldIncludeNode(i) {
const $this = $(this);
if (this.nodeType === Node.TEXT_NODE) {
return true;
}
return !($this.is(".mw-cite-backlink")
|| (i === 0 && ($this.is("b") || ($this.is("a") && $this.attr("href").indexOf("#ref") === 0))));
}
Comment on lines
+85
to
+86
| // Popups gadget | ||
| if (window.pg) { |
There was a problem hiding this comment.
The compatibility check was changed to only check for window.pg (Popups gadget), removing the check for mw.config.get("wgPopupsReferencePreviews") (MediaWiki's Reference Previews feature). This means the gadget may now conflict with Reference Previews, potentially showing duplicate tooltips or interfering with the built-in feature. If this change was intentional, it should be documented in the commit message or code comments. Otherwise, the previous check should be restored: if (window.pg || mw.config.get("wgPopupsReferencePreviews")).
Suggested change
| // Popups gadget | |
| if (window.pg) { | |
| // Popups gadget or MediaWiki Reference Previews | |
| if (window.pg || mw.config.get("wgPopupsReferencePreviews")) { |
| const IS_MOBILE = /Mobi|Android/i.test(navigator.userAgent) | ||
| || typeof window.orientation !== "undefined"; | ||
| const CLIENT_NAME = $.client.profile().name; | ||
| let enabled = undefined; |
There was a problem hiding this comment.
The initialization of enabled to undefined is problematic. This variable is used in boolean contexts throughout the code (line 108, 531, 540, 907) where undefined will be falsy, but it's better to explicitly initialize it to a boolean value for clarity and to avoid potential issues with type coercion. Consider initializing it as let enabled = false; or handling the undefined case more explicitly.
Suggested change
| let enabled = undefined; | |
| let enabled = false; |
| let delay; | ||
| let activatedByClick; | ||
| let tooltipsForComments; | ||
| let cursorWaitCss = 1; |
There was a problem hiding this comment.
The initialization of cursorWaitCss to 1 is incorrect. This variable is expected to be either a CSS style object (returned from mw.util.addCSS() at line 705) or falsy. Initializing it to 1 means the condition if (cursorWaitCss) at line 380 will be true, and then cursorWaitCss.disabled = true; will fail because the number 1 doesn't have a disabled property. This should be initialized to null or undefined instead.
Suggested change
| let cursorWaitCss = 1; | |
| let cursorWaitCss = null; |
Comment on lines
+689
to
+693
| $("<a>") | ||
| .addClass("rt-settingsLink") | ||
| .attr("role", "button") | ||
| .attr("href", "#") | ||
| .attr("title", mw.msg("rt-settings")) |
There was a problem hiding this comment.
Using href="#" for a settings button is not ideal for the same reasons mentioned earlier. Consider using a <button> element with appropriate ARIA attributes since this triggers a dialog and is not a link to another page.
Suggested change
| $("<a>") | |
| .addClass("rt-settingsLink") | |
| .attr("role", "button") | |
| .attr("href", "#") | |
| .attr("title", mw.msg("rt-settings")) | |
| $("<button>") | |
| .addClass("rt-settingsLink") | |
| .attr("type", "button") | |
| .attr("title", mw.msg("rt-settings")) | |
| .attr("aria-haspopup", "dialog") |
Comment on lines
+7
to
+8
| position: absolute; | ||
| max-width: 27em; |
There was a problem hiding this comment.
The CSS file has inconsistent indentation. Lines 7-8 use tabs, while the original code used spaces. According to the project's .editorconfig, CSS files should use 4 spaces for indentation. This inconsistency exists throughout the file and should be standardized to use spaces instead of tabs.
Comment on lines
+689
to
+692
| $("<a>") | ||
| .addClass("rt-settingsLink") | ||
| .attr("role", "button") | ||
| .attr("href", "#") |
There was a problem hiding this comment.
The settings link is created as an anchor tag (<a>) with role="button", but this creates a semantic mismatch. When using role="button", you should also add keyboard event handlers for Space and Enter keys to match button behavior. Alternatively, use an actual <button> element which provides proper keyboard support automatically. The current implementation may confuse screen reader users who expect link behavior but get button semantics.
Suggested change
| $("<a>") | |
| .addClass("rt-settingsLink") | |
| .attr("role", "button") | |
| .attr("href", "#") | |
| $("<button>") | |
| .addClass("rt-settingsLink") | |
| .attr("type", "button") |
gui-ying233
approved these changes
Nov 12, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
跟随上游版本更新，未经过完整测试，需要测试后再进行merge。
Sourcery 总结
将 ReferenceTooltips 小工具更新到最新的上游版本，重构 JavaScript 和 CSS，以实现现代主题、可配置性和可维护性。
增强功能：
window.rt_*覆盖暴露选择器和类，以便于自定义Original summary in English
Sourcery 总结
将 ReferenceTooltips 小工具同步到最新的上游版本，并重构其 JavaScript 和 CSS，以提高可配置性、主题化和可维护性。
新功能：
window.rt_*覆盖暴露关键选择器和类名改进：
杂项任务：
Original summary in English
Sourcery 总结
将 ReferenceTooltips 小工具与最新上游版本同步，重构其 JavaScript 和 CSS 以提高模块化和主题化能力，通过全局覆盖添加可配置性，使用 OOUI 重新设计设置对话框，并引入深色主题支持。
新功能：
window.rt_*覆盖公开引用选择器和类名改进：
杂项：
oldid链接Original summary in English
Sourcery 总结
同步 ReferenceTooltips 小工具到最新的上游版本，并重构其实现，以提高可配置性、主题化和可维护性。
新功能：
window.rt_*覆盖暴露关键选择器和类名改进：
杂项：
Original summary in English
Sourcery 摘要
将 ReferenceTooltips 小工具同步到最新的上游版本，并重构其 JavaScript 和 CSS，以提高可配置性、主题化能力和可维护性。
新功能：
window.rt_*覆盖暴露关键选择器和类名，以便于自定义改进：
TooltippedElement和Tooltip，带有专用的覆盖容器和简化的事件处理em单位、新的 BEM 风格类（rt-overlay、rt-hoverArea、rt-scroll、rt-content、rt-tail）和 CSS 变量来现代化 CSS杂项：
oldid链接以匹配最新的上游版本Original summary in English
Summary by Sourcery
Sync ReferenceTooltips gadget to the latest upstream version and refactor its JavaScript and CSS to improve configurability, theming, and maintainability.
New Features:
Enhancements:
Chores: