Page MenuHomePhabricator

Build opt-out link for logged-in users with new vector on
Open, HighPublic5 Estimate Story Points

Description

User Story

As a logged-in user on a test wiki, I want an easy way to turn the desktop improvements off in case I don't like the new changes

Acceptance criteria

  • link will display in the sidebar in the following cases:
  • Logged-in users on test wikis (with a vector version preference NOT set to Legacy Vector - default state)
  • Logged-in users on other wikis (with a vector version preference NOT set to Legacy Vector - non-default state)
  • Copy: "Switch to old look"
  • Selecting the link will take user to the appearances tab in preferences
  • Link should contain a provenance parameter in the query string for tracking clicks (https://wikitech.wikimedia.org/wiki/Provenance)

Design

note: copy should read "switch to old look"

Details

Related Gerrit Patches:
mediawiki/skins/Vector : masterAdd end margin to opt-out link
mediawiki/skins/Vector : masterAdd opt-out link to Sidebar for Vector/Logged-in Users With Abstractions
mediawiki/skins/Vector : masterAdd opt-out link to Sidebar for Vector/Logged-in Users Without Abstractions
mediawiki/skins/Vector : masterPOC: Introduce Component Injection and LegacyView
mediawiki/skins/Vector : masterSplit logo into its own component to increase Sidebar reusability
mediawiki/skins/Vector : masterPOC: Introduce IInteractor (and ISkinDataRepository)
mediawiki/skins/Vector : masterSplit content into its own component to increase its reusability
mediawiki/skins/Vector : masterSplit header placeholder into its own component to increase its reusability
mediawiki/skins/Vector : masterMustache Documentation: Cleanup/Clarify Mustache template params
mediawiki/skins/Vector : DIPSplit logo into its own component to increase Sidebar reusability
mediawiki/skins/Vector : masterWIP: Build opt-out link for logged in, vector latest users
mediawiki/skins/Vector : masterIsolate styling of the first portal in sidebar
mediawiki/skins/Vector : masterWIP: Introduce "children" prop to Sidebar Component and the ITemplate Interface
mediawiki/skins/Vector : masterMake a parent component's stylesheet import all of its children's stylesheets
mediawiki/skins/Vector : masterRename Storybook Files to Reflect Their Respective Component
mediawiki/skins/Vector : masterMove watchstar import out of VectorTabs.less and into screen.less
mediawiki/skins/Vector : masterIsolate Vector Styles to their Respective Component
mediawiki/skins/Vector : masterPOC: Opt in button

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
ovasileva set the point value for this task to 5.Feb 18 2020, 5:21 PM

Firstly, apologies for the late comment here.

After some discussion, @Jdlrobson are in agreement that adding this button using the template system in Vector is better in principle than using the hook system because:

  • It's conceptually simpler than using the SkinBuildSidebar and SidebarBeforeOutput hooks
    • The former is cached for 24 hours, the latter isn't!
    • The logic is immediately before the code responsible for rendering the sidebar
  • Using the SidebarBeforeOutput hook is warned against!
Volker_E added a subscriber: Alex.EditedFeb 18 2020, 5:33 PM
  • can we make the button text shorter / less negative? Possibly, let's try to come up with alternatives

curious what part of it is negative? Maybe "switch to old look" ?

“Turn off” was the negative implying activity. “Turn off that …”

“Switch to old look” is better, also brought up limitation and imprecision of “look” vs something like “design”, but I guess you chose it for shortness?
“Zum alten Aussehen wechseln” would be the German translation. We should be aware of possible two-line buttons in other languages. @alexhollender proposed to also use a boldened text as alternative, that would simplify i18n and prob also relieve us from the nasty button module conversation (OOUI, mediawik.ui, theme styles)

Lastly, as soon as you switch, does the button's label change “Switch to new look” or would that be a toggle button? Or does the design change and the button disappears completely?

phuedx added a comment.EditedFeb 18 2020, 5:34 PM

5

We estimated this as a large because there was some debate about how/where the CSS for the button should be defined.

Volker_E removed a subscriber: Alex.Feb 18 2020, 5:45 PM

Lastly, as soon as you switch, does the button's label change “Switch to new look” or would that be a toggle button? Or does the design change and the button disappears completely?

There is no "Switch to new look" button. The purpose of this button is only to help folks easily opt-out, there is no equivalent button to help folks opt-in.

@alexhollender Thanks for clarification. For users who reconcile or mistakenly clicked the button, the way back is preferences then, correct?
Do we have a time limitation as for how long to show this *very prominent* UI element, that pushes down possible other popular user action elements in the sidebar, for example “Recent Changes”?

nray added a comment.Feb 19 2020, 10:27 PM

@Volker_E Regarding users who mistakenly click the button, my understanding of the AC is that the button is simply a link to the user preferences page appearance tab and that clicking on it will not actually perform the toggle (users will still have to opt-out after clicking the button)

nray added a comment.Feb 20 2020, 7:29 PM

Please see https://phabricator.wikimedia.org/T245456#5901923 for the latest on this task. I think figuring out the correct approach for that ticket is actually a prerequisite for this ticket and is what I'm focusing on right now

Change 572740 abandoned by Jdlrobson:
POC: Opt in button

Reason:
abandoning for now

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

@alexhollender Thanks for clarification. For users who reconcile or mistakenly clicked the button, the way back is preferences then, correct?
Do we have a time limitation as for how long to show this *very prominent* UI element, that pushes down possible other popular user action elements in the sidebar, for example “Recent Changes”?

Right, the button will take you to the appearances tab in preferences so you can learn where the preference lives. If you switch it off we're assuming that in the future you can find your way back to switch it on again.

Regarding how long the button will be in the sidebar I think perhaps we should both have a proposed timeline, and also plan to be somewhat reactive to how the rollout goes. I think the better the project is received the sooner we can remove the button. @ovasileva for more thoughts.

@alexhollender Thanks for clarification. For users who reconcile or mistakenly clicked the button, the way back is preferences then, correct?
Do we have a time limitation as for how long to show this *very prominent* UI element, that pushes down possible other popular user action elements in the sidebar, for example “Recent Changes”?

Right, the button will take you to the appearances tab in preferences so you can learn where the preference lives. If you switch it off we're assuming that in the future you can find your way back to switch it on again.
Regarding how long the button will be in the sidebar I think perhaps we should both have a proposed timeline, and also plan to be somewhat reactive to how the rollout goes. I think the better the project is received the sooner we can remove the button. @ovasileva for more thoughts.

Agree with this. The tentative plan would be to keep it throughout the course of the project but if opt-outs are very low, we can remove it earlier as well.

@ovasileva what do you think about a more minimal styling for the button? Even without the underline it seems relatively noticeable if you're looking at the sidebar.

@ovasileva what do you think about a more minimal styling for the button? Even without the underline it seems relatively noticeable if you're looking at the sidebar.

I'm leaning towards the initial version just because it does feel a lot easier to find. That said, I think this could be okay as well - editors are generally used to the sidebar and might notice we've added something else.

Demian added a subscriber: Demian.Thu, Feb 27, 12:08 PM

I'm leaning towards the initial version just because it does feel a lot easier to find. That said, I think this could be okay as well - editors are generally used to the sidebar and might notice we've added something else.

In the long term (if someone keeps on using the new look), that underlined link becomes distracting and awkward imo.
I would suggest emphasizing the link on the first 3 visits, then making it a regular link.
Emphasis can be added with the underline as shown here. Even the underline might not be enough to gain the attention of a user, thus I would instead add a colored bubble-arrow pointing to it, with an exclamation mark in the bubble, with an onshow popup animation and I would make the bubble much smaller or hide after 10 seconds or a half minute. Just an idea. Something along the lines of:

Fwiw the minimal styling would allow us to defer the problem we flagged in estimation about the appropriate way to render a button which I think is very likely to slow this task given the short heated conversation we did have in estimation.

Change 575328 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] WIP: Build opt-out link for logged in, vector latest users

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

As users are not exposed to an opt-in button, we should make very clear, what time, what success criteria is defined to phase out that prominent feature in order to a) not disturb users too long with such button not related to the content and b) to not end up pushing just curious users out of using “new look” and probably not searching their way back as it's not top prio for them, scrambling the collected data.

Jdlrobson updated the task description. (Show Details)Thu, Feb 27, 10:03 PM

a) not disturb users too long with such button not related to the content

+1

b) to not end up pushing just curious users out of using “new look” and probably not searching their way back as it's not top prio for them

It's unclear, but if I understand you correctly, I would suggest showing an opt-IN link/button/whatever at the same spot for users who opted out, so there's no need to search for the way back. Same widget, with "ON" text instead of "OFF".

ovasileva added a comment.EditedFri, Feb 28, 9:25 AM

Discussed with the team yesterday and decided to go for the link treatment here, which should reduce concerns around the treatment being too invasive for users that prefer the new treatment. The original plan was to keep the link throughout the release process of the project. That said, as the link treatment is less noticeable, we would like to instrument it and see if it's being used. If usage is low, we can turn it off earlier than initially expected.

ovasileva renamed this task from Build opt-out button for logged-in users with new vector on to Build opt-out link for logged-in users with new vector on.Fri, Feb 28, 9:25 AM
ovasileva updated the task description. (Show Details)
ovasileva updated the task description. (Show Details)
ovasileva updated the task description. (Show Details)

Change 575609 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] Isolate Vector Styles to their Respective Component

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

Change 575639 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] WIP: Rename Storybook Files to Reflect Their Respective Component

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

nray added a comment.EditedSat, Feb 29, 1:11 AM

I'm moving this to code review because 2 out my 3 patches are ready for review:

https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/575609/
https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/575639/

The third one I will tackle when I get back from VueConf and will need to be integrated with the completed feature management:

https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/575328/

Change 575778 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] WIP: Spit head and content into their own components/styles

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

Change 575779 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] WIP: Introduce "children" prop to Sidebar Component and the ITemplate Interface

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

Blocked on T245456 and @nray returning Thursday.
It needs some follow ups and the 3rd patch Nick mentions in T243281#5928617

Change 575609 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Isolate Vector Styles to their Respective Component

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

Change 575639 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Rename Storybook Files to Reflect Their Respective Component

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

nray added a comment.Thu, Mar 5, 8:03 PM

Thank you @Jdlrobson for reviewing several of these patches while I was out. It is much appreciated!

Change 577675 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] Move watchstar import out of VectorTabs.less and into screen.less

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

Change 577676 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] Make a parent component's stylesheet import all of its children's stylesheets

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

Change 577675 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Move watchstar import out of VectorTabs.less and into screen.less

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

Change 577676 abandoned by Nray:
Make a parent component's stylesheet import all of its children's stylesheets

Reason:
Abandoning because there are bigger fish to fry (e.g. https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/ /575779/) than this patch, and I'm fine with having the great discussion be the only output of this patch.

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

Change 578660 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] Split content into its own component to increase its reusability

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

Change 578973 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] Isolate styling of the first portal in sidebar

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

Change 578974 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] Split logo into its own component to increase Sidebar reusability

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

Change 578975 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] Mustache Documentation: Cleanup/Clarify Mustache template params

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

Change 578973 abandoned by Nray:
Isolate styling of the first portal in sidebar

Reason:
Jon has better solution to this in https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/ /579025

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

Change 579293 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] WIP: Add opt-out link to sidebar for Vector Latest/Logged in users

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

nray added a comment.Thu, Mar 12, 3:59 PM

Update: I'm planning to focus my energy on https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/579293/ which will be the quickest way to hit the AC in this task and then rebase my other patches (which I still believe are valuable) on top of that

Change 575328 abandoned by Nray:
WIP: Build opt-out link for logged in, vector latest users

Reason:
see https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/ /579293/ instead

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

Okay, I think https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/579293/ is ready for review now and think it hits all of the desired AC with the one caveat that it hasn't been integrated with feature manager yet.

Change 580591 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] Add opt-out link to Sidebar for Vector/Logged-in Users Without Abstractions

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

Change 580592 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] POC: Introduce ISkinDataRepository and IInteractor

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

nray added a comment.Wed, Mar 18, 2:33 AM

Ready for review again. I divided the work up even further so it will be easier to discuss. The first patch meets the bare minimum of the AC while the rest are geared more toward answering the question "How do we split Vector from legacy Vector":

https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/580591 (Does not use any abstractions)
https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/579293 (Uses abstractions)
https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/580592 (More of a POC)

Change 581109 had a related patch set uploaded (by Jdlrobson; owner: Nray):
[mediawiki/skins/Vector@DIP] Split logo into its own component to increase Sidebar reusability

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

Change 581109 abandoned by Jdlrobson:
Split logo into its own component to increase Sidebar reusability

Reason:
ahh now I'm the owner.

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

Change 578975 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Mustache Documentation: Cleanup/Clarify Mustache template params

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

Change 581799 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] POC: Introduce Component Injection and LegacyView

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

Change 580592 abandoned by Nray:
POC: Introduce IInteractor (and ISkinDataRepository)

Reason:
We probably don't need this right now given the skin is mostly presentation logic

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

nray added a comment.Mon, Mar 23, 4:26 PM

Sorry for all the noise everyone. For clarification, the patches for review are:

https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/580591/ (without abstractions)
https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/579293/ (with abstractions)
https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/Vector/+/581799/ (POC that's not ready for merge; just an idea)

Jdlrobson reassigned this task from nray to Edtadros.EditedFri, Mar 27, 12:20 AM
Jdlrobson added a subscriber: nray.

@Edtadros there's still a lot of patches remaining on this task but the first change should be testable via the acceptance criteria while testing against https://en.wikipedia.beta.wmflabs.org/
This change will be live in production everywhere next Thursday.

Note: On beta cluster 'legacy' is the default. This shouldn't be the case in production. To test legacy, make sure the special preferences box is ticked!

Change 580591 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Add opt-out link to Sidebar for Vector/Logged-in Users Without Abstractions

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

Change 584005 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/Vector@master] Add end margin to opt-out link

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

Change 584005 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Add end margin to opt-out link

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