Skip to content

Comments

Improve Popup Handling#56

Merged
iamEvanYT merged 3 commits intomainfrom
evan/improved-popup-handling
May 20, 2025
Merged

Improve Popup Handling#56
iamEvanYT merged 3 commits intomainfrom
evan/improved-popup-handling

Conversation

@iamEvanYT
Copy link
Member

@iamEvanYT iamEvanYT commented May 20, 2025

tldr

  • Add Address Bar to Popup Window
  • Make window.moveTo & window.resizeTo accessible in popup windows

Summary by CodeRabbit

  • New Features
    • Added support for moving and resizing popup windows using new programmatic methods.
    • Popups now display an address bar for improved usability.
  • Improvements
    • Popup windows now open with correct dimensions and positions based on requested features.
    • Omnibox and popup bounds are now reliably constrained within the visible window area.
    • The current workspace is prioritized based on the window’s assigned space, enhancing workspace management.
  • Bug Fixes
    • Ensured that tabs opened in new windows become active as expected.
  • API Updates
    • New methods for moving and resizing popup windows are available in the interface API.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented May 20, 2025

Walkthrough

This update introduces enhanced popup window management, including new IPC handlers and polyfills for moving and resizing popup windows. The omnibox is now clamped within window bounds, and popup creation logic parses window features for precise sizing and positioning. Additional UI improvements include a conditional address bar for popups and expanded address bar styling options.

Changes

File(s) Change Summary
src/main/browser/components/omnibox.ts Updated updateBounds to clamp omnibox bounds within parent window dimensions before applying them.
src/main/browser/tabs/tab.ts Extended createNewTab to accept window feature details for popups, parse features, and set window space. Updated activation logic for new windows.
src/main/browser/window.ts Modified logic to only set current space if no current space is already set.
src/main/ipc/browser/interface.ts Added IPC handlers for moving and resizing popup windows via "interface:move-window-to" and "interface:resize-window-to".
src/main/ipc/session/spaces.ts setWindowSpace now explicitly sets the window's current space before notifying listeners.
src/main/modules/utils.ts Added a new clamp utility function to constrain values within a range.
src/preload/index.ts Added polyfills for window.moveTo and window.resizeTo in popups, new IPC methods in interfaceAPI, and permission adjustments.
src/renderer/src/components/browser-ui/main.tsx Integrated a conditional SidebarAddressBar for popup windows above browser content.
src/renderer/src/components/browser-ui/sidebar/header/address-bar/address-bar.tsx Updated FakeAddressBar and SidebarAddressBar to accept an optional className prop for styling.
src/renderer/src/components/providers/spaces-provider.tsx Prioritized setting current space using window space before falling back to last used space.
src/shared/flow/interfaces/browser/interface.ts Added moveWindowTo and resizeWindowTo methods to the FlowInterfaceAPI interface.

Sequence Diagram(s)

sequenceDiagram
    participant Renderer
    participant Preload
    participant MainProcess
    participant BrowserWindow

    Renderer->>Preload: window.moveTo(x, y) / window.resizeTo(w, h)
    Preload->>MainProcess: IPC "interface:move-window-to" or "interface:resize-window-to"
    MainProcess->>BrowserWindow: setPosition(x, y) or setSize(w, h)
    BrowserWindow-->>MainProcess: (position/size updated)
    MainProcess-->>Preload: (ack)
    Preload-->>Renderer: (ack)
Loading
sequenceDiagram
    participant Tab
    participant MainProcess
    participant Spaces
    participant BrowserWindow

    Tab->>MainProcess: createNewTab(url, "new-window", options, details)
    MainProcess->>Tab: parse details.features for size/position
    MainProcess->>BrowserWindow: createWindowInternal(type="popup", bounds)
    MainProcess->>Spaces: setWindowSpace(newWindow, currentTab.spaceId)
    Spaces->>BrowserWindow: setCurrentSpace(spaceId)
Loading

Poem

In the warren of windows, a popup appears,
Now it can move and resize—no more bunny tears!
Address bars hop in, for popups to see,
Bounds are clamped snug as can be.
With features parsed and spaces set,
This update’s the best one yet!
🐇✨

Note

⚡️ AI Code Reviews for VS Code, Cursor, Windsurf

CodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback.
Learn more here.


Note

⚡️ Faster reviews with caching

CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure Review - Disable Cache at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the Data Retention setting under your Organization Settings.
Enjoy the performance boost—your workflow just got faster.

✨ Finishing Touches
  • 📝 Generate Docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Nitpick comments (1)
src/renderer/src/components/providers/spaces-provider.tsx (1)

44-54: Good enhancement to space initialization logic.

This change correctly prioritizes the window-specific space before falling back to the last used space, which is crucial for popup windows that need to maintain the same space context as their parent window.

One small suggestion: consider removing the console.log statement on line 46 before merging to production, as it appears to be debug code.

-        console.log("Setting current space to window space", windowSpaceId);
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge Base: Disabled due to data retention organization setting

📥 Commits

Reviewing files that changed from the base of the PR and between 66c99b2 and 368ba39.

📒 Files selected for processing (11)
  • src/main/browser/components/omnibox.ts (2 hunks)
  • src/main/browser/tabs/tab.ts (4 hunks)
  • src/main/browser/window.ts (1 hunks)
  • src/main/ipc/browser/interface.ts (1 hunks)
  • src/main/ipc/session/spaces.ts (1 hunks)
  • src/main/modules/utils.ts (1 hunks)
  • src/preload/index.ts (3 hunks)
  • src/renderer/src/components/browser-ui/main.tsx (2 hunks)
  • src/renderer/src/components/browser-ui/sidebar/header/address-bar/address-bar.tsx (3 hunks)
  • src/renderer/src/components/providers/spaces-provider.tsx (1 hunks)
  • src/shared/flow/interfaces/browser/interface.ts (1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (5)
src/main/ipc/browser/interface.ts (1)
src/main/index.ts (1)
  • browser (14-14)
src/renderer/src/components/providers/spaces-provider.tsx (1)
src/main/browser/window.ts (1)
  • setCurrentSpace (192-198)
src/main/browser/components/omnibox.ts (1)
src/main/modules/utils.ts (1)
  • clamp (94-96)
src/main/browser/tabs/tab.ts (1)
src/main/ipc/session/spaces.ts (1)
  • setWindowSpace (64-67)
src/renderer/src/components/browser-ui/main.tsx (1)
src/renderer/src/components/browser-ui/sidebar/header/address-bar/address-bar.tsx (1)
  • SidebarAddressBar (70-79)
⏰ Context from checks skipped due to timeout of 90000ms (3)
  • GitHub Check: build (windows-latest)
  • GitHub Check: build (ubuntu-latest)
  • GitHub Check: build (macos-latest)
🔇 Additional comments (20)
src/main/browser/window.ts (1)

184-184: Improved space handling logic.

The condition now checks both for the existence of a space AND that no current space is already set. This prevents the last used space from overriding an explicitly set space, ensuring better synchronization of space state across windows.

src/main/ipc/session/spaces.ts (1)

65-65: Good synchronization improvement.

Adding the explicit call to window.setCurrentSpace() ensures the window's internal state is updated before notifying listeners, which maintains proper state synchronization for popup windows.

src/main/modules/utils.ts (1)

87-96: Well-implemented utility function.

The clamp utility function is correctly implemented and properly documented. This will be useful for ensuring UI elements like omnibox stay within window boundaries during popup window resizing and movement.

src/renderer/src/components/browser-ui/sidebar/header/address-bar/address-bar.tsx (2)

10-10: Good component extensibility.

Adding the optional className prop to FakeAddressBar and properly applying it to the root div improves component extensibility, allowing for contextual styling in different environments like popups.

Also applies to: 54-54


70-70: Props properly passed through component hierarchy.

The className prop is correctly received in the parent component and passed down to the child component, following React best practices for component composition.

Also applies to: 76-76

src/renderer/src/components/browser-ui/main.tsx (1)

138-141: Good implementation of conditional address bar for popup windows!

The addition of a dedicated address bar for popup windows is a nice usability improvement. The implementation correctly:

  • Uses conditional rendering based on window type
  • Applies proper styling with rounded corners
  • Wraps the address bar in a remove-app-drag div to prevent interference with window dragging
  • Uses a flex column layout to maintain proper positioning
src/shared/flow/interfaces/browser/interface.ts (1)

39-47: Well-documented interface additions for popup window management.

The new interface methods for moving and resizing popup windows are well-documented with clear JSDoc comments. These additions align perfectly with the PR objectives to enable window.moveTo and window.resizeTo functionality for popup windows.

src/main/ipc/browser/interface.ts (1)

26-39: Robust implementation of window manipulation handlers.

The implementations for moving and resizing popup windows are robust, with proper safety checks to:

  1. Verify the window exists
  2. Confirm the window is of type "popup"

This follows the principle of least privilege by restricting these operations to popup windows only, which is good for security and preventing unintended behavior.

src/main/browser/components/omnibox.ts (2)

4-4: Good addition of the utility import.

The import of the clamp utility function is appropriate and will be used to constrain the omnibox bounds within the parent window.


87-102: Well-implemented window bounds clamping logic.

The implementation ensures the omnibox always remains within the visible area of the parent window by:

  1. Retrieving the parent window bounds
  2. Clamping the position (x, y) within the window
  3. Clamping the size (width, height) to prevent overflow
  4. Creating a new Rectangle object with the constrained values

This is a robust solution that prevents UI elements from disappearing off-screen.

src/preload/index.ts (3)

105-127: Well-implemented popup window polyfill.

The polyfill correctly overrides window.moveTo and window.resizeTo methods with proper argument validation. The implementation pattern is good:

  1. Type checking for arguments
  2. Clear error messages for invalid inputs
  3. Delegation to the Flow API methods
  4. Proper injection into the main world context

This approach maintains API compatibility while adding the required functionality for popup windows.


283-290: Good API expansion with proper documentation.

The addition of moveWindowTo and resizeWindowTo methods to the interface API with appropriate comments is well done. The code:

  1. Documents the special exception nature of these methods
  2. Implements them to send the correct IPC messages
  3. Maintains a consistent API style with the rest of the codebase

These methods provide the necessary backend support for the window manipulation polyfills.


552-555: Proper permission handling for the new API methods.

The permission override in the API wrapper correctly sets "all" permission for the new window manipulation methods, allowing them to be used in popup windows regardless of the default browser permission scope.

src/main/browser/tabs/tab.ts (7)

16-16: Good import addition for space management.

The import of setWindowSpace is appropriate for managing the space association of newly created popup windows.


284-284: Correctly passing details parameter to createNewTab.

The update to pass the details argument when creating a new tab ensures that window features are properly propagated.


457-457: Appropriate method signature update.

The addition of the details parameter to the createNewTab method enhances the API to support window features for popups.


465-475: Well-implemented feature parsing logic.

The code effectively parses the comma-separated features string into a key-value map, properly converting numeric values. The approach is robust:

  1. Splits the features string by commas
  2. Further splits each feature into key and value
  3. Converts values to numbers when appropriate
  4. Stores in a structured format for later use

This parsing logic handles the standard window features format used in web browsers.


478-485: Good popup window creation with dynamic properties.

The implementation creates popup windows with the correct type and applies parsed dimensions and position dynamically using spread operators. This approach is clean and only sets properties that were specified in the features string.


488-489: Important space management for popup windows.

Setting the space for the new popup window ensures consistent space management across the application. This maintains proper organization of windows within the user's workspace.


510-510: Enhanced active tab management for popups.

The condition update to include isNewWindow in the active tab setting logic ensures popup windows are properly activated when created.

@iamEvanYT iamEvanYT merged commit d9c1c6e into main May 20, 2025
8 checks passed
@iamEvanYT iamEvanYT deleted the evan/improved-popup-handling branch May 20, 2025 18:11
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.

1 participant