Page MenuHomePhabricator

Move editing toolbar below page toolbar
Open, HighPublic5 Estimated Story Points

Description

Description

With the page heading above the page toolbar (T303549), I think it would make sense to move the editing toolbar below the page toolbar. I think it might also be a good time to ask:

currentproposed
before.png (824×1 px, 196 KB)
proposed.png (822×1 px, 196 KB)

Appendix

(for our records) Does the page toolbar needs to be shown when in edit mode? Short answer: yes (see comments for various thoughts).

proposed (without page toolbar)
proposed without.png (822×1 px, 194 KB)

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. 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

QA Results - Beta

QA Results - Prod

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Thanks @matmarex. Yep deployment is tracked in T310054 and we're talking to editing team tomorrow to agree on the blockers for doing that.

...a few people on the Editing team had opinions about the design changes, and we'll probably still want to discuss them with y'all before they're deployed anywhere.

Update: the Editing Team supports the Web Team moving forward with deploying what's shown in F35219381:

  • Page title and page toolbar (Read: Page, Discussion, Read, Edit etc.) appearing above the VE toolbar.
    • Note: people ought to be able to click all page toolbar actions while VE is open.
  • Project tagline (read: From WIKI NAME) appearing beneath the VE toolbar grayed out.

If/when we come to learn that the experience above confuses/disrupts people while they are editing, we assume we can revisit the design at that point.

thanks for following up @ppelberg.

If/when we come to learn that the experience above confuses/disrupts people while they are editing, we assume we can revisit the design at that point.//

to clarify: in our discussion we wondered if people will be confused about why they can't edit the tagline. Previously both the page title and tagline were together, as a block of non-editable elements. Now the tagline is alone.

thanks for following up @ppelberg.

If/when we come to learn that the experience above confuses/disrupts people while they are editing, we assume we can revisit the design at that point.//

to clarify: in our discussion we wondered if people will be confused about why they can't edit the tagline. Previously both the page title and tagline were together, as a block of non-editable elements. Now the tagline is alone.

+1. Thank you for making the "confusion" / "disruption" I named explicit, @alexhollender_WMF.

@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 proposalupdated proposal
Group.jpg (822×1 px, 391 KB)
Group Copy.jpg (822×1 px, 392 KB)

I like how it looks not greyed out.

@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 proposalupdated proposal
Group.jpg (822×1 px, 391 KB)
Group Copy.jpg (822×1 px, 392 KB)

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

@alexhollender_WMF this should be testable shortly on the beta cluster https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein?action=edit
Please move to needs more work or sign off depending on how your testing goes.

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

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

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

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

ppelberg added subscribers: EAkinloose, Ryasmeen.

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.

alexhollender_WMF updated the task description. (Show Details)
alexhollender_WMF added a subscriber: Edtadros.

sounds good, thanks for those testing steps @ppelberg

@Edtadros note that this is also being QA'd by the editing team; since it's a big change I figured one extra set of eyes is a good thing 👀

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

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,

Screenshot 2022-06-28 at 00.25.24.png (1×2 px, 736 KB)

Screenshot 2022-06-28 at 00.25.49.png (1×2 px, 764 KB)

Screenshot 2022-06-28 at 00.33.42.png (1×2 px, 908 KB)

Screenshot 2022-06-28 at 00.35.33.png (1×2 px, 975 KB)

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

Screenshot 2022-06-28 at 00.48.42.png (1×3 px, 1 MB)

Screenshot 2022-06-28 at 00.50.03.png (1×3 px, 1 MB)

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):

ActualExpected
image.png (2×3 px, 365 KB)
image.png (2×3 px, 366 KB)

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

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

Screen Shot 2022-06-30 at 6.29.39 AM.png (395×1 px, 73 KB)

  1. ✅ AC2: Verify each of the links mentioned in "6." above are functional (read: you can click them)
Screen Recording 2022-06-30 at 6.31.30 AM.mov.gif (388×1 px, 165 KB)
Screen Recording 2022-06-30 at 6.32.15 AM.mov.gif (388×1 px, 135 KB)
Screen Recording 2022-06-30 at 6.32.42 AM.mov.gif (388×1 px, 181 KB)
Screen Recording 2022-06-30 at 6.33.33 AM.mov.gif (388×1 px, 131 KB)
  1. ✅ AC3: Verify the project tagline (read: From Wikipedia) appears beneath the VE toolbar, grayed out.
    Screen Shot 2022-06-30 at 6.46.43 AM.png (184×276 px, 13 KB)
  2. ✅ AC4: Verify the page title (read: Albert Einstein) appears above the VE toolbar in black type, as it appears in read mode.
Screen Shot 2022-06-30 at 6.47.59 AM.png (275×736 px, 68 KB)
Screen Shot 2022-06-30 at 6.48.30 AM.png (260×707 px, 47 KB)

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

Screen Recording 2022-06-30 at 6.49.57 AM.mov.gif (428×1 px, 1 MB)

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
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

Screen Shot 2022-07-02 at 8.08.11 PM.png (429×1 px, 102 KB)

  1. ✅ AC2: Verify each of the links mentioned in "6." above are functional (read: you can click them)
Screen Recording 2022-07-02 at 8.09.15 PM.mov.gif (428×1 px, 206 KB)
Screen Recording 2022-07-02 at 8.09.33 PM.mov.gif (428×1 px, 208 KB)
Screen Recording 2022-07-02 at 8.10.17 PM.mov.gif (428×1 px, 229 KB)
Screen Recording 2022-07-02 at 8.11.36 PM.mov.gif (428×1 px, 179 KB)
Screen Recording 2022-07-02 at 8.12.01 PM.mov.gif (428×1 px, 163 KB)
  1. ✅ AC3: Verify the project tagline (read: From Wikipedia) appears beneath the VE toolbar, grayed out.
    Screen Shot 2022-07-02 at 8.20.25 PM.png (233×371 px, 16 KB)
  2. ✅ AC4: Verify the page title (read: Albert Einstein) appears above the VE toolbar in black type, as it appears in read mode.
Screen Shot 2022-07-02 at 8.21.26 PM.png (301×443 px, 50 KB)
Screen Shot 2022-07-02 at 8.20.05 PM.png (329×405 px, 42 KB)

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

Screen Recording 2022-07-02 at 8.22.48 PM.mov.gif (428×1 px, 2 MB)