feat: Add Chrome Network Monitor extension with popup UI and request handling

- Implemented popup.html for user interface with search functionality and request display.
- Developed popup.js to manage search items, matched requests, and clipboard operations.
- Created mergeConflictManager.js for automated git operations in specified repositories.
- Added projects.txt to maintain a list of relevant projects.
- Introduced pushReleaseBranches.js for managing release branches across multiple projects.
- Developed releasePrepper.js to prepare projects for release with branch management.
- Created stashUpdater.js to update git origins for projects.
- Added updatedProjects.txt to track projects that have been updated.
This commit is contained in:
Greg Jacobs
2026-01-26 16:18:42 -05:00
parent 6702f04050
commit f7d928506a
82 changed files with 9285 additions and 122 deletions

View File

@@ -0,0 +1,89 @@
# Feature Flags Modal RBC Style
## Overview
This modal allows users to view, add, toggle, and remove feature flags stored in session storage. It is styled to match the RBC Direct Investing modal design, with a professional, modern look and clear sectioning.
---
## 🆕 New Layout (as of July 2025)
### 1. **Header**
- **Title:** `Feature Flags Manager`
- Large, bold, and visually separated from the rest of the modal.
### 2. **Add New Feature Flags (Top Section)**
- **Header:** `Add New Feature Flags`
- Always at the top, right below the main title.
- Allows adding multiple new feature flags before saving.
- Each new flag row includes:
- Checkbox (default: checked)
- Text input for flag name
- Remove button
- "+ Add Another Feature Flag" button for more rows
- Section is visually separated with a border below.
### 3. **Existing Feature Flags**
- **Header:** `Existing Feature Flags`
- Appears below the new flags section.
- Flags are displayed in a two-column grid.
- Each flag is shown as a card with:
- Checkbox (toggle on/off)
- Flag name
- Delete (×) button
- Cards have hover and focus effects for clarity.
### 4. **Action Buttons (Footer)**
- **Buttons:** `Cancel` (secondary), `Save Changes` (primary)
- Right-aligned, styled to match RBC's button system
- Cancel closes the modal without saving
- Save applies all changes and reloads the page
### 5. **Close Button**
- Top-right corner (×), styled as a circular icon
- Closes the modal and overlay
### 6. **Overlay**
- Dimmed, blurred background overlay for focus
---
## 🎨 Styling Details
- **Colors:** RBC blue (`#006ac3`), hover blue (`#0051a5`), error red (`#d32f2f`), backgrounds (`#fafafa`, `#f3f7f8`)
- **Typography:** System font stack, clear hierarchy
- **Spacing:** Generous padding, grid layout, rounded corners
- **Accessibility:** High contrast, focus states, large click targets
---
## 🛠️ Usage
- The modal is generated and injected by the `rbc-di-featureflags.js` bookmarklet.
- All changes are saved to `sessionStorage` under the `rbc_di_session` key.
- Use the provided script to generate a bookmarklet for browser use.
---
## 📋 Example Structure
```
┌─────────────────────────────────────┐
│ Feature Flags Manager │ ← Main Header
├─────────────────────────────────────┤
│ Add New Feature Flags │ ← New section (top)
│ [+] Add Another Feature Flag │
├─────────────────────────────────────┤
│ Existing Feature Flags │ ← New header
│ ┌─────────────┐ ┌─────────────┐ │
│ │ Flag 1 [×] │ │ Flag 2 [×] │ │
│ └─────────────┘ └─────────────┘ │
├─────────────────────────────────────┤
│ [Cancel] [Save Changes] │
└─────────────────────────────────────┘
```
---
## ✅ Improvements Over Previous Version
- New flags section is always visible and prioritized
- Existing flags are clearly separated and labeled
- Modern, accessible, and brand-consistent design
- All actions (add, remove, toggle, save, cancel) are visually clear and easy to use