Page MenuHomePhabricator

Provide arbitrary browser version summation in the browser dashboard
Closed, ResolvedPublicFeature

Description

Feature summary:

  • A graph of browser versions to see if certain CSS without fallback is appropriate, like the Usage relative graph display in CanIUse.com. CanIUse displays hover-overs for percentages of each browser. I don't need the system to know whether that CSS is fine to use, I have CanIUse.com for that.
    image.png (674×1 px, 87 KB)
  • Or even just a cumulative percentage like is displayed at the top right for a property/rule in CanIUse.com
    image.png (91×305 px, 4 KB)

The basic feature might look like this:

  • I input Firefox version 52 and Firefox version 56. The system computes the sum of the views from 52 to 56, then computes and outputs the percentage of those views relative to total Firefox views and total views (the second is more important to me, I think).
  • For any versions that are non-0, display the version and its percentage (total? idk)

Benefits: At https://analytics.wikimedia.org/dashboards/browsers/ , we can get graphs, and the data backing them in CSV form, of browsers and versions that are viewing WMF websites. This data can be used to make decisions about what CSS I want to write as a user of TemplateStyles (though decision makers for MediaWiki's browser compatibility may be interested). For example, I recently was interested in the browser views between the first versions of the major browsers in which the CSS column gap property was supported and the first versions of the major browsers in which the CSS flex gap property was supported (for Chrome, it's 30 some odd versions).

To do this today, I either need to manually count the percentages of each browser's version viewership data and then sum them up, or I need to download the raw CSV available and then apply a PivotTable or something to that affect. That's not a very clean answer when the source of the data is already available server-side.

Background: I discussed this with @Legoktm on Discord, who said he would chat with @Milimetric (and he did, who said a separate tool would need to be written, which Lego then signed himself up "whenever [he has] free time again")

To pull a bit more text out of that discussion, https://github.com/wikimedia/stylelint-config-wikimedia isn't useful for two reasons: 1) I author TemplateStyles onwiki; and 2) I knew what browsers weren't supported by certain declarations, I would just prefer to use local traffic stats to determine whether X or Y browser is relevant to the decision to use certain styles. In this specific instance, all of the relevant grade C browsers supported @supports, the issue is that gap in flex contexts wasn't supported by browsers until much later than both multicol gap and even grid gap. So I run into a problem where even if I use @supports (gap: 1em), the browser may not style things correctly, because I'm using flex, not the other two. So I wanted view numbers for the gap (heh) between roughly Chrome 50 and Chrome 84. It's not the first time I've wanted such a tool, e.g. when @Volker_E drops the 'let's upgrade basic support' tasks, I investigate whether X or Y properties show up in the relevant timeframe (so I think he might find such a tool useful for making his own cases).

Event Timeline

https://steve-adder.toolforge.org/

Awaiting Izno's feedback if it's satisfactory or not.

Now documented at https://wikitech.wikimedia.org/wiki/Tool:Steve-adder - additional feature/bug requests can be made on the talk page.