Page MenuHomePhabricator

Add collapsible functionality to IP info box
Closed, ResolvedPublic

Description

Make the panel implemented in T268297 collapsible like the search form on the same page

Requirements:

  • Information is shown in an accordion on Special:Contributions page for an IP address
  • Above the contribs search form
  • Default state: Closed
  • Do not preserve state (open/closed) across different IP contribs pages

Event Timeline

Restricted Application added a subscriber: Aklapper. ยท View Herald TranscriptDec 7 2020, 7:45 PM

@STran Hat tip - you can just mention the ticket number to link to it like T268297 will appear like T268297. And if you add curly braces around it, it expands to the ticket title - {T268297} becomes T268297: Move over existing IP Information from popup to the contributions page.

Change 647050 had a related patch set uploaded (by STran; owner: STran):
[mediawiki/extensions/IPInfo@master] Make the infobox collapsible

https://gerrit.wikimedia.org/r/647050

Closed state:

image.png (90ร—1 px, 3 KB)

Open state:

image.png (130ร—1 px, 8 KB)

Leaving all aesthetic changes to T269404

Tchanders added subscribers: Prtksxna, Tchanders.

@Prtksxna As mentioned in the standup today, here's the discrepancy in appearance between our infobox and the collapsible form:

image.png (156ร—906 px, 6 KB)

With focus:

image.png (151ร—903 px, 6 KB)

We could fix it by copying exactly what the collapsible form does, but I wouldn't recommend it... The collapsible form uses a CollapsibleFieldsetLayout, a custom PHP class just for the form use-case - a lot of the CSS relies on there being a form. This isn't really re-usable, and we'd have to essentially re-implement it in JS, then copy the CSS without requiring a form. It'll be difficult to understand and maintain, and to keep up to date if changes are made to the collapsible form.

In @STran's patch, the infobox just uses a button, which is a lot more straightforward to understand.

We do want them to look the same eventually, and I think the safest way to do this will be by creating some collapsible panel component that will work for the form and for our infobox, and can be reused anywhere: T269878

Change 647050 merged by jenkins-bot:
[mediawiki/extensions/IPInfo@master] Make the infobox collapsible

https://gerrit.wikimedia.org/r/647050

dom_walden added a subscriber: dom_walden.

The IPInfo box is now collapsible. When you first visit a page it is closed.

Test environment: local vagrant MediaWiki 1.36.0-alpha (af1d62c), IP Info 0.0.0 (daa8ffe).
Test browsers: Firefox 78 and Chromium 83.

@Tchanders this looks good. I think more important than the padding is the total click area of the button (which is larger in the current box). Can the button be made wider without any of the collapsible panel component work that you've planned.