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:
89
src/utils/bookmarklets/rbc-di-featureflags.md
Normal file
89
src/utils/bookmarklets/rbc-di-featureflags.md
Normal 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
|
||||
Reference in New Issue
Block a user