fix: #3631526 Ship less custom CSS and JS, lean on core and the admin theme

Part of #3631526. Follow-up to !3 (merged), which merged before these commits landed on its branch.

The AI tabs now rely on core and admin theme markup. CSS went from 166 lines in two files to 16 lines in one; JS from 82 lines to 25.

Assets renamed to the admin-asset convention, with git mv in its own commit: css/ai-media.admin.css and js/ai-media.admin.js. css/tokens.css and css/ai-media.css are gone. Library name media_library unchanged.

What replaced the CSS and JS:

  • "New" badge: Gin gets gin-new-flag, Default Admin admin-new-flag (each theme's own new flag). Claro has no badge class, so the one remaining rule styles .ai-media-badge: an outline in the link's own color, so it keeps the link's contrast in any scheme and in forced colors. A space separates it from the label, so no flex rule.
  • Document preview: a read-only core textarea (#rows 8, vertical resize) instead of a custom scrolling box.
  • The AI disclosure and the provider message for admins break lines with <br> instead of display: block rules.
  • Errors are announced from the server with AnnounceCommand (assertive) instead of JS moving focus. Core already focuses the added media after a result.
  • The custom "Generating" status line is dropped: core's throbber message now says "Generating… This can take up to a minute." The JS left only announces that start, since core's throbber is not announced.
  • Dropped as theme concerns, not module ones: the readable line length cap, the narrow dialog stacking, the reduced motion throbber, and the dark mode error label override.

Behaviour change: core's tab script rewrites an opened tab's label from data-title, so the "New" badge now clears once the tab has been opened (it was restored by JS before).

Tested in Firefox at 1440 (Claro) and 1920 (Gin, Default Admin): SVG and document generate, Generate again (description kept, item replaced, one request per click), Save, Insert selected; empty description and non-SVG answer errors. axe (WCAG 2.2 A/AA): 0 violations. Best practice reports one heading-order on core's "Authored on" datetime h4, from core markup. No console errors. phpcs (Drupal, DrupalPractice), stylelint, cspell clean; eslint 0 errors.

Remaining tasks

  • Image generation not tested: the Echo provider has no text-to-image.

AI-Generated: Yes. Written with Claude Code (Claude Opus 5.5) under the Drupal AI policy; tested and reviewed by the author before submission.

Checkpoints:

  • File an issue
  • Addition/Change/Update/Fix
  • Testing to ensure no regression
  • Automated unit testing coverage
  • Automated functional testing coverage
  • UX/UI designer responsibilities
  • Readability
  • Accessibility
  • Performance
  • Security
  • Developer Documentation
  • User Guide Documentation
  • Reviewed by human
  • Code review by maintainers
  • Full testing and approval
  • Credit contributors
  • Review with the product owner
  • Release notes snippet
  • Release

Merge request reports

Loading
Loading