@ppelberg @Esanders now that the page header will be above the VE toolbar I wonder if it still makes sense to grey it out? My assumption is: with the page title below the toolbar it is greyed out to make it clear that you can't edit it. Now that it's above the toolbar, maybe that treatment is no longer needed to clarify that you can't edit it?

initial proposal	updated proposal

I like how it looks not greyed out.

In T310197#8010081, @alexhollender_WMF wrote:

@ppelberg @Esanders now the page header will be above the VE toolbar I wonder if it still makes sense to grey it out? My assumption is: with the page title below the toolbar it is greyed out to make it clear that you can't edit it. Now that it's above the toolbar, maybe that treatment is no longer needed to clarify that you can't edit it?

initial proposal	updated proposal

I like how it looks not greyed out.

+1; I support not graying out the page title, that appears above the VE toolbar.

@Jdlrobson I've looked at the occurrences of $('#content') in VisualEditor via CodeSearch and that selector is used to calculate width, top, scroll behaviour, as well positioning popups and overlays in VE, as well as in Selenium tests.

I can't find any appropriate hook or interface that would allow us to change this element in a sane way. The VE plugin interface, as well as the ve.activationStart hook, fire after VE has been loaded, so even if we did use these available methods, the VE progress-bar would still appear in the wrong spot while VE is loading.

Personally, besides creating some sort of defined API to set the VE target container, I don't really see a viable solution other than moving the Vector DOM around as in this patch: https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/804011

That will potentially break some gadgets or user styles for Vector 2022 (maybe even some analytics) but I don't really see an alternative at this point.

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

[mediawiki/extensions/VisualEditor@master] [POC] Allow skins to define VE's targetContainer via HTML data attribute

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

Hey @Esanders @matmarex @DavidL :
Right now VisualEditor uses the #content selector to work out what element it should enhance when you click edit.
To solve this we have to either

• Point VisualEditor to a different element for Vector 2022 skin. OR
• Change Vector’s DOM

We’re reluctant to do 2 as it would break various gadgets which rely on the existing DOM structure, so we feel the least risky way to do this is to do 1.

We are thinking that it would make sense to allow skins to identify the element VisualEditor enhances using a data attribute or class e.g. data-ve-content-target or ‘.ve-content-target’ instead of an ID (as IDs are hard to change without gadget disruption) (edited)

Would you see any problems with this approach? Obviously, one downside is if we use data or classes, it’s possible to have multiple elements in the skin, but we would make this to throw a JavaScript error e.g. “Only one data-ve-content-target element is allowed in the page”. (edited)

So the workflow would be 1) check for the special data attribute or class 2) Use #content if none exists.

On Slack Bartosz said he thinks this should be okay, but the more eyes the better!

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

[mediawiki/skins/Vector@master] Use the data-ve-target-container attribute to position VE

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

Poor DavidL suffers for my sins.

Change 807196 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Introduce `data-ve-target-container` as a skin-customizable VE target

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

I updated the documentation at https://www.mediawiki.org/wiki/Extension:VisualEditor/Skin_requirements.

Change 807232 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Use the data-ve-target-container attribute to position VE

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

The data attribute should use the protected data-mw prefix as that will prevent it from being generated by user content.

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

[mediawiki/extensions/VisualEditor@master] Rename `data-ve-target-container` attribute to `data-mw-ve-target-container`

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

In T310197#8022355, @Esanders wrote:

The data attribute should use the protected data-mw prefix as that will prevent it from being generated by user content.

I thought data attributes are not permitted by wikitext (and experimenting locally I can't seem to show them with default configuration)? Can you show me how those are generated? Curious to learn.

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

[mediawiki/skins/Vector@master] Rename `data-ve-target-container` attribute to `data-mw-ve-target-container`

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

In T310197#8023208, @Jdlrobson wrote:

In T310197#8022355, @Esanders wrote:

The data attribute should use the protected data-mw prefix as that will prevent it from being generated by user content.

I thought data attributes are not permitted by wikitext (and experimenting locally I can't seem to show them with default configuration)? Can you show me how those are generated? Curious to learn.

Example: https://en.wikipedia.beta.wmflabs.org/wiki/User:ESanders_(WMF)/sandbox/data-attr

Some limited documentation: https://www.mediawiki.org/wiki/Manual:Coding_conventions#HTML

Thank you!

See also: https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+blame/refs/heads/REL1_38/includes/parser/Sanitizer.php#567

Change 808002 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Rename `data-ve-target-container` attribute to `data-mw-ve-target-container`

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

Change 808004 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Rename `data-ve-target-container` attribute to `data-mw-ve-target-container`

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

Thanks, I forgot about that. (The main use case for data- attributes in wikitext, AFAIK, is sortable tables: https://en.wikipedia.org/wiki/Help:Sorting#Specifying_a_sort_key_for_a_cell, but there might be other stuff done in gadgets.)

Change 804011 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] Move #content and #bodyContent elements to accommodate VE

Reason:

Don't think this is needed any more.

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

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

[mediawiki/skins/Vector@wmf/1.39.0-wmf.17] Rename `data-ve-target-container` attribute to `data-mw-ve-target-container`

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

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

[mediawiki/extensions/VisualEditor@wmf/1.39.0-wmf.17] Rename `data-ve-target-container` attribute to `data-mw-ve-target-container`

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

as far as I can tell this is looking great. @Esanders @ppelberg @KieranMcCann are there specific things you'd like us to test? Are you interested in design reviewing this yourselves? If so you can see it here (need to be logged-in): https://en.wikipedia.beta.wmflabs.org/wiki/Water

In T310197#8025872, @alexhollender_WMF wrote:

as far as I can tell this is looking great.

+1, @alexhollender_WMF – what y'all have implemented on the beta cluster [i] looks good to me.

I'm moving this to Editing QA for @EAkinloose or @Ryasmeen to have a look verify. See Minimal Test Case below.

Minimal Test Case

1. On a desktop, visit the beta cluster
2. Visit Special:Preferences#mw-prefsection-rendering
3. Ensure the Vector (2022) skin is enabled
4. Visit an article. E.g. https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein
5. Open VE by clicking the Edit link/button that appears at the top of the page
6. Verify the Page title and page toolbar (Read: Page, Discussion, Read, Edit etc.) appear above the VE toolbar
7. Verify each of the links mentioned in "6." above are functional (read: you can click them)
8. Verify the project tagline (read: From Wikipedia) appears beneath the VE toolbar, grayed out.
9. Verify the page title (read: Albert Einstein) appears above the VE toolbar in black type, as it appears in read mode.
10. Verify that as you scroll the page, VE's toolbar remains fully functional and in view

i. https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein

I note that when the feature is disabled, the VE toolbar does not render correctly: https://en.wikipedia.beta.wmflabs.org/wiki/Polar_bear?vectortitleabovetabs=0

If that mode is no longer supported we should remove the config to avoid any confusion.

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

[mediawiki/skins/Vector@master] Attach VE to `#content` while title-above-tabs feature is disabled.

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

Change 809005 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Attach VE to `#content` while title-above-tabs feature is disabled.

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

Steps 1 - 10 checked:

In T310197#8029970, @Esanders wrote:

I note that when the feature is disabled, the VE toolbar does not render correctly: https://en.wikipedia.beta.wmflabs.org/wiki/Polar_bear?vectortitleabovetabs=0

If that mode is no longer supported we should remove the config to avoid any confusion.

@Esanders, Following the changes in https://gerrit.wikimedia.org/r/809005,

The spacing doesn't look the same for both. See:

As we were reviewing these changes, we also noticed that the font-size on the toolbar is unexpected (and also causes some buttons to look funky when hovered):

Actual	Expected

Jan's patch https://gerrit.wikimedia.org/r/c/mediawiki/extensions/VisualEditor/+/804012 resolves this.

@ovasileva It’s all good on the Editing side. No blocker us!
As Bartosz mentioned above, you will need to backport Jan’s patch to fix the font-size and funky looking buttons.

Change 804012 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Prevent skinStyles from applying to the Vector 2022 skin.

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

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

[mediawiki/extensions/VisualEditor@wmf/1.39.0-wmf.17] Prevent skinStyles from applying to the Vector 2022 skin.

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

Looks good to me:

I am removing the Verified because I am not sure if I am to verify or my comments should do. @VPuffetMichel, kindly confirm.

Change 808068 merged by jenkins-bot:

[mediawiki/skins/Vector@wmf/1.39.0-wmf.17] Rename `data-ve-target-container` attribute to `data-mw-ve-target-container`

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

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

[mediawiki/extensions/VisualEditor@wmf/1.39.0-wmf.18] Prevent skinStyles from applying to the Vector 2022 skin.

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

Your comments should do, in addition to what we discussed at stand up. Thank you @EAkinloose !

Change 808071 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@wmf/1.39.0-wmf.17] Rename `data-ve-target-container` attribute to `data-mw-ve-target-container`

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

Change 809245 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@wmf/1.39.0-wmf.17] Prevent skinStyles from applying to the Vector 2022 skin.

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

Mentioned in SAL (#wikimedia-operations) [2022-06-28T20:56:42Z] <cjming@deploy1002> Synchronized php-1.39.0-wmf.17/skins/Vector/includes/templates/skin.mustache: Backport: [[gerrit:808068|Rename data-ve-target-container attribute to data-mw-ve-target-container (T310197)]] (duration: 03m 33s)

Change 809249 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@wmf/1.39.0-wmf.18] Prevent skinStyles from applying to the Vector 2022 skin.

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

Mentioned in SAL (#wikimedia-operations) [2022-06-28T21:00:45Z] <cjming@deploy1002> Synchronized php-1.39.0-wmf.17/extensions/VisualEditor/modules: Backport: [[gerrit:808071|Rename data-ve-target-container attribute to data-mw-ve-target-container (T310197)]] (duration: 03m 33s)

Mentioned in SAL (#wikimedia-operations) [2022-06-28T21:04:35Z] <cjming@deploy1002> Synchronized php-1.39.0-wmf.17/extensions/VisualEditor: Backport: [[gerrit:809245|Prevent skinStyles from applying to the Vector 2022 skin. (T310197)]] (duration: 03m 27s)

Mentioned in SAL (#wikimedia-operations) [2022-06-28T21:12:50Z] <cjming@deploy1002> Synchronized php-1.39.0-wmf.18/extensions/VisualEditor: Backport: [[gerrit:809249|Prevent skinStyles from applying to the Vector 2022 skin. (T310197)]] (duration: 03m 33s)

Mentioned in SAL (#wikimedia-operations) [2022-06-28T21:16:41Z] <cjming@deploy1002> Synchronized php-1.39.0-wmf.18/extensions/VisualEditor: Backport: [[gerrit:809249|Prevent skinStyles from applying to the Vector 2022 skin. (T310197)]] (duration: 03m 38s)

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

1. On a desktop, visit the beta cluster
2. Visit Special:Preferences#mw-prefsection-rendering
3. Ensure the Vector (2022) skin is enabled
4. Visit an article. E.g. https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein
5. Open VE by clicking the Edit link/button that appears at the top of the page
6. ✅ AC1: Verify the Page title and page toolbar (Read: Page, Discussion, Read, Edit etc.) appear above the VE toolbar

7. ✅ AC2: Verify each of the links mentioned in "6." above are functional (read: you can click them)

8. ✅ AC3: Verify the project tagline (read: From Wikipedia) appears beneath the VE toolbar, grayed out.
   
9. ✅ AC4: Verify the page title (read: Albert Einstein) appears above the VE toolbar in black type, as it appears in read mode.

10.✅ AC5: Verify that as you scroll the page, VE's toolbar remains fully functional and in view

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

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