feat: add opacity settings for selection toolbar and popover#1126
Merged
ananaBMaster merged 1 commit intomengxi-ream:mainfrom Mar 17, 2026
Merged
feat: add opacity settings for selection toolbar and popover#1126ananaBMaster merged 1 commit intomengxi-ream:mainfrom
ananaBMaster merged 1 commit intomengxi-ream:mainfrom
Conversation
🦋 Changeset detectedLatest commit: c8b70da The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
dosubot
Bot
added
the
size:XXL
|
Documentation Updates 2 document(s) were updated by changes in this PR: Configuration Schema and MigrationView Changes@@ -33,7 +33,7 @@
**Note:** The schema version and last modified time are tracked in the configuration's metadata (`meta`), not as fields inside the config object itself. This improves separation of user settings and system metadata, and is reflected in all import/export and sync operations.
-**Current schema version:** The latest `CONFIG_SCHEMA_VERSION` is **64**.
+**Current schema version:** The latest `CONFIG_SCHEMA_VERSION` is **65**.
#### Configuration Initialization Optimization
The `initializeConfig()` function optimizes storage operations by tracking changes during initialization:
@@ -867,6 +867,48 @@
This migration improves consistency in prompt token naming and makes custom action templates more self-documenting. All existing custom actions are automatically updated without user intervention.
+#### Example: v64 to v65 Migration (Selection Toolbar Opacity Settings)
+The migration from v64 to v65 adds an `opacity` field to the `selectionToolbar` configuration, allowing users to customize the transparency of the selection toolbar and popover.
+
+**Key changes:**
+- Adds `opacity` field to `selectionToolbar` configuration
+- The field accepts values from 1 to 100 (representing percentage opacity)
+- Default value is 100 (fully opaque)
+- The opacity setting applies to both the selection toolbar and the popover content opened from it
+- All other selection toolbar configuration properties remain unchanged
+
+The migration script adds this field with the default value to all existing configurations:
+
+```ts
+// migration-scripts/v064-to-v065.ts
+export function migrate(oldConfig: any): any {
+ const selectionToolbar = oldConfig.selectionToolbar
+
+ if (!selectionToolbar) {
+ return oldConfig
+ }
+
+ return {
+ ...oldConfig,
+ selectionToolbar: {
+ ...selectionToolbar,
+ opacity: 100,
+ },
+ }
+}
+```
+
+**Implementation details:**
+- Opacity constants are defined in `src/utils/constants/selection.ts`:
+ - `MIN_SELECTION_OVERLAY_OPACITY`: 1
+ - `MAX_SELECTION_OVERLAY_OPACITY`: 100
+ - `DEFAULT_SELECTION_OVERLAY_OPACITY`: 100
+- The opacity setting is controlled via a slider in the Selection Toolbar settings page
+- Changes apply immediately to the selection toolbar UI and all popovers
+- A command palette entry allows quick navigation to the opacity setting
+
+This migration enables users to adjust selection toolbar visibility based on their preferences, making the toolbar less intrusive when needed while maintaining full functionality.
+
### Example Configuration Files
Example configuration files for each schema version are maintained in the `example` directory (e.g., `v037.ts`, `v036.ts`, `v031.ts`, `v030.ts`). Each file contains a `testSeries` object with one or more scenarios for comprehensive migration testing.
@@ -1379,6 +1421,54 @@
}
```
+#### v65 Example (Selection Toolbar Opacity Settings)
+```ts
+export const testSeries = {
+ 'complex-config-from-v020': {
+ description: 'Adds opacity to selection toolbar',
+ config: {
+ // ... other config fields
+ selectionToolbar: {
+ enabled: true,
+ disabledSelectionToolbarPatterns: [],
+ opacity: 100, // New field added in v065
+ customActions: [
+ {
+ id: 'default-dictionary',
+ name: 'Dictionary',
+ enabled: true,
+ icon: 'tabler:book-2',
+ providerId: 'deepseek-default',
+ systemPrompt: '...',
+ prompt: 'Term: {{selection}}\nParagraphs: {{paragraphs}}...',
+ outputSchema: [
+ { id: 'default-dictionary-term', name: 'Term', type: 'string', description: '', speaking: true },
+ { id: 'default-dictionary-definition', name: 'Definition', type: 'string', description: '', speaking: false },
+ { id: 'default-dictionary-context', name: 'Paragraphs', type: 'string', description: '', speaking: true },
+ // ... other fields
+ ],
+ },
+ ],
+ features: {
+ translate: {
+ enabled: true,
+ providerId: 'openai-default',
+ },
+ speak: {
+ enabled: true,
+ },
+ vocabularyInsight: {
+ enabled: true,
+ providerId: 'deepseek-default',
+ },
+ },
+ },
+ // ...
+ },
+ },
+}
+```
+
### Automated Migration Testing
The project includes an automated migration test system that discovers all schema versions, loads example configurations, executes migration scripts, and validates the results. This ensures that all migration scripts are present, executable, and that migrations produce the expected configuration for each version. Tests can be run using `pnpm test migration-scripts` and support verbose and coverage modes.Internationalization and LocalizationView Changes@@ -513,6 +513,28 @@
These keys were added across all 8 supported locale files (en, ja, ko, ru, tr, vi, zh-CN, zh-TW) in PR #1115 to support granular control over which selection toolbar features appear to users.
+#### Selection Toolbar Opacity
+The selection toolbar configuration includes an opacity setting that controls the transparency of the toolbar and its popovers. The opacity keys are localized under `options.floatingButtonAndToolbar.selectionToolbar.opacity`:
+
+**Opacity Keys:**
+- **`title`**: Section title ("Opacity")
+- **`description`**: Description explaining the opacity setting ("Adjust the opacity of the selection toolbar and the expanded window opened from it")
+
+The opacity setting accepts values from 1% to 100%, with 100% being fully opaque (the default). This setting applies to both the selection toolbar and all popover content opened from it, including translation results, vocabulary insights, and custom AI actions.
+
+**Example:**
+
+```yaml
+options:
+ floatingButtonAndToolbar:
+ selectionToolbar:
+ opacity:
+ title: Opacity
+ description: Adjust the opacity of the selection toolbar and the expanded window opened from it
+```
+
+These keys were added across all 8 supported locale files (en, ja, ko, ru, tr, vi, zh-CN, zh-TW) in PR #1126 to allow users to customize the visual appearance of the selection toolbar and improve readability when the toolbar overlays web content.
+
#### Selection Toolbar Error Handling
The selection toolbar displays inline error alerts within popovers for both Translation and Custom AI Actions. Error handling includes precheck validation (before making requests) and runtime error handling (during execution). Error messages are localized under `options.floatingButtonAndToolbar.selectionToolbar.errors`:
@@ -920,6 +942,7 @@
- **PR #1117**: Added drag-and-drop reordering support for custom action cards in the settings sidebar and output schema fields within custom actions using the `SortableList` component
- **PR #1121**: Updated improve writing template prompt with {{originLanguage}} detection, 4-point language policy (previously 3 points), and revised example format with language annotations; replaced Example B with Japanese original text demonstrating verb conjugation errors
- **PR #1127**: Added localized provider descriptions for three new AI providers (alibaba, moonshotai, huggingface) across all 8 supported languages
+- **PR #1126**: Added selection toolbar opacity configuration with 2 new keys under `options.floatingButtonAndToolbar.selectionToolbar.opacity` to control transparency of the toolbar and popovers
### Example: Adding a New Provider Group
**English:**How did I do? Any feedback? |
mengxi-ream
requested changes
Mar 15, 2026
Owner
mengxi-ream
left a comment
mengxi-ream
left a comment
There was a problem hiding this comment.
I recommend only have 1 variable to control both selection toolbar and popover panel
Owner
is there any way to make all sub components transparent? and also for these components live in Portal (don't hard code component one by one but an elegant way) |
Contributor
Author
I added a shared overlay root and passed it down through context so the related portals mount into the same container and their opacity updates consistently. I’m not sure whether this is okay？ |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
1 issue found across 28 files (changes from recent commits).
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="src/entrypoints/selection.content/selection-toolbar/index.tsx">
<violation number="1" location="src/entrypoints/selection.content/selection-toolbar/index.tsx:273">
P2: Configured toolbar opacity is no longer applied when the toolbar is visible, so the new opacity setting has no effect.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
Contributor
There was a problem hiding this comment.
1 issue found across 2 files (changes from recent commits).
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="src/utils/config/migration-scripts/v064-to-v065.ts">
<violation number="1" location="src/utils/config/migration-scripts/v064-to-v065.ts:25">
P2: Migration no longer preserves legacy toolbar/popover opacity settings; users upgrading from v064 with customized toolbarOpacity/popoverOpacity will be reset to 100%.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
ananaBMaster
force-pushed
the
feat/hover-window-opacity
branch
from
349ea6a to
c8b70da
Compare
dosubot
Bot
added
size:XL
Collaborator
the implementation is not clean. the previous code change the css everywhere, but why not just inject the css to the whole shadow root, then it's total decouple the opacity code with the current components. the implementation should be actually very simple, core logic should just be several lines to inject css |
Contributor
Author
thanks, i learned something |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 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.
Type of Changes
Description
adds configurable opacity settings for the selection toolbar and the popover content opened from it.
Related Issue
Closes #1032
How Has This Been Tested?
Screenshots
Checklist
Additional Information
Summary by cubic
Adds an opacity control (1–100%) for the selection toolbar and its popover UI. Changes apply live across the selection UI.
New Features
Migration
selectionToolbar.opacity(default 100%).Written for commit c8b70da. Summary will update on new commits.