Skip to content

Add Comprehensive PRD and Modernize UI Design #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RandyDanielson wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add Comprehensive PRD and Modernize UI Design #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ce90119
Add comprehensive PRD and update README with current capabilities
claude Nov 15, 2025
d4f78a4
Modernize UI design and create new professional icon
claude Nov 15, 2025
bdc3600
Add PR description template
claude Nov 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
564 changes: 564 additions & 0 deletions PRD.md
View file
Open in desktop

Large diffs are not rendered by default.

94 changes: 94 additions & 0 deletions PR_DESCRIPTION.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
# Add comprehensive PRD and modernize UI design

## Summary

This PR adds comprehensive product documentation and modernizes the extension's user interface with a contemporary design and professional icon.

## 📋 Documentation Improvements

### PRD.md - New Product Requirements Document
- **19 comprehensive sections** covering all aspects of the extension
- Executive summary and problem statement
- Detailed feature documentation and technical specifications
- User personas and workflows
- Functional and non-functional requirements (24 FR items, 24 NFR items)
Copy link

Copilot AI Nov 16, 2025

Choose a reason for hiding this comment

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

Incorrect count of functional requirements. The description states "24 FR items" but the PRD.md file actually contains 28 functional requirements (FR-1: 6, FR-2: 4, FR-3: 5, FR-4: 5, FR-5: 4, FR-6: 4). Update the count to "28 FR items" for accuracy.

Suggested change
- Functional and non-functional requirements (24 FR items, 24 NFR items)
- Functional and non-functional requirements (28 FR items, 24 NFR items)

Copilot uses AI. Check for mistakes.
- Future enhancement roadmap with 15+ potential features
- Risk assessment and mitigation strategies
- Compliance and privacy considerations

### README.md Updates
- Fixed inaccurate "automatic grouping" description to reflect manual-only operation
- Added context menu features documentation
- Expanded "How to Use" section with separate popup and context menu guides
- Updated "How It Works" to accurately describe manual control design
- Added privacy note to permissions section
- New "Key Capabilities" section with detailed feature breakdown
- Updated version history

## 🎨 UI Modernization

### Modern Design System (popup.css)
- **CSS Custom Properties**: Comprehensive variable system for easy theming
- **Visual Effects**:
- Glassmorphism with animated header background
- Ripple effects on button interactions
- Smooth hover animations with lift effects
- Gradient text on statistics
- Custom scrollbar styling

- **Enhanced Components**:
- Statistics cards with gradient text and hover animations
- Buttons with depth, shadows, and interactive feedback
- Color-coded status messages (success/error/info)
- Info section with lightbulb icon and checkmark bullets

- **Accessibility**:
- Focus styles for keyboard navigation
- Reduced motion support
- Improved color contrast
- ARIA-compliant semantics

### HTML Structure (popup.html)
- Reorganized statistics layout (value above label for better visual hierarchy)
- Maintained all existing functionality

## 🎯 New Professional Icon

- **Modern Design**: Shows three tab groups with colored vertical bars (green, blue, orange)
- **Brand Consistency**: Purple-to-pink gradient matching UI theme
Copy link

Copilot AI Nov 16, 2025

Choose a reason for hiding this comment

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

Inaccurate color description. The description states "Purple-to-pink gradient" but the actual gradient in the icon.svg is from #667eea (blue-purple) to #764ba2 (purple), which is a blue-purple to purple gradient, not purple to pink. Consider updating the description to accurately reflect the actual colors used.

Suggested change
- **Brand Consistency**: Purple-to-pink gradient matching UI theme
- **Brand Consistency**: Blue-purple to purple gradient matching UI theme

Copilot uses AI. Check for mistakes.
- **Clear Purpose**: Organization checkmark symbol at bottom
- **Scalable**: Clean aesthetic that works at all sizes (16×16 to 128×128)
- **Build Tool**: Added `generate_icons.py` for automated PNG generation from SVG source

## 📁 Files Changed

- `PRD.md` - New comprehensive product requirements document
- `README.md` - Updated with accurate capability descriptions
- `popup.css` - Complete redesign with modern CSS (458 lines)
- `popup.html` - Updated statistics structure
- `icons/icon.svg` - New SVG source file
- `icons/*.png` - All sizes regenerated (16, 32, 48, 128)
- `generate_icons.py` - Icon generation build script

## ✨ Key Improvements

1. **Better Documentation**: Complete PRD serves as reference for future development and onboarding
2. **Modern UX**: Contemporary design with smooth animations and better visual feedback
3. **Professional Branding**: New icon clearly communicates extension purpose
4. **Improved Accessibility**: Focus states, reduced motion, better contrast
5. **Maintainability**: CSS variables make future theming changes easy

## 🧪 Testing

- All existing functionality preserved
- Visual improvements tested across different screen sizes
- Icon generated and verified at all required sizes
- No breaking changes to extension behavior

## 📸 Preview

The new design features:
- Clean, contemporary look with professional color palette
- Smooth transitions and micro-interactions
- Enhanced user experience with better visual feedback
- Modern icon that scales beautifully at all sizes
63 changes: 49 additions & 14 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
# Tab Grouper by Domain - Microsoft Edge Extension
# Tab Grouper by Domain - Browser Extension

A browser extension that automatically groups tabs by their domain name for better organization and productivity.
A browser extension that helps you organize tabs by their domain name with manual grouping controls for better organization and productivity.

## Features

- **Automatic Grouping**: Automatically groups tabs by domain name as you browse
- **Manual Tab Grouping**: Group tabs by domain name with one click
- **Domain-Specific Actions**: Group or ungroup tabs from a specific domain
- **Context Menu Integration**: Quick access via right-click menus
- **Color-Coded Groups**: Each domain gets a unique color for easy identification
- **Manual Controls**: Group or ungroup all tabs with one click
- **Bulk Operations**: Group or ungroup all tabs at once
- **Real-time Stats**: View tab, domain, and group counts
- **Multi-Window Support**: Works across all browser windows
- **Lightweight**: Minimal performance impact on browsing

## Installation
Expand All @@ -32,18 +35,29 @@ A browser extension that automatically groups tabs by their domain name for bett

## How to Use

1. **Automatic Grouping**: The extension automatically groups tabs as you browse
2. **Manual Grouping**: Click the extension icon and press "Group All Tabs"
3. **Ungroup Tabs**: Use the "Ungroup All Tabs" button to remove all groupings
4. **View Stats**: See real-time statistics in the popup
### Via Popup Interface
1. Click the extension icon in the toolbar
2. Click **"Group All Tabs"** to organize all tabs by domain
3. Click **"Ungroup All Tabs"** to remove all groupings
4. View real-time statistics (tabs, domains, groups)

### Via Context Menu
1. Right-click on any webpage or the extension icon
2. Select from these options:
- **Group All Tabs by Domain** - Groups all tabs across all windows
- **Ungroup All Tabs** - Removes all tab groups
- **Group Tabs from This Domain** - Groups only tabs from current domain
- **Ungroup Tabs from This Domain** - Ungroups tabs from current domain

## How It Works

- Monitors tab creation and updates
- Extracts domain names from URLs (removes www. prefix)
- Groups tabs with the same domain together
- Assigns unique colors to each domain group
- Provides manual controls through the popup interface
- **Manual Control**: Extension operates only when you trigger grouping actions
- **Domain Extraction**: Extracts clean domain names from URLs (removes www. prefix)
- **Smart Grouping**: Groups tabs with the same domain together
- **Color Assignment**: Assigns unique colors to each domain from a palette of 8 colors
- **Multi-Window**: Processes tabs across all browser windows
- **Intelligent Merging**: Adds ungrouped tabs to existing domain groups when available
- **Protected URLs**: Automatically skips browser-specific URLs (chrome://, edge://)

## File Structure

Expand All @@ -66,6 +80,9 @@ The extension requires the following permissions:
- `tabs`: To access and manage browser tabs
- `tabGroups`: To create and manage tab groups
- `activeTab`: To work with the currently active tab
- `contextMenus`: To provide right-click menu functionality

**Privacy Note**: This extension does not collect, store, or transmit any user data. All operations are performed locally in your browser.

## Browser Compatibility

Expand Down Expand Up @@ -127,9 +144,27 @@ The extension requires the following permissions:

This project is open source and available under the MIT License.

## Key Capabilities

### Group Management
- **Group All Tabs**: Organizes all tabs across all windows by domain
- **Group by Domain**: Groups only tabs from a specific domain
- **Ungroup All**: Removes all tab groups at once
- **Ungroup by Domain**: Removes groups for a specific domain only

### Visual Organization
- **8 Color Palette**: Grey, Blue, Red, Yellow, Green, Pink, Purple, Cyan
- **Domain Labels**: Groups labeled with clean domain names
- **Consistent Colors**: Same domain always gets the same color (during session)

### Statistics
- **Total Tabs**: Count of all tabs in current window
- **Domains**: Number of unique domains detected
- **Groups**: Count of active tab groups

## Version History

- **v1.0.0**: Initial release with basic domain-based tab grouping
- **v1.0.0**: Initial release with manual domain-based tab grouping, context menus, and multi-window support

## Support

Expand Down
29 changes: 29 additions & 0 deletions generate_icons.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
#!/usr/bin/env python3
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Nov 16, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Make the script executable.

The shebang is present but the file is not executable. This will prevent the script from being run directly.

Apply this fix:

chmod +x generate_icons.py
🧰 Tools
🪛 Ruff (0.14.4)

1-1: Shebang is present but file is not executable

(EXE001)

🤖 Prompt for AI Agents 
In generate_icons.py at line 1, the shebang exists but the file lacks the
executable permission; make the script executable by setting the executable bit
on the file (for example by running chmod +x generate_icons.py or marking it
executable in your VCS) so it can be run directly.

Copy link

Copilot AI Nov 16, 2025

Choose a reason for hiding this comment

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

Missing documentation for external dependency. The script requires cairosvg but this dependency is not documented anywhere. Consider adding a requirements.txt file or documenting the dependency in a comment or README section explaining how to install it (e.g., pip install cairosvg).

Suggested change
#!/usr/bin/env python3
#!/usr/bin/env python3
# Requires the external dependency 'cairosvg'.
# Install it with: pip install cairosvg

Copilot uses AI. Check for mistakes.
"""Generate PNG icons from SVG source in multiple sizes."""

import cairosvg
import os

Comment on lines +4 to +6
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Nov 16, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion | 🟠 Major

Add error handling and validate dependencies.

The script imports cairosvg and references file paths without error handling. If the SVG source is missing or cairosvg is not installed, the script will crash with unclear error messages.

Apply this diff to add error handling:

+import sys
 import cairosvg
 import os

 # Icon sizes to generate
 sizes = [16, 32, 48, 128]

 # Paths
 svg_path = 'icons/icon.svg'
 output_dir = 'icons'

+# Validate dependencies and inputs
+if not os.path.exists(svg_path):
+    print(f"Error: SVG source file not found: {svg_path}")
+    sys.exit(1)
+
+if not os.path.exists(output_dir):
+    print(f"Error: Output directory not found: {output_dir}")
+    sys.exit(1)
+
 print("Generating PNG icons from SVG...")

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In generate_icons.py around lines 4 to 6, the script blindly imports cairosvg
and uses file paths without checks; add robust error handling by wrapping the
cairosvg import in a try/except that logs a clear error and exits with a
non-zero code if the package is missing, validate that input SVG files and
output directories exist before processing (raise a readable error or create
missing directories as appropriate), catch and log exceptions during conversion
with contextual messages (including filenames and exception text) and ensure the
script returns non-zero on failure so calling processes can detect errors.

# Icon sizes to generate
sizes = [16, 32, 48, 128]

# Paths
svg_path = 'icons/icon.svg'
output_dir = 'icons'
Comment on lines +11 to +12
Copy link

Copilot AI Nov 16, 2025

Choose a reason for hiding this comment

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

Script assumes specific working directory. The script uses relative paths (icons/icon.svg and icons/) which assume it's being run from the project root directory. Consider either documenting this requirement in a comment, or making the script more robust by using __file__ to determine the script's location and construct absolute paths.

Suggested change
svg_path = 'icons/icon.svg'
output_dir = 'icons'
script_dir = os.path.dirname(os.path.abspath(__file__))
svg_path = os.path.join(script_dir, 'icons', 'icon.svg')
output_dir = os.path.join(script_dir, 'icons')

Copilot uses AI. Check for mistakes.

Copy link

Copilot AI Nov 16, 2025

Choose a reason for hiding this comment

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

Missing directory existence check. The script doesn't verify that the icons/ directory exists before attempting to write PNG files to it. While cairosvg may handle this, it's safer to explicitly check and create the directory if needed using os.makedirs(output_dir, exist_ok=True) before the loop.

Suggested change
# Ensure the output directory exists
os.makedirs(output_dir, exist_ok=True)

Copilot uses AI. Check for mistakes.
print("Generating PNG icons from SVG...")

for size in sizes:
output_path = os.path.join(output_dir, f'icon{size}.png')
print(f" Generating {size}x{size} icon...")

cairosvg.svg2png(
url=svg_path,
write_to=output_path,
output_width=size,
output_height=size
)
Comment on lines +20 to +25
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Nov 16, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion | 🟠 Major

Add error handling for PNG generation.

The cairosvg.svg2png() call could fail due to malformed SVG, permission issues, or library errors. Without error handling, failures will crash the script with unclear messages.

Apply this diff:

 for size in sizes:
     output_path = os.path.join(output_dir, f'icon{size}.png')
     print(f"  Generating {size}x{size} icon...")

-    cairosvg.svg2png(
-        url=svg_path,
-        write_to=output_path,
-        output_width=size,
-        output_height=size
-    )
+    try:
+        cairosvg.svg2png(
+            url=svg_path,
+            write_to=output_path,
+            output_width=size,
+            output_height=size
+        )
+    except Exception as e:
+        print(f"  ✗ Failed to generate {output_path}: {e}")
+        sys.exit(1)

     print(f"  ✓ Created {output_path}")
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
cairosvg.svg2png(
url=svg_path,
write_to=output_path,
output_width=size,
output_height=size
)
try:
cairosvg.svg2png(
url=svg_path,
write_to=output_path,
output_width=size,
output_height=size
)
except Exception as e:
print(f" ✗ Failed to generate {output_path}: {e}")
sys.exit(1)
🤖 Prompt for AI Agents 
In generate_icons.py around lines 20 to 25, the cairosvg.svg2png() call lacks
error handling so failures (malformed SVG, permissions, library errors) will
crash the script with unclear messages; wrap the svg2png call in a try/except
that catches broad exceptions (e.g., Exception), log a clear, contextual error
message including the svg_path, output_path and the exception details, and
either continue to the next icon or re-raise a more informative exception
depending on existing control flow; ensure any resources are cleaned up and use
non-failing logging/error reporting consistent with the rest of the script.

Comment on lines +16 to +25
Copy link

Copilot AI Nov 16, 2025

Choose a reason for hiding this comment

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

Missing error handling for file operations and SVG conversion. The script doesn't handle potential errors such as missing SVG file, permission issues writing output files, or invalid SVG content. Consider wrapping the conversion logic in a try-except block to provide helpful error messages.

Copilot uses AI. Check for mistakes.

print(f" ✓ Created {output_path}")

print("\n✨ All icons generated successfully!")
Comment on lines +1 to +29
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Nov 16, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion | 🟠 Major

Document the cairosvg dependency.

The script requires cairosvg but this dependency is not documented in a requirements.txt file or in the README. This will cause the script to fail for new contributors or in CI/CD environments.

Consider creating a requirements.txt file or adding installation instructions to the README. Would you like me to generate a requirements file or open an issue to track this?

🧰 Tools
🪛 Ruff (0.14.4)

1-1: Shebang is present but file is not executable

(EXE001)

🤖 Prompt for AI Agents 
In generate_icons.py lines 1-29, the script depends on the external package
`cairosvg` but there is no documented dependency; add a requirements.txt at the
repo root containing `cairosvg` (optionally with a version pin, e.g.
cairosvg>=2.0.0) and update the README to include a one-line install instruction
(`pip install -r requirements.txt`) and a short note that the icon generation
script requires Python and cairosvg; commit both files so CI and new
contributors can install dependencies before running the script.

80 changes: 80 additions & 0 deletions icons/icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified icons/icon128.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified icons/icon16.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified icons/icon32.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified icons/icon48.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading