Maint/UI

[viseshrp]

No description provided.

[gemini-code-assist]

Summary of Changes

Hello @viseshrp, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request delivers a comprehensive user interface and experience refresh for the Wordspotting extension. It introduces a modern Material Design aesthetic, reorganizes the settings and popup views for improved usability, and refines the site allowlisting functionality by adding a 'Path section' scope. These changes aim to provide a more intuitive, visually appealing, and functionally robust user experience.

Highlights

• UI/UX Overhaul: The user interface for both the options page and the popup has been completely redesigned, moving from a card-based layout to a more modern, semantic structure using new CSS classes and HTML elements.
• Material Design Integration: A new shared theme stylesheet has been introduced, implementing Material Design 3 principles with a comprehensive set of CSS variables for colors, typography, and shadows, ensuring a consistent and modern look across the extension.
• Enhanced Site Allowlist Scope: The site allowlist functionality now includes a 'Path section' option, providing users with more granular control over which parts of a URL are included in the allowlist, replacing the less flexible 'Full URL (exact match)'.
• Refactored Keyword Display: Found keywords in the popup are now rendered using a semantically correct unordered list structure instead of generic span elements, improving accessibility and maintainability.

Changelog

• entrypoints/options/index.html
  • Rewrote the entire HTML structure to align with new UI/UX design principles, replacing generic div elements with semantic main, header, and section tags
  • Integrated a shared theme stylesheet (../shared/theme.css)
  • Updated input and button styling to use new CSS classes (text-button, input-row)
  • Restructured settings into setting-group and setting labels for better organization and accessibility
• entrypoints/options/style.css
  • Removed custom color variables and dark mode media queries, now inheriting them from ../shared/theme.css
  • Adopted Material Design CSS variables for colors, typography, and shadows
  • Refactored styles for the entire options page to match the new design system, including inputs, buttons, chips, and layout
• entrypoints/popup/index.html
  • Overhauled the HTML structure to implement the new Material Design UI
  • Replaced the old header and main content divs with app-bar, content, and group-card elements
  • Updated the settings icon SVG and button class
  • Added a 'Path section' option to the site scope selection dropdown
  • Changed keyword display from simple chips to a structured list
• entrypoints/popup/main.ts
  • Modified the scopeOptions array to include 'section' and remove 'full', reflecting the updated site allowlist functionality
  • Updated the renderKeywords function to create ul and li elements for keywords instead of span chips, improving semantic structure
• entrypoints/popup/style.css
  • Removed custom color variables and dark mode media queries, now inheriting them from ../shared/theme.css
  • Adopted Material Design CSS variables and new styling for the popup UI, including headers, buttons, form elements, and keyword display
  • Introduced new classes like popup-page, app-bar, group-card, group-header, card-body, form-row, field-label, select-wrap, list, and item
• entrypoints/shared/theme.css
  • Added a new stylesheet defining Material Design 3 color tokens (light and dark themes), elevation styles, typography, and shape variables
  • Included utility classes for common Material Design components like surface-card, primary-button, tonal-button, and icon-btn
  • Defined custom scrollbar styles
• entrypoints/shared/utils.ts
  • Updated the buildPatternsForTab function to include a section pattern based on the first path segment of a URL
  • Removed the full URL pattern from the returned object
• tests/utils.spec.ts
  • Updated buildPatternsForTab tests to validate the new section pattern and reflect the removal of the full pattern

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a significant and welcome user interface overhaul for both the options page and the popup. By migrating to a shared Material Design-based theme, the UI is now more modern, consistent, and maintainable. The introduction of theme.css is a great architectural improvement. The HTML has been refactored to be more semantic and accessible, which is excellent. I've found one minor opportunity for code cleanup in the CSS. Overall, this is a fantastic update.

[gemini-code-assist]

For better readability and maintainability, the two separate .setting-group rule blocks can be combined into one. The border-color override can be merged into the main border property.

Suggested change

	.setting-group {
	margin-top: 0;
	padding: 20px;
	overflow: hidden;
	border-radius: var(--md-sys-shape-corner-medium);
	border: 1px solid var(--md-sys-color-outline);
	background: transparent;
	/* or surface-variant */
	}
	.input-group {
	display: flex;
	margin-bottom: 20px;
	gap: 8px;
	/* Reduce border opacity for outline */
	.setting-group {
	border-color: rgba(var(--md-sys-color-outline-rgb), 0.4);
	}
	.setting-group {
	margin-top: 0;
	padding: 20px;
	overflow: hidden;
	border-radius: var(--md-sys-shape-corner-medium);
	border: 1px solid rgba(var(--md-sys-color-outline-rgb), 0.4);
	background: transparent;
	/* or surface-variant */
	}

[codecov]

Codecov Report

❌ Patch coverage is 80.00000% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 99.5%. Comparing base (fc90516) to head (9f9e374).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
entrypoints/shared/utils.ts	80.0%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@           Coverage Diff            @@
##             main     #24     +/-   ##
========================================
- Coverage   100.0%   99.5%   -0.5%     
========================================
  Files           2       2             
  Lines         242     244      +2     
  Branches       56      57      +1     
========================================
+ Hits          242     243      +1     
- Partials        0       1      +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.