Potential spike outcome: POC patch

@ovasileva, It seems that the metrics listed for A/B test are all guardrail metrics, i.e., pageviews, edit rates, session length, ToC usage, page tools menu usage. We still lack a good metric about this feature as the primary metric to determine the "win" or "lose" of the A/B test. If the guardrail metrics indicate no significant changes, which is inconclusive in stats, would we be confident in deploying the feature?

Change 898859 had a related patch set uploaded (by Kimberly Sarabia; author: Kimberly Sarabia):

[mediawiki/skins/Vector@master] Makes CSS style updates for Zebra

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

Change 900325 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] [WIP] Proof of concept refactor for new grid & design

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

Test wiki created on Patch demo by JDrewniak (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/29c6760753/w

Test wiki created on Patch demo by JDrewniak (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/f1f9241ee5/w

@KSarabia-WMF and I created two prototypes for this design.
One is very minimal and represents how we can achieve this design with the least amount of changes: https://patchdemo.wmflabs.org/wikis/f1f9241ee5/w
the second one refactors the layout pretty much entirely: https://patchdemo.wmflabs.org/wikis/29c6760753/w

The second approach might be more appropriate when we want to implement the new grid layout per T298198.

Either way, In order to make the new design A/B testable, we have to make the underlying HTML structure compatible with both designs so that we can switch between them using just CSS. To do that, we need the following:

1. Create a feature flag for this new layout
2. Move the header and sticky header outside of .mw-page-container
3. Move the .vector-column-end element after .vector-body (or not)
4. Create the styles for the new design.

Regarding point #3, we currently implement the following tab order:
Page title -> toolbar -> tools menu -> content
If we create a wrapper element for the white background, we would be moving the tools menu after the content, resulting in the following tab order:
Page title -> toolbar -> content -> tools menu

Our current tab order is probably preferable cc:@bwang.

Instead of creating a wrapper element for the content area, we could style the page-title, toolbar and content individually (giving them each the same white background and padding). This is slightly more risky because if an extension or gadget inserts content between these elements, that content would not have the white background (this concern might be theoretical though, as even the Wikivoyage pagebanners are placed inside the .vector-body element, which would have a white background).

In terms of next steps, I think we can create tasks that encompass the following:

1. Create the feature flag
2. Prepare the HTML for the new design
3. Create the styles for the new design
4. Create an A/B test for the new design

@Jdrewniak I like the approach in the second patch demo, as it allows us to keep the existing tab order, which I think is important for accessibility and usability. I agree that styling the page title, toolbar and content individually is more risky, but I think its a worthwhile trade off for keeping the existing tab order, and perhaps we can mitigate it with some clever child selector CSS.

In terms of next steps, it seems like the potential HTML changes are non trivial and involve updating our grid styles. Would it make sense to have 2 feature flags, 1 quick one for handling cached HTML when rolling out the new HTML structure, and 1 for the actual styles?

Also, if we do go with an approach that changes the grid, I think we need to also do T318011 to handle the 2 column case (content and page tools). Right now in order to handle that case we rely on a class 'vector-sidebar-container-no-toc', which is basically tech debt and wouldnt work with the grid in the second approach @Jdrewniak put together

I just wanted to say I love this change <3

Thanks for your input @bwang , I made a note of the tab order in this ticket: T332600

In terms of next steps, I've created the following tasks based on this spike that encompass the production of this new design:

1. T332448 - Create feature flag for Zebra#9 design update
2. T332449 - Prepare Vector 2022 header & sticky header for Zebra#9 design update
3. T332600 - Prepare content columns for Zebra#9 design update

I haven't created a ticket for an A/B test because I think the testing is still under discussion, but I separated out the production of the header & sticky header from the content columns, since I think those two things have adequate complexity in themselves.

I like the new grid :)

Minor problem with the 2nd demo though:

1280x950 on enwiki	same on the demo

The problem is the header and footer. Note that there is no space around the footer from the edges of the screen. The header goes off the screen (the logo and the link in the menu disappear). I guess that might be part of T332449, but I'm not sure.

Hmm... I did this exercise: change the position of the tools to the left side... And unfortunately there is a problem, not even with this grid, but with this structure. Maybe I'm missing something, but I've come up with something like below and I don't see how to fix it. I don't see a good, stable way to make a space between the table of contents and the tools. I can't do a row-gap because it will completely ruin the look of the title bar and tools. Longer ToC would also brake things.

I like the way the tab order works, and the way the rows are defined is quite clever and elegant... However, this structure doesn't seem to be very versatile and flexible.

My CSS changes:

/* load.php | https://patchdemo.wmflabs.org/wikis/29c6760753/w/load.php?lang=en&modules=ext.relatedArticles.styles%7Cext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cmediawiki.ui.button%2Cicon%7Cskins.vector.icons%2Cstyles&only=styles&skin=vector-2022 */

@media screen and (min-width: 1000px) {
  .vector-feature-page-tools-enabled .mw-body .vector-column-end {
    /* grid-row-start: titlebar-row; */
    /* grid-column: 21/25; */
    grid-column: 2/6;
  }
  .vector-feature-page-tools-enabled .mw-body .vector-column-start {
    /* grid-row-end: span 3; */
    /* grid-column: 1/6; */
    grid-row-end: span 2;
    grid-column: 2/6;
  }
  .vector-feature-page-tools-enabled .mw-body .vector-page-titlebar {
    /* grid-column: 6/21; */
    grid-column: 6/-2;
  }
  .vector-feature-page-tools-enabled .mw-body .vector-page-toolbar {
    /* grid-column: 6/21; */
    grid-column: 6/-2;
  }
  .vector-feature-page-tools-enabled .mw-body .vector-body {
    /* grid-column: 6/21; */
    grid-column: 6/-2;
  }
}

Change 900325 abandoned by Jdrewniak:

[mediawiki/skins/Vector@master] [WIP] Proof of concept refactor for new grid & design

Reason:

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

Test wiki on Patch demo by JDrewniak (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/29c6760753/w/

Change #898859 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] [WIP] Makes CSS style updates for Zebra

Reason:

Hello this is an automated message.
I am abandoning this patch as it over a year old, and is not currently in a mergeable state. This has nothing to do with the quality of the patch.

If you still care about this patch, please feel free to restore it and rebase it, and we can happily continue the conversation to help you get it merged.

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

Test wiki on Patch demo by JDrewniak (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/f1f9241ee5/w/