Overlay Panel

The overlay panel is the primary interactive surface of IC Insight. It is injected into every page on *.infinitecampus.org that matches a grades pathname (/student/classroom/grades). It also activates inside iframes that contain the grades view, and within parent pages that embed such an iframe.

Appearance and Position

The overlay is a fixed-position, floating panel. Default position: top-right of the viewport (right: 16px; top: 96px). Default width: 420 px; height grows with content and is scrollable.

The overlay is fully draggable (grab the header bar) and resizable (eight handles: N, S, E, W, NE, NW, SE, SW corners). Position and size are saved to ICI_UI_STATE in chrome.storage.local and restored on next load.

Panel Sections

Header

[ IC Insight ]  [ Cache ]  [ Dashboard ]  [ Refresh ]  [ – ]  [ × ]
Button Action
Cache Saves the current page's parsed grade data to local storage. Also saves a manual history snapshot.
Dashboard Opens dashboard.html in a new tab (the full course hub).
Refresh Re-parses the current IC page DOM and redraws the overlay. Use this if grades changed.
– (Minimize) Collapses the panel body so only the header bar is visible. Click again to restore.
× (Close) Removes the overlay entirely. Reopen by refreshing the page.

Summary Bar

Displays: course name · overall percentage (two decimal places) · letter grade in parentheses.

If multiple quarters have been detected on the page, a small line below the grade lists them: Quarters detected: Q1, Q2.

If any permanent score overrides or permanent assignment additions are active, a colored indicator appears: Pinned: N permanent change(s) active.

Breakdown Section

The breakdown section renders all categories grouped by quarter. Each quarter is a collapsible <details> block (open by default) labeled with the quarter name and a count of categories and assignments.

Within each quarter, categories are rendered as cards:

  • Category header: name, optional weight (w=N), category average percentage, and optional SEBI badge.
  • SEBI toggle row (when SEBI is globally enabled): a checkbox labeled "Equalize assignments / SEBI Mode" plus a ? help button that opens the SEBI explanation dialog.
  • Assignment rows: one row per assignment.

Assignment Row Layout

[ Name ]  [Due: MM/DD/YYYY]  [badges]   score (pct%)   [Drop] [Edit] [Pin]

Badges shown inline with the name:

Badge Meaning
DROPPED (red) Gradebook-dropped - IC flagged this assignment as dropped. It appears faded with strikethrough and is excluded from grade calculations.
×N (orange) Assignment has a multiplier of N (e.g. ×2). Earned and possible are scaled by this factor in calculations.
PINNED (accent) A permanent score override is active for this assignment via the Pin feature.
PERM ADD (accent) This assignment was added permanently via the "Add Assignment Permanently" form.
· what-if (accent) This is a temporary what-if addition.
· edited (muted) A what-if score edit is active for this assignment.
· ungraded (muted) Assignment has no grade yet. Excluded from calculations.

Action buttons (only on real, non-synthetic, non-permAdded assignments):

Button Action
Drop / Undrop Toggles a what-if drop on this assignment. Dropped assignments are removed from the displayed list and excluded from calculations.
Edit Opens a dialog to enter a hypothetical earned/possible for this assignment (what-if edit).
Pin / Unpin Opens a dialog to enter a permanent score override (persists across refreshes). Clicking "Unpin" on a pinned assignment removes the override immediately.

Clicking a category header toggles the assignment list open/closed.

What-If Calculator

A collapsible <details> section at the bottom of the overlay body.

Controls:

  1. Category dropdown - lists all categories from all quarters. Each option shows the category name, weight (if any), and quarter ([Quarter N]). The value encodes quarterId::categoryId.
  2. Assignment name input.
  3. Earned and Possible number inputs.
  4. Add button - adds the hypothetical assignment to the selected category and recalculates.
  5. Active what-if list - lists all current what-if additions, drops, and edits with a Remove/Undo button for each.
  6. Clear All - removes all what-if items and recalculates.
  7. Save Scenario - saves the current what-if state as a named scenario (see What-If & Scenarios).

What-if state is loaded from WI_${courseKey} in storage when the page initializes and saved there after each change. It persists across refreshes for the same course URL.

Permanent Edits Section

A collapsible <details> section below the What-If Calculator. Includes a numeric badge showing the total count of active permanent changes.

Upper portion - Active list: Lists all pinned score overrides and permanently added assignments, each with an Undo button.

Lower portion - Add Assignment Permanently form:

  • Category dropdown (same as What-If dropdown)
  • Assignment name, earned, possible inputs
  • Add button - creates a permanent assignment addition that persists across refreshes (stored in PA_${courseKey}).

The note at the bottom of this section explains: "Use Pin on any assignment to override its score. Use the form above to add new assignments. Both persist across refreshes."

Overlay Lifecycle

  1. On page load, the content script runs initializeICI() which checks whether the page matches a grades URL (or contains a grades iframe).
  2. renderOverlay() creates the DOM and appends it to document.documentElement.
  3. applyOverlayTheme() loads the user's theme and color palette and applies CSS variables.
  4. The overlay calls refresh() which parses the page, saves a cache snapshot, and renders the breakdown.
  5. A MutationObserver watches for navigation changes (Infinite Campus is a single-page app). When the grades panel reloads, the overlay re-runs refresh() automatically.
  6. If the user navigates away from a grades page, the overlay is removed and state is cleaned up.