Portlet links placement for Timeless skin

[evad37]

Currently for Timeless skin, portlet links are placed into the "Page tools" (p-cactions) portlet. This makes the portlet quite long, and links can be a little difficult to find (quickly), especially if you use other scripts that also add portlet links to that portlet.

It would be nicer if Twinkle constructed it's own portlet with the heading "Twinkle" below the existing portlet, and added its links there. The html structure needed would be

<div role="navigation" class="mw-portlet" id="p-twinkle" aria-labelledby="p-twinkle-label">
    <h3 id="p-twinkle-label" lang="en" dir="ltr">Twinkle</h3>
    <div class="mw-portlet-body">
        <ul lang="en" dir="ltr">
        </ul>
    </div>
</div>

inserted after div#p-cactions. Since it will be inside an existing "sidebar chunk", Timeless will take care of positioning it appropriately based on screen size (right sidebar, left sidebar, dropdown menu).

Previously discussed in issue #401.

[siddharthvp]

Yeah. Thought about doing this recently along with changes from #721. That attempt didn't work - this isn't possible to do within the existing infrastructure of Twinkle.addPortlet, because of the silly reason that the div.sidebar-inner (within div#page-tools) in Timeless doesn't have any id - which means we can't specify div.sidebar-inner as the portletArea.

One easy fix would be to change L241 from var root = document.getElementById(navigation); to var root = document.getElementById(navigation) || document.querySelector(navigation); allowing any selector string to be usable for setting navigation area.

[evad37]

I've tried out the current testwiki version and it seems to work well