twinkle: refactor addPortlet code

[NovemLinguae]

Tracking task for my refactoring of Twinkle.addPortlet() and related code

• Patch 1 - twinkle.js: group all portlet code in a class #1836
  • group addPortlet and addPortletLink and config variables into a class
  • convert Twinkle's 5 skin preference variables (which are hidden and do not show up on the preferences page, are basically hard coded) to class variables
• Patch 2
  • replace addPortlet code to just process a JSON that looks like this. this will make this code much easier to read and work on. if the skin devs make a change that breaks twinkle, you just look at this JSON, inspect element in your browser, compare the two, see what changed, make the change. all the complicated logic and the 5 config variables will be deleted.

this.addPortletHTML = {
    'vector-2022': {
        insertionTarget: '#blah',
        insertionMethod: 'append',
        htmlToInsert: `
<nav aria-labelledby="p-twinkle-label" class="mw-portlet vector-menu vector-menu-dropdown vector-dropdown vector-menu-dropdown-noicon" id="p-twinkle">
    <input id="p-twinkle-dropdown-checkbox" class="vector-menu-checkbox vector-dropdown-checkbox" type="checkbox" aria-labelledby="p-twinkle-label">
    <h3 id="p-twinkle-label" for="p-twinkle-dropdown-checkbox" class="vector-menu-heading vector-dropdown-label">
        <span>TW</span>
        <a href="#"></a>
    </h3>
    <div class="vector-menu-content vector-dropdown-content">
        <ul class="vector-menu-content-list">
        </ul>
    </div>
</nav>
        `
}

• Patch 3
  • switch to mw.util.addPortlet()?

[NovemLinguae]

Related #1835 twinkle: switch to mw.util.addPortlet() function

[NovemLinguae]

WMF web team says mw.util.addPortlet() is ready for use now. https://phabricator.wikimedia.org/T342815#9303586

[NovemLinguae]

Closing in favor of #1835