Description

The createBanner code has become overly-complicated and mixes responsibilities. It is hard to read and has bugs.

Solution

In order to isolate the problem outlines in T202349 the createBanner function in pageIssues.js should be split into (at least) 3 functions:

createPageIssueBanner - used to create a single page-issue banner

createPageIssueBannerMultiple - used to create a page-issue banner the contains multiple issues

createPageIssueNotice - used to create the old “this page has issues” treatment.

(Not applicable) Unit tests will also need to be updated to reflect these new functions.

These functions should still be called by the createBanner function in order to avoid having to refactoring the initPageIssues function (in this task).

Refactoring this function should help us solve the icon problem described in T202349 by isolating this scenario into one specific function, which will also lessen the chance of regressions while working with this part of the codebase.

Unfortunelty, the patch above doesn't only separate out functions into smaller pieces. It also (inadvertently) fixes the icon issues raised T202349. This fix includes modifying the way page-issue banners manipulate the DOM, which means the patch should go through thorough browser QA.