Skip to content

fix(slider): increase focus border paddings for Slider visibility - #708

Open
mhduiy wants to merge 1 commit into
linuxdeepin:masterfrom
mhduiy:agent/pms-bug-bot/1f56aed74228
Open

mhduiy wants to merge 1 commit into
linuxdeepin:masterfrom
mhduiy:agent/pms-bug-bot/1f56aed74228

Conversation

@mhduiy

@mhduiy mhduiy commented Sep 21, 2026 •

Copy link
Copy Markdown
Contributor

Root Cause Analysis

The DTK QML Slider component uses FocusBoxBorder for its focus indicator, but FocusBoxBorder hardcoded paddings as borderWidth + DS.Style.control.focusBorderPaddings (2+1=3px). On the Slider's 20×24px handle, this 3px margin produces a 26×30px border that is visually too small to see. In contrast, the Dock quick panel uses a custom C++ QSlider with a ~37px circular focus ring, making the visual difference obvious. Key evidence: FlowStyle.qml sets control.focusBorderPaddings: 1, and FocusBoxBorder.qml had paddings as a readonly property that could not be overridden per component.

Fix

Added an overridable focusBorderPaddings property to FocusBoxBorder (defaulting to DS.Style.control.focusBorderPaddings, so all existing components keep the same behavior). Added DS.Style.slider.focusBorderPaddings: 5 in FlowStyle.qml under the slider QtObject. Passed this value from Slider.qml's FocusBoxBorder instantiation, giving Slider a total padding of 7px (2+5) instead of 3px.

Change Safety Assessment

Code Safety

  • Risk Level: Low
  • FocusBoxBorder was introduced in commit 4bd74837 (PMS BUG-303539) with focusBorderPaddings: 1 hardcoded; this change does not revert that fix — the default value remains 1 for all non-Slider components.
  • All 6 components using FocusBoxBorder (Slider, Switch, ComboBox, EditPanel, DelayButton, ButtonPanel) are unaffected except Slider, which intentionally gets a larger padding.

Business Impact Scope

  • DTK QML Slider focus indicator: Slider Tab focus border becomes more visible (padding 3px → 7px). Affects all apps using DTK QML Slider, including dde-control-center volume/brightness sliders.
  • Other DTK QML controls (Switch, ComboBox, EditPanel, DelayButton, ButtonPanel): No behavior change, focus border padding remains 3px.

Verification Suggestion

Test Slider Tab focus visibility in dde-control-center (volume/brightness). Verify Switch, ComboBox, and EditPanel focus border appearance is unchanged.


根因分析

DTK QML Slider 组件使用 FocusBoxBorder 提供焦点指示器,但 FocusBoxBorder 将 paddings 硬编码为 borderWidth + DS.Style.control.focusBorderPaddings(2+1=3px)。在 Slider 的 20×24px 手柄上,3px 边距仅产生 26×30px 的边框,视觉上过小不可见。而 Dock 快捷面板使用自定义 C++ QSlider 绘制约 37px 的圆形焦点环,视觉差异明显。关键证据:FlowStyle.qml 中 control.focusBorderPaddings: 1,FocusBoxBorder.qml 中 paddings 为 readonly property 无法按组件覆盖。

修复方案

在 FocusBoxBorder 新增可覆盖的 focusBorderPaddings 属性(默认值为 DS.Style.control.focusBorderPaddings,所有现有组件行为不变)。在 FlowStyle.qml 的 slider QtObject 下新增 focusBorderPaddings: 5。在 Slider.qml 的 FocusBoxBorder 实例中传入该值,使 Slider 总间距从 3px 增至 7px(2+5)。

改动安全评估

代码安全评估

  • 风险等级: 低风险
  • FocusBoxBorder 在 commit 4bd74837(PMS BUG-303539)中引入,设定 focusBorderPaddings: 1;本次改动不撤销该修复——非 Slider 组件的默认值仍为 1。
  • 使用 FocusBoxBorder 的 6 个组件(Slider、Switch、ComboBox、EditPanel、DelayButton、ButtonPanel)中,仅 Slider 受影响,其余行为不变。

业务影响范围

  • DTK QML Slider 焦点指示器:Slider Tab 聚焦时焦点边框更醒目(间距 3px → 7px)。影响所有使用 DTK QML Slider 的应用,包括控制中心音量/亮度滑块。
  • 其他 DTK QML 控件(Switch、ComboBox、EditPanel、DelayButton、ButtonPanel):无行为变化,焦点边框间距仍为 3px。

验证建议

在控制中心测试 Slider(音量/亮度)Tab 聚焦时的焦点指示器可见性。验证 Switch、ComboBox、EditPanel 焦点边框外观无变化。

PMS: BUG-341415

Summary by Sourcery

Increase Slider focus border padding so keyboard focus is more visible without changing other controls.

Bug Fixes:

  • Improve the visibility of the Slider focus indicator by increasing its focus border padding.

Enhancements:

  • Make focus border padding configurable per component while preserving the existing default for other controls.

1. Root cause: FocusBoxBorder hardcoded paddings as borderWidth +
   DS.Style.control.focusBorderPaddings (2+1=3px), making the focus
   indicator too small to see on Slider's 20x24px handle
2. Fix: add overridable focusBorderPaddings property to FocusBoxBorder
   (default unchanged), add DS.Style.slider.focusBorderPaddings: 5 in
   FlowStyle, and pass it from Slider.qml so Slider gets 7px total
   padding instead of 3px
3. Impact: only Slider focus border becomes more visible; Switch,
   ComboBox, EditPanel, DelayButton, ButtonPanel keep default 3px

Log: Slider focus indicator is now visually visible on Tab focus

Influence:
1. Test Slider Tab focus visibility in control center volume/brightness
2. Verify Switch/ComboBox focus border appearance unchanged
3. Verify EditPanel/DelayButton focus border appearance unchanged

fix(slider): 增大 Slider 焦点边框间距以提升可见性

1. 根因:FocusBoxBorder 硬编码 paddings 为 borderWidth +
   DS.Style.control.focusBorderPaddings(2+1=3px),在 Slider 的
   20x24px 手柄上焦点指示器过小不可见
2. 方案:在 FocusBoxBorder 新增可覆盖的 focusBorderPaddings 属性
   (默认值不变),在 FlowStyle 新增 DS.Style.slider.focusBorderPaddings:
   5,并在 Slider.qml 中传入,使 Slider 总间距从 3px 增至 7px
3. 影响:仅 Slider 焦点边框变得更醒目;Switch、ComboBox、EditPanel、
   DelayButton、ButtonPanel 保持默认 3px 不变

Log: Slider Tab 聚焦时焦点指示器现在清晰可见

Influence:
1. 测试控制中心音量/亮度滑块 Tab 聚焦时的焦点指示器可见性
2. 验证 Switch/ComboBox 焦点边框外观无变化
3. 验证 EditPanel/DelayButton 焦点边框外观无变化

PMS: BUG-341415
@deepin-ci-robot

Copy link
Copy Markdown
Contributor

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: mhduiy

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@sourcery-ai

sourcery-ai Bot commented Sep 21, 2026

Copy link
Copy Markdown
Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

Makes Slider keyboard-focus indicators more visible by allowing FocusBoxBorder padding to be overridden and configuring Slider with 5px component padding, while retaining the existing 1px default for all other controls.

File-Level Changes

Change Details Files
Introduces a component-specific focus-padding override while preserving the existing default for other controls.
  • Adds an overridable padding property to the focus border component.
  • Uses the global control padding as the default value.
  • Updates Slider to supply the slider-specific padding value.
qt6/src/qml/FocusBoxBorder.qml
qt6/src/qml/Slider.qml
Increases the Slider focus indicator padding through the Flow style configuration.
  • Adds a slider focus-border padding value of 5px.
  • Produces 7px total padding after adding the 2px border width.
qt6/src/qml/FlowStyle.qml

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've reviewed your changes and they look great!


Sourcery is free for open source - if you like our reviews please consider sharing them ✨

@deepin-ci-robot

Copy link
Copy Markdown
Contributor

deepin pr auto review

🤖 AI 代码审查报告

总体评分: 100 分 (通过阈值: 70分)

Pass


📊 总体评价

项目 结果
审查结论 代码审查通过
评分详情 未发现安全漏洞,代码结构清晰,修改范围小且目的明确,通过为 Slider 组件单独配置 focusBorderPaddings 属性来提升焦点边框可见性,设计合理。

🔍 详细分析

1. 语法逻辑 ✅

评价: 优秀 ✅ 通过

潜在问题:
✅ 未发现明显问题

建议: 语法正确,逻辑清晰,无需修改


2. 代码质量 ✅

评价: 优秀 ✅ 通过

潜在问题:
✅ 未发现明显问题

建议: 建议在 FlowStyle.qml 中新增的 focusBorderPaddings 属性旁添加简短注释,说明为何 Slider 需要不同于默认 control 的焦点边框间距值


3. 代码性能 ✅

评价: 优秀 ✅ 通过

潜在问题:
✅ 未发现明显问题

建议: 性能良好,资源使用合理,无需修改


4. 代码安全 🔒

评价: 优秀 ✅ 通过

🔐 发现 0 个安全漏洞

安全漏洞详情:
✅ 未发现安全漏洞

建议: 安全合规,无需修改


💡 改进建议代码示例

// 本次修改无需修复代码示例,代码实现正确
// FlowStyle.qml - 新增 slider 专属焦点边框间距
property int focusBorderPaddings: 5

// FocusBoxBorder.qml - 使 focusBorderPaddings 可配置,默认值保持向后兼容
property real focusBorderPaddings: DS.Style.control.focusBorderPaddings
readonly property real paddings: borderWidth + control.focusBorderPaddings

// Slider.qml - 传入 slider 专属间距值
FocusBoxBorder {
    focusBorderPaddings: DS.Style.slider.focusBorderPaddings
}

本报告由 AI 代码审查工具自动生成

property color color: palette.highlight
property real borderWidth: DS.Style.control.focusBorderWidth
property real radius: DS.Style.control.radius
property real focusBorderPaddings: DS.Style.control.focusBorderPaddings

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个变量名称改一下吧,控件已经是FocusBox的,不需要加这种前缀,

@deepin-bot

deepin-bot Bot commented Oct 15, 2026

Copy link
Copy Markdown
Contributor

TAG Bot

New tag: 6.7.51
DISTRIBUTION: unstable
Suggest: synchronizing this PR through rebase #723

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants