Closed Bug 2032014 Opened 5 months ago Closed 5 months ago

Refactor about:addons into smaller per-component ES modules

Categories

(Toolkit :: Add-ons Manager, task, P1)

Product:
Toolkit
Component:
Add-ons Manager
Type:
task

Tracking

()

Status:
RESOLVED FIXED
Milestone:
152 Branch
Tracking Flags:
Tracking Status
firefox152 --- fixed

People

(Reporter: rpl, Assigned: rpl)

References

Details

(Whiteboard: [addons-jira])

Attachments

(16 files)

Bug 2032014 - about:addons refactoring into separate per-component ES modules - part 1: notice components. r=willdurand!
48 bytes, text/x-phabricator-request
Details | Review
Bug 2032014 - about:addons refactoring into separate per-component ES modules - part 2: small independent webcomponents r=willdurand!
48 bytes, text/x-phabricator-request
Details | Review
Bug 2032014 - about:addons refactoring into separate per-component ES modules - part 3: message-bar-stack and global-warnings. r=willdurand!
48 bytes, text/x-phabricator-request
Details | Review
Bug 2032014 - about:addons refactoring into separate per-component ES modules - part 4: simple sidebar independent webcomponents. r=willdurand!
48 bytes, text/x-phabricator-request
Details | Review
Bug 2032014 - about:addons refactoring into separate per-component ES modules - part 5: categories-box. r=willdurand!
48 bytes, text/x-phabricator-request
Details | Review
Bug 2032014 - about:addons refactoring into separate per-component ES modules - part 6: recommended footer and section hierarchy. r=willdurand!
48 bytes, text/x-phabricator-request
Details | Review
Bug 2032014 - about:addons refactoring into separate per-component ES modules - part 7: permissions list components. r=willdurand!
48 bytes, text/x-phabricator-request
Details | Review
Bug 2032014 - about:addons refactoring into separate per-component ES modules - part 8: options components r=willdurand!
48 bytes, text/x-phabricator-request
Details | Review
Bug 2032014 - about:addons refactoring into separate per-component ES modules - part 9: inline-options-browser. r=willdurand!
48 bytes, text/x-phabricator-request
Details | Review
Bug 2032014 - about:addons refactoring into separate per-component ES modules - part 10: addon-page-header and addon-page-options. r=willdurand!
48 bytes, text/x-phabricator-request
Details | Review
Bug 2032014 - about:addons refactoring into separate per-component ES modules - part 11: addon-details r=willdurand!
48 bytes, text/x-phabricator-request
Details | Review
Bug 2032014 - about:addons refactoring into separate per-component ES modules - part 12: addon-card. r=willdurand!
48 bytes, text/x-phabricator-request
Details | Review
Bug 2032014 - about:addons refactoring into separate per-component ES modules - part 13: recommended-addon-card r=willdurand!
48 bytes, text/x-phabricator-request
Details | Review
Bug 2032014 - about:addons refactoring into separate per-component ES modules - part 14: list components. r=willdurand!
48 bytes, text/x-phabricator-request
Details | Review
Bug 2032014 - about:addons refactoring into separate per-component ES modules - part 15: drag-drop-addon-installer and addon-shortcuts. r=willdurand!
48 bytes, text/x-phabricator-request
Details | Review
Bug 2032014 - about:addons refactoring into separate per-component ES modules - part 16: non-webcomponent JS files. r=willdurand!
48 bytes, text/x-phabricator-request
Details | Review

Currently aboutaddons.js is a huge script where most of the about:addons specfic custom elements are being defined along with the implementation logic wiring them together, and all the their related HTML templates are all part of the aboutaddons.html.

This bugzilla issue is tracking breaking down aboutaddons.js and aboutaddons.html into smaller per-component ES modules, aiming to make it easier to swap UI components implementation, reducing the implicit dependencies reached as globals and make inter-dependencies more immediately visible in the ES module itself.

Each ES module will be meant to include:

  • the custom element definition (with as minimal changes as possible compared with the same component as currently defined in aboutaddons.js)
  • the HTML template(s) related to the custom element defined in that same ES modules
  • static and lazy imports for other sys.mjs and .mjs ES modules the custom element definition depends on
  • consts that are only used in the custom element definition

This is intended to be an internal refactoring with no changes in behavior or look and feel, and so it is also meant to possibly not requiring any changes on the test coverage side (or to keep the impact on the test coverage as small and minimal as possible).

Whiteboard: [addons-jira]

Extract ColorwayRemovalNotice, ForcedColorsNotice, SmartWindowThemesNotice,
and TaarMessageBar from aboutaddons.js into dedicated ES modules under
components/, and move their HTML templates from aboutaddons.html into each
module using the markup/fragment lazy-initialization pattern.

Status: NEW → ASSIGNED

Extract SearchAddons, AddonUpdatesMessage, ProxyContextMenu, and
UpdateReleaseNotes from aboutaddons.js into dedicated ES modules under
components/.

These webcomponents do not have any HTML templates to be moved out of
aboutaddons.html and so their classes are being moved as is without any
actual change (besides search-addons, where AddonRepository is being
accessed through a lazy module getter defined in the ES module itself).

Depends on D294406

Extract MessageBarStackElement and GlobalWarnings from aboutaddons.js into
dedicated ES modules under components/.

GlobalWarnings imports MessageBarStackElement from message-bar-stack.mjs.

Extract CategoryButton, DiscoverButton, and SidebarFooter from
aboutaddons.js into dedicated ES modules under components/.

DiscoverButton imports CategoryButton from category-button.mjs.

Extract CategoriesBox from aboutaddons.js into categories-box.mjs under
components/. The component extends the dynamically-resolved button-group
custom element (as it was already being done in aboutaddons.js before this
refactoring).

Depends on D294626

Extract RecommendedFooter, RecommendedThemesFooter, RecommendedSection,
RecommendedExtensionsSection, RecommendedThemesSection, and DiscoveryPane
from aboutaddons.js into dedicated ES modules under components/.

The section subclasses import RecommendedSection from recommended-section.mjs
and each defines its own static markup/fragment for the template.

Depends on D294640

Extract AddonPermissionsList and AddonSitePermissionsList from aboutaddons.js
into dedicated ES modules under components/.

Depends on D294712

Attachment #9571201 - Attachment description: Bug 2032014 - about:addons refactoring into separate per-component ES modules - part 7: permissions list components. r=willdurand! → Bug 2032014 - about:addons refactoring into separate per-component ES modules - part 7: permissions list components. r=willdurand!

Extract AddonOptions and PluginOptions from aboutaddons.js into dedicated ES
modules under components/. PluginOptions imports AddonOptions from
addon-options.mjs.

Depends on D295032

Extract InlineOptionsBrowser from aboutaddons.js into inline-options-browser.mjs
under components/.

Depends on D295039

Extract AddonPageHeader and AddonPageOptions from aboutaddons.js into
dedicated ES modules under components/.

Depends on D295046

Extract AddonDetails from aboutaddons.js into addon-details.mjs under
components/.

Depends on D295056

Extract AddonCard from aboutaddons.js into addon-card.mjs under components/.

Depends on D295064

Extract RecommendedAddonCard from aboutaddons.js into recommended-addon-card.mjs
under components/. Import AddonCard from addon-card.mjs and use
AddonCard.fragment.firstElementChild instead of importTemplate("card").

Move the addon-name-container-in-disco-card and addon-description-in-disco-card
templates into markup getters for two new separated RecommendedAddonName and
RecommendedAddonDescription custom elements.

RecommendedAddonCard setDiscoAAjddon method uses the AddonCard.fragment as its base
template and replaces the div.addon-name-container and div.addon-description elements
from the addon-card template markup with the specialized RecommendedAddonName and
RecommendedAddonDescription custom elements.

Depends on D295073

Extract AddonList and RecommendedAddonList from aboutaddons.js into
dedicated ES modules under components/.

Depends on D295263

Replace drag-drop-addon-installer.js and shortcuts.js with dedicated ES
modules under components/. The block-scoped helpers in shortcuts.js become
module-level private helpers. The six shortcut HTML templates move from
aboutaddons.html into addon-shortcuts.mjs using DOMParser-based lazy
initialization. The old unused .js files are removed along with their
jar.mn entries.

Depends on D295266

Replace aboutaddons.js, aboutaddonsCommon.js, view-controller.js, and
abuse-reports.js with ES modules.

This patch is also moving into aboutaddons-utils.mjs all shared helpers and
constants from both aboutaddons.js and aboutaddonsCommon.js.

The ES modules view-controller.mjs, abuse-reports.mjs are providing the
same set of helpers they are already providing, but instead of setting
them as window globals they are now ES module export.

The ES module aboutaddons.mjs is the subset of the original aboutaddons.js
script and it is now providing only the main entry point, in particular:
view definitions, initialize, and window globals accessed externally (either
by other Gecko internals or by the existing tests).

All webcomponents ES modules are updated to use explicit imports instead of
window globals.

Depends on D295275

Pushed by luca.greco@alcacoop.it: https://github.com/mozilla-firefox/firefox/commit/67401123c86c https://hg.mozilla.org/integration/autoland/rev/23ab9b4116aa about:addons refactoring into separate per-component ES modules - part 1: notice components. r=willdurand https://github.com/mozilla-firefox/firefox/commit/7bd276c30cad https://hg.mozilla.org/integration/autoland/rev/edb0e411766b about:addons refactoring into separate per-component ES modules - part 2: small independent webcomponents r=willdurand https://github.com/mozilla-firefox/firefox/commit/5e57860e52f2 https://hg.mozilla.org/integration/autoland/rev/34c7ffad2ad7 about:addons refactoring into separate per-component ES modules - part 3: message-bar-stack and global-warnings. r=willdurand https://github.com/mozilla-firefox/firefox/commit/45e72bc91081 https://hg.mozilla.org/integration/autoland/rev/f48faf57c900 about:addons refactoring into separate per-component ES modules - part 4: simple sidebar independent webcomponents. r=willdurand https://github.com/mozilla-firefox/firefox/commit/100183b25fb2 https://hg.mozilla.org/integration/autoland/rev/b8bb8ac0e6db about:addons refactoring into separate per-component ES modules - part 5: categories-box. r=willdurand https://github.com/mozilla-firefox/firefox/commit/1bd25265eeef https://hg.mozilla.org/integration/autoland/rev/cdbc54f64a3b about:addons refactoring into separate per-component ES modules - part 6: recommended footer and section hierarchy. r=willdurand https://github.com/mozilla-firefox/firefox/commit/7109a812f169 https://hg.mozilla.org/integration/autoland/rev/966e0f5d69d2 about:addons refactoring into separate per-component ES modules - part 7: permissions list components. r=willdurand https://github.com/mozilla-firefox/firefox/commit/5847b8265269 https://hg.mozilla.org/integration/autoland/rev/7ef171c880d6 about:addons refactoring into separate per-component ES modules - part 8: options components r=willdurand https://github.com/mozilla-firefox/firefox/commit/053d3489feb3 https://hg.mozilla.org/integration/autoland/rev/75a9f96904f2 about:addons refactoring into separate per-component ES modules - part 9: inline-options-browser. r=willdurand https://github.com/mozilla-firefox/firefox/commit/8a2a6664d093 https://hg.mozilla.org/integration/autoland/rev/c3f3f3b54a5f about:addons refactoring into separate per-component ES modules - part 10: addon-page-header and addon-page-options. r=willdurand https://github.com/mozilla-firefox/firefox/commit/1ed11cbad6ba https://hg.mozilla.org/integration/autoland/rev/c78fb4926d66 about:addons refactoring into separate per-component ES modules - part 11: addon-details r=willdurand https://github.com/mozilla-firefox/firefox/commit/c30f4e1be95d https://hg.mozilla.org/integration/autoland/rev/6800050cb80f about:addons refactoring into separate per-component ES modules - part 12: addon-card. r=willdurand https://github.com/mozilla-firefox/firefox/commit/ec239cebe164 https://hg.mozilla.org/integration/autoland/rev/589532f9301e about:addons refactoring into separate per-component ES modules - part 13: recommended-addon-card r=willdurand https://github.com/mozilla-firefox/firefox/commit/f6ec6f817948 https://hg.mozilla.org/integration/autoland/rev/3f8c5ff52f7d about:addons refactoring into separate per-component ES modules - part 14: list components. r=willdurand https://github.com/mozilla-firefox/firefox/commit/9f60ef754dfd https://hg.mozilla.org/integration/autoland/rev/25b919202d37 about:addons refactoring into separate per-component ES modules - part 15: drag-drop-addon-installer and addon-shortcuts. r=willdurand https://github.com/mozilla-firefox/firefox/commit/e18af09bd250 https://hg.mozilla.org/integration/autoland/rev/7357dfb391b7 about:addons refactoring into separate per-component ES modules - part 16: non-webcomponent JS files. r=willdurand
Pushed by agoloman@mozilla.com: https://github.com/mozilla-firefox/firefox/commit/cdf7090f9382 https://hg.mozilla.org/integration/autoland/rev/70a88d31d5a7 Revert "Bug 2032014 - about:addons refactoring into separate per-component ES modules - part 16: non-webcomponent JS files. r=willdurand" for causing bc failures.

Backed out for causing bc failures.

Flags: needinfo?(lgreco)

(In reply to agoloman from comment #19)

Backed out for causing bc failures.

The failure hit was originated by browser_all_files_referenced.js, I've updated the patch part 6 to add explicit script tags for the two ES modules that have triggered that failure (recommended-footer.mjs and recommended-themes-footer.mjs) and confirmed locally that the browser_all_files_referenced.js failure was not hit anymore as expected.

The last push to try looks good too:

I'll be pushing the updated (and rebased) patch stack to autoland in a minute.

Flags: needinfo?(lgreco)
Pushed by luca.greco@alcacoop.it: https://github.com/mozilla-firefox/firefox/commit/59cecfaf07b5 https://hg.mozilla.org/integration/autoland/rev/6f8c8f717a23 about:addons refactoring into separate per-component ES modules - part 1: notice components. r=willdurand https://github.com/mozilla-firefox/firefox/commit/7a670c0bb54c https://hg.mozilla.org/integration/autoland/rev/7418e7246f03 about:addons refactoring into separate per-component ES modules - part 2: small independent webcomponents r=willdurand https://github.com/mozilla-firefox/firefox/commit/2b6d9508d3fd https://hg.mozilla.org/integration/autoland/rev/fe5c848e1d9b about:addons refactoring into separate per-component ES modules - part 3: message-bar-stack and global-warnings. r=willdurand https://github.com/mozilla-firefox/firefox/commit/1c07ef3d747d https://hg.mozilla.org/integration/autoland/rev/c4fe6e05dc82 about:addons refactoring into separate per-component ES modules - part 4: simple sidebar independent webcomponents. r=willdurand https://github.com/mozilla-firefox/firefox/commit/105433307702 https://hg.mozilla.org/integration/autoland/rev/e5be00890972 about:addons refactoring into separate per-component ES modules - part 5: categories-box. r=willdurand https://github.com/mozilla-firefox/firefox/commit/a71cdb90756d https://hg.mozilla.org/integration/autoland/rev/f39a75924693 about:addons refactoring into separate per-component ES modules - part 6: recommended footer and section hierarchy. r=willdurand https://github.com/mozilla-firefox/firefox/commit/a3ed6edf6e9c https://hg.mozilla.org/integration/autoland/rev/75aa96011230 about:addons refactoring into separate per-component ES modules - part 7: permissions list components. r=willdurand https://github.com/mozilla-firefox/firefox/commit/91ab663eb13f https://hg.mozilla.org/integration/autoland/rev/b709d6041841 about:addons refactoring into separate per-component ES modules - part 8: options components r=willdurand https://github.com/mozilla-firefox/firefox/commit/004d1c00e628 https://hg.mozilla.org/integration/autoland/rev/464421e077d6 about:addons refactoring into separate per-component ES modules - part 9: inline-options-browser. r=willdurand https://github.com/mozilla-firefox/firefox/commit/053d4a0f0e0c https://hg.mozilla.org/integration/autoland/rev/bbb991f5f6b2 about:addons refactoring into separate per-component ES modules - part 10: addon-page-header and addon-page-options. r=willdurand https://github.com/mozilla-firefox/firefox/commit/5c3539f806de https://hg.mozilla.org/integration/autoland/rev/0247bd762985 about:addons refactoring into separate per-component ES modules - part 11: addon-details r=willdurand https://github.com/mozilla-firefox/firefox/commit/fd3900a7d135 https://hg.mozilla.org/integration/autoland/rev/466b159a48cf about:addons refactoring into separate per-component ES modules - part 12: addon-card. r=willdurand https://github.com/mozilla-firefox/firefox/commit/de0fdc3767c5 https://hg.mozilla.org/integration/autoland/rev/b0237fb2ea4c about:addons refactoring into separate per-component ES modules - part 13: recommended-addon-card r=willdurand https://github.com/mozilla-firefox/firefox/commit/05743a67be45 https://hg.mozilla.org/integration/autoland/rev/ae2f1561670a about:addons refactoring into separate per-component ES modules - part 14: list components. r=willdurand https://github.com/mozilla-firefox/firefox/commit/bb7d4dd42db8 https://hg.mozilla.org/integration/autoland/rev/360238fe69e7 about:addons refactoring into separate per-component ES modules - part 15: drag-drop-addon-installer and addon-shortcuts. r=willdurand https://github.com/mozilla-firefox/firefox/commit/33682acc1fa0 https://hg.mozilla.org/integration/autoland/rev/0008c856dbc8 about:addons refactoring into separate per-component ES modules - part 16: non-webcomponent JS files. r=willdurand
Regressions: 2035089
No longer regressions: 2035089
See Also: → 2035089
Blocks: 2035223
QA Whiteboard: [qa-triage-done-c153/b152]
Regressions: 2041612
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: