Page MenuHomePhabricator

Newcomer tasks: guidance root screen
Closed, ResolvedPublic

Description

Once the user is in edit mode, the help panel will display the "root screen". This term refers to the fact that the screen consists of buttons that let the user navigate to the main functions of the panel, and to which the user returns after backing out of those functions.

The specifications here follow along with the corresponding prototypes. Where they differ, the written specifications take precedent:

NOTE: For redlined design specs see the Growth Zeplin board for the relevant screens tagged "Guidance v1.2"

Header

The root screen should have the same header as the help panel has by default, "Get help with editing".

Buttons

The screen should have three big rectangular buttons (more may be added in the future). The first button, for "Suggested edit" should have higher affordance with an outline.

  • Suggested edit
    • This button should contain a lightbulb icon with the text "Suggested edit" next to it.
    • Below that, the header should say the task type, e.g. "Copy edit" or "Find references".
    • Below that should say "Quick start tips".
    • It should contain the suggested edit graphic (pencil/ruler/lightbulb).
    • This button should lead to the "suggested edit screen" (see T244541: Newcomer tasks: suggested edit screen in guidance).
      • On mobile, in place of an "X" in the upper left, this screen should have a back arrow that leads back to the root screen via a swipe animation. There should be no "Back" or "Cancel" button.
      • On desktop, it should have the "X" in the upper left and the "Back" button in the lower left.
  • Ask for help
    • Although the prototypes show what this would look like if we switched from directing questions to the help desk, and instead directed them to mentors, for this version of guidance, we should direct questions to the help desk.
    • This button should contain a header that says, "Ask the help desk".
    • Below that should say, "Get answers from other volunteers".
    • The icon should be the smiling word bubble icon that is in the mentorship module:
      image.png (83×94 px, 1 KB)
    • This button should lead to the submission screen of the question-asking workflow:
      image.png (439×308 px, 29 KB)
    • On mobile, in place of an "X" in the upper left, this screen should have a back arrow that leads back to the root screen via a swipe animation. Even though it has the back arrow, it should still have the "Back" button in the lower left.
    • On desktop, it should have the "X" in the upper left and the "Back" button.
  • General editing help
    • This button should say contain a header that says, "General editing help".
    • Below that should say, "Search for answers and read top articles".
    • The icon should be a big question mark, like this:
      image.png (70×70 px, 958 B)
    • This button should lead to a screen that is just the top part of the help panel, excluding the "ask a question" part:
      image.png (324×307 px, 19 KB)
    • On mobile, in place of an "X" in the upper left, this screen should have a back arrow that leads back to the root screen via a swipe animation. There should be no "Back" or "Cancel" button.
    • On desktop, it should have the "X" in the upper left and the "Back" button in the lower left.

Instrumentation

Below are the portions of our instrumentation plan that relate to this component. See T246919: Newcomer tasks: guidance instrumentation for the full plan.

  • impression: we want to record whether the user saw the help panel in edit mode.
  • root screen button click: the new design of the “root screen” will contain several buttons. We want to record an event indicating which one the user clicks.
  • Once the user has clicked one of the buttons, normal help panel logging ensues.

Event Timeline

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

For Design review after the recent fixes:

Help Panel: Fix panel title for ask-help

https://gerrit.wikimedia.org/r/582794
Help panel: On mobile, use 'previous' icon for non-home panels

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

Screen Shot 2020-03-23 at 12.08.35 PM.png (542×427 px, 46 KB)

Thanks @Etonkovidova - I'm going to add the 'sub-screens' from the root screen you've posted for review on the task T248065 instead if that's OK?
That way this task will only need to address the design review items for the root screen. which are as follows:

1. Suggested edit tile/button
See details on T248001#6000518

2. Ask question and General help tile/buttons

  • 2a. Header text font-size is expected to be on Desktop 16px and Mobile 18.2px (using the OOUI fieldset header text style). Actual on Desktop is ~18.298px, Mobile ~20.912px.
  • 2b. Description text font-size is expected to be on Desktop 12.4px and Mobile 13px (can use the Wikipiedia text style for thumbcaption). Actual on Desktop is ~12.992px, Mobile ~14.848px.
  • 2c. There should be 16px padding between the text and the icon (40px wide). This may be achieved by setting the text width to be width:calc(100% - 56px);
  • 2d. Icons should be absolutely positioned relative to the bottom right corner of the ‘tile’ button. Specifically:
.tile-button { position:relative;}
and
.tile-icon {
position:absolute;
bottom:24px;
right:16px;
}
  • 2e. There should be a border: solid 1px #C8CCD1 (Base.

3. Root screen dialog header should be veritically centered in the header bar (it currently is closer to the top on Desktop and Mobile).

4. Dialog drop shadow expected is at a higher elevation.
Specifically the style is box-shadow: 0 24px 24px 0 rgba(0, 0, 0, 0.3), 0 0 24px 0 rgba(0, 0, 0, 0.22);

5. Expected a minimum width on Desktop of 360px (actual 300px)

...

Help panel: Add some padding between button title and subheader
https://gerrit.wikimedia.org/r/582795

Screen Shot 2020-03-23 at 12.07.51 PM.png (542×426 px, 36 KB)

This looks OK to me, but thanks for noting it.

2c. There should be 16px padding between the text and the icon (40px wide). This may be achieved by setting the text width to be width:calc(100% - 56px);

I don't understand this one in the context of the general help and ask help buttons, could you please clarify? I currently see a good deal more padding between the text and the ask help / general help icons.

2d. Icons should be absolutely positioned relative to the bottom right corner of the ‘tile’ button. Specifically:

I'm using flex box, so I went with align: end, which I think has about the same effect, but please let me know what you think.

  1. Root screen dialog header should be veritically centered in the header bar (it currently is closer to the top on Desktop and Mobile).

This happened because we modified the default font size in the dialog title, I'll increase the line height to account for that.

  1. Expected a minimum width on Desktop of 360px (actual 300px)

We're limited in what we can do with a process dialog without incurring more technical debt (@Catrope / @Tgr correct me if this is wrong). A process dialog expects a declared size of small (300px), medium (500px), large etc. We are defaulting to small because we don't set anything else. Should I change it to medium? If we try to adjust to something in between I think we'll end up fighting more with OOUI and incurring more technical debt, so I'd prefer to avoid that if possible.

Change 584547 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] (wip) Help panel: Design review fixes

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

2a. Header text font-size is expected to be on Desktop 16px and Mobile 18.2px (using the OOUI fieldset header text style). Actual on Desktop is ~18.298px, Mobile ~20.912px.
2b. Description text font-size is expected to be on Desktop 12.4px and Mobile 13px (can use the Wikipiedia text style for thumbcaption). Actual on Desktop is ~12.992px, Mobile ~14.848px.

Sorry, this happened because I was looking at the mobile screen while building this out.

That said, is it possible that we could use a single em size for desktop and mobile? The patch above gets pretty close: header is 16px on desktop and 18.2833px on mobile (instead of 18.2px), and for description text it's 12.4px on desktop and 14.1833px on mobile. So far we have avoided implementing desktop / mobile specific CSS overrides for the help panel (as far as I can tell) and it would be really nice to not add them, because it adds a lot to the cognitive and maintenance burden when managing the CSS rules. That said please let me know if you prefer it to be overridden for mobile and I'll implement it.

From the patch:

The header positioning doesn't quite match the Zeplin dimensions:

  • In Zeplin the header height is 48 px, the actual height is 40px.
  • In Zeplin the title is 14px from the header top and 10px from the header bottom, here it is vertically centered.

(header being the "Get help with editing" text)

As Kosta points out there, these are OOUI defaults so for maintainability and consistency with the rest of MediaWiki it would be preferable to keep them if they don't interfere with the design too much.

Change 584547 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Design review fixes

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

2c. There should be 16px padding between the text and the icon (40px wide). This may be achieved by setting the text width to be width:calc(100% - 56px);

I don't understand this one in the context of the general help and ask help buttons, could you please clarify? I currently see a good deal more padding between the text and the ask help / general help icons.

I mean there should be 16px padding between the RHS edge of the text block area and the icons on those buttons:

image.png (360×1 px, 85 KB)

My suggestion is that we could set the width of the text area to be the whatever the width of the tile button is minus the width of the icon (40px) and that 16px padding using by applying width:calc(100% - 56px);, but happy to go with another way that achieves the same result.

2d. Icons should be absolutely positioned relative to the bottom right corner of the ‘tile’ button. Specifically:

I'm using flex box, so I went with align: end, which I think has about the same effect, but please let me know what you think.

OK, I will take a look.

  1. Root screen dialog header should be vertically centered in the header bar (it currently is closer to the top on Desktop and Mobile).

This happened because we modified the default font size in the dialog title, I'll increase the line height to account for that.

sgtm

  1. Expected a minimum width on Desktop of 360px (actual 300px)

We're limited in what we can do with a process dialog without incurring more technical debt (@Catrope / @Tgr correct me if this is wrong). A process dialog expects a declared size of small (300px), medium (500px), large etc. We are defaulting to small because we don't set anything else. Should I change it to medium? If we try to adjust to something in between I think we'll end up fighting more with OOUI and incurring more technical debt, so I'd prefer to avoid that if possible.

Oh I didn't realize/had forgotten this was how the width was being set. I agree it is sensible to keep as is for now, but as we continue to add features and make changes to this help/guidance panel, would it be worthwhile to discuss how we are able to implement visual and interaction changes without incurring technical debt (e.g., proposing creating a new component instead of adapting existing ones)?

2a. Header text font-size is expected to be on Desktop 16px and Mobile 18.2px (using the OOUI fieldset header text style). Actual on Desktop is ~18.298px, Mobile ~20.912px.
2b. Description text font-size is expected to be on Desktop 12.4px and Mobile 13px (can use the Wikipiedia text style for thumbcaption). Actual on Desktop is ~12.992px, Mobile ~14.848px.

Sorry, this happened because I was looking at the mobile screen while building this out.
That said, is it possible that we could use a single em size for desktop and mobile? The patch above gets pretty close: header is 16px on desktop and 18.2833px on mobile (instead of 18.2px), and for description text it's 12.4px on desktop and 14.1833px on mobile. So far we have avoided implementing desktop / mobile specific CSS overrides for the help panel (as far as I can tell) and it would be really nice to not add them, because it adds a lot to the cognitive and maintenance burden when managing the CSS rules. That said please let me know if you prefer it to be overridden for mobile and I'll implement it.

Apologies as I just realized this has not been clear in the Zeplin, but I have been using OOUI and Wikipedia Vector/Minerva text style classes for text in order to avoid mobile specific overrides. So for example the header text is using the OOUI Fieldset header text style which is 16px on Desktop and ~18.2857px on Mobile:

OOUI Fieldset text header Desktop
image.png (320×688 px, 42 KB)
vs Mobile
image.png (508×712 px, 62 KB)

I would prefer to have Mobile and Desktop text styles as per the designs. I can create a design-debt task to review where we have created new text styles for growth with mobile overrides and revert them back to existing stylesfrom OOUI If it helps to reduce maintenance in future.
BTW I have since made the text styles inspect-able in Zeplin so that you can see the source of the styles more easily:

image.png (458×1 px, 120 KB)

From the patch:

The header positioning doesn't quite match the Zeplin dimensions:

  • In Zeplin the header height is 48 px, the actual height is 40px.
  • In Zeplin the title is 14px from the header top and 10px from the header bottom, here it is vertically centered.

(header being the "Get help with editing" text)

As Kosta points out there, these are OOUI defaults so for maintainability and consistency with the rest of MediaWiki it would be preferable to keep them if they don't interfere with the design too much.

Fair, I didn't mention this because I assumed I had the right style in Zeplin, but will have updated the mocks to reflect the default OOUI style.

Posting here so that we can resolve T248001. Note there are 4 sub-items left to do related to the Suggested edits button - 1a, 1b, 1c, 1h

1a. Task type header font-size is expected to be on Desktop 16px and Mobile 18.2px (using the OOUI fieldset header text style). Actual on Desktop is ~18.298px, Mobile ~20.912px.
1b. Description text font-size is expected to be on Desktop 12.4px and Mobile 13px (using the Wikipiedia text style for thumbcaption). Actual on Desktop is ~12.992px, Mobile ~14.848px.

1a & 1b can be reviewed on T244546#6009478.

1c. There should be 16px padding between the text and the SE illustration (64px wide). This may be achieved by setting the text width to be width:calc(100% - 80px);

1c can also be reviewed on T244546#6009445. But note the text is still butting up to the icon:

image.png (164×282 px, 15 KB)

1h. Lightbulb icon and “Suggested edit” text should be vertically center-aligned

The text is still not vertically centered with the icon on Desktop

image.png (184×422 px, 13 KB)

I think this may be due to the line-height being >1 on .mw-ge-help-panel-home-button-preheader-text
Relatedly, I have left a comment that .mw-ge-help-panel-home-button-preheader also should have padding-bottom reduced to 8px on the patch.

Apologies as I just realized this has not been clear in the Zeplin, but I have been using OOUI and Wikipedia Vector/Minerva text style classes for text in order to avoid mobile specific overrides. So for example the header text is using the OOUI Fieldset header text style which is 16px on Desktop and ~18.2857px on Mobile:

OK. I can copy the rule over (font-size: 16 / 16 / 0.875 / 1em;) which results in the 16px on desktop and 18.283 on mobile; or I could redo the button to actually use a fieldset (and then the existing header div becomes the fieldset legend). That's less hacky in a way but it's not really fieldset, and it would break on the addition of the header above the fieldset for the suggested edit button, so I think I'll go with copying the style over for now.

2b. Description text font-size is expected to be on Desktop 12.4px and Mobile 13px (can use the Wikipiedia text style for thumbcaption). Actual on Desktop is ~12.992px, Mobile ~14.848px.`

@RHo can you please clarify where "Wikipedia text style for thumbcaption" is coming from? I see various sizes of 13.1667px or 12.3px on Wikipedia, not 12.4px (on Desktop).

Change 585520 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Design fixes

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

2b. Description text font-size is expected to be on Desktop 12.4px and Mobile 13px (can use the Wikipiedia text style for thumbcaption). Actual on Desktop is ~12.992px, Mobile ~14.848px.`

@RHo can you please clarify where "Wikipedia text style for thumbcaption" is coming from? I see various sizes of 13.1667px or 12.3px on Wikipedia, not 12.4px (on Desktop).

Hi @kostajh - it's from 12.3704px (font-size:94%) from Vector:

image.png (866×2 px, 525 KB)

@RHo OK, so I don't think we can reuse those styles from Vector and Minerva (as they are applied specifically to the thumbcaption class); we can do font-size: 88.6% which results in 12.4px on Vector and 14.183px on Minerva (easiest), or I can add a mobile override .

Change 585520 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Design fixes

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

As far as I can tell the only part of this task that remains is the "Suggested edit" button, which will be done as part of T244541: Newcomer tasks: suggested edit screen in guidance

On mobile, in place of an "X" in the upper left, this screen should have a back arrow that leads back to the root screen via a swipe animation. There should be no "Back" or "Cancel" button.

@Etonkovidova this is done.

As far as I can tell the only part of this task that remains is the "Suggested edit" button, which will be done as part of T244541: Newcomer tasks: suggested edit screen in guidance

@Catrope the button is already done, it shows up if you click on a suggested edits task and the feature flag to enable guidance ($wgGENewcomerTasksGuidanceEnabled) is on. The screen it leads to is being worked on in T244541.

Change 587246 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] (wip) Suggested edits panel

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

On mobile, in place of an "X" in the upper left, this screen should have a back arrow that leads back to the root screen via a swipe animation. There should be no "Back" or "Cancel" button.

@Etonkovidova this is done.

Checked - it's done.

Checked the instrumentation and updated the task with green check marks. Below are some notes (not issues).
(1)

  • impression: we want to record whether the user saw the help panel in edit mode.

The impression action is recorded with editor_interface indicating the context for impression:

"editor_interface": "reading"
"editor_interface": "reading"
"editor_interface": "visualeditor"

(2)

  • root screen button click: the new design of the “root screen” will contain several buttons. We want to record an event indicating which one the user clicks.

Click on any of the new buttons will be recorded in "action_data"

"action_data": "suggested-edits"
"action_data": "ask-help"
"action_data": "general-help"

the page https://meta.wikimedia.org/wiki/Schema:HelpPanel is not updated for those new action_data types.

(3)

  • Once the user has clicked one of the buttons, normal help panel logging ensues.

Seems to be as expected.

@kostajh - moving it to Needs more work since the latest patch is not merged.

Change 587246 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Initial work on suggested edits panel

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

@RHo - there are some differences between the mockup and the implementation:

  • the position of the icon
  • the fonts (colors, weights, and positioning) for the label "5-10 minutes" and for the the label "Easy" - please confirm that they are fine.
mockupbetalabs
Screen Shot 2020-04-17 at 2.18.43 PM.png (537×367 px, 44 KB)
Screen Shot 2020-04-17 at 2.35.27 PM.png (527×500 px, 22 KB)
Screen Shot 2020-04-17 at 2.32.03 PM.png (532×362 px, 46 KB)
Screen Shot 2020-04-17 at 2.32.32 PM.png (523×510 px, 30 KB)

Hi @Etonkovidova, since the items you mention (T244546#6067130) are related to the suggested edits screen, I will keep in mind once that task is ready to review.

And thanks @kostajh for the changes from T244546#6003864. Good with the alternate fix to font-sizes you've made (mentioned in T244546#6026416), but the fix to item (4) still doesn't look quite right.

[...]
4. Dialog drop shadow expected is at a higher elevation.
Specifically the style is box-shadow: 0 24px 24px 0 rgba(0, 0, 0, 0.3), 0 0 24px 0 rgba(0, 0, 0, 0.22);

It looks like the above proposed box-shadow has been applied on .mw-ge-help-panel-widget-overlay, which is competing with some style attributes on .mw-ge-help-panel-popup .oo-ui-dialog:

  • box-shadow: 0 24px 24px 0 rgba(0,0,0,0.3), 0 0 24px 0 rgba(0,0,0,0.22); - this is causing a double drop-shadow with the one on .mw-ge-help-panel-widget-overlay - propose removing it.
  • background-color:#FFFFFF; - propose moving this to class `.mw-ge-help-panel-widget-overlay
  • border-radius: 2px; - propose moving this to class .mw-ge-help-panel-widget-overlay

Change 592968 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Adjust border radius, box shadow and background styles

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

Change 592968 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Adjust border radius, box shadow and background styles

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

I checked the following

  • box-shadow: 0 24px 24px 0 rgba(0,0,0,0.3), 0 0 24px 0 rgba(0,0,0,0.22); - this is causing a double drop-shadow with the one on .mw-ge-help-panel-widget-overlay - propose removing it.
  • background-color:#FFFFFF; - propose moving this to class `.mw-ge-help-panel-widget-overlay
  • border-radius: 2px; - propose moving this to class .mw-ge-help-panel-widget-overlay
All of the above seem to be in place. 
mw-ge-help-panel-widget-overlay {
    position: fixed;
    right: 1em;
    bottom: 1em;
    z-index: 2;
    background-color: #ffffff;
    border-radius: 2px;

@RHo - there are two things that I noticed when reviewing the mockups and the implementation:
(1) the horizontal line is missing in desktop (the mobile does not have it in the mockup)

mockup desktopbetalabs desktop
Screen Shot 2020-05-04 at 5.49.55 PM.png (549×372 px, 67 KB)
Screen Shot 2020-05-04 at 5.50.13 PM.png (523×502 px, 40 KB)

(2) According to the desktop mockup, "Suggested edits" has a border
border-top-color: rgb(200, 204, 209);. But the mobile mockup does not have it.

I checked the following

  • box-shadow: 0 24px 24px 0 rgba(0,0,0,0.3), 0 0 24px 0 rgba(0,0,0,0.22); - this is causing a double drop-shadow with the one on .mw-ge-help-panel-widget-overlay - propose removing it.
  • background-color:#FFFFFF; - propose moving this to class `.mw-ge-help-panel-widget-overlay
  • border-radius: 2px; - propose moving this to class .mw-ge-help-panel-widget-overlay

All of the above seem to be in place.
mw-ge-help-panel-widget-overlay {

position: fixed;
right: 1em;
bottom: 1em;
z-index: 2;
background-color: #ffffff;
border-radius: 2px;

Ahhh sorry @kostajh but it looks like the border-radius: 2px; also needs to be on .mw-ge-help-panel-popup .oo-ui-dialog in order for the desktop dialog to show with rounded corners (I can comment on the patch). Can this be re-added to the class and then the rest of this task is perfect.

@RHo - there are two things that I noticed when reviewing the mockups and the implementation:
(1) the horizontal line is missing in desktop (the mobile does not have it in the mockup)

mockup desktopbetalabs desktop
Screen Shot 2020-05-04 at 5.49.55 PM.png (549×372 px, 67 KB)
Screen Shot 2020-05-04 at 5.50.13 PM.png (523×502 px, 40 KB)

(2) According to the desktop mockup, "Suggested edits" has a border
border-top-color: rgb(200, 204, 209);. But the mobile mockup does not have it.

Thanks @Etonkovidova - the mockup reference that is up to date is the one on Zeplin where both the mobile and desktop have the border under the header as what I can see in Betalabs so that is all good thanks

CS Betalabs Desktop
image.png (1×674 px, 79 KB)
CS Betalabs Mobile
image.png (1×768 px, 83 KB)
Done pending re-adding border-radius: 2px to the dialogDone

Change 597118 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Add back border-radius to help panel OOUI dialog

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

Change 597118 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Add back border-radius to help panel OOUI dialog

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

For the final Design review -

Change 597118 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Add back border-radius to help panel OOUI dialog

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

Screen Shot 2020-05-22 at 4.20.09 PM.png (695×801 px, 74 KB)

Screen Shot 2020-05-22 at 4.12.14 PM.png (842×1 px, 266 KB)

The last tweak looks good, but I noticed something minor that I missed earlier, which is that the empty panel footer has an outline style applied which is causing it to show an extra 1px line at the bottom of the panel:

image.png (1×2 px, 681 KB)

Can we remove this by adding something like the following into the css?

.mw-ge-help-panel-processdialog .oo-ui-window-foot {
  outline: none;
}

Change 599800 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Unset footer outline

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

Change 599800 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Unset footer outline

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

To illustrate the above patch change:

before (without outline: unset)with outline: unset
Screen Shot 2020-06-10 at 4.06.39 PM.png (1×914 px, 235 KB)
Screen Shot 2020-06-10 at 4.05.45 PM.png (982×911 px, 211 KB)

This looks good to me in production, on both desktop and mobile.

Change 608510 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Move white background back down to the dialog

https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/ /608510

  • background-color:#FFFFFF; - propose moving this to class `.mw-ge-help-panel-widget-overlay

I'm proposing to undo this change in https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/+/608510 , because of its effects on the animation. The oo-ui-dialog is what slides up, while the mw-ge-help-panel-widget-overlay remains in place. Setting the white background on the overlay creates an effect where a white rectangle appears immediately in the position that the help panel will animate into, and the panel then slides up into that position. While the help panel is still sliding up, the bottom-most bit of it has a gray background (because the dialog is transparent and the gray background of the page is showing behind it). Setting the white background on the dialog instead fixes this issue.

This had been broken since April 30th, but became more pronounced while I was working on T255255: Newcomer tasks: Enable easier toggling to open and close Desktop help panel, which makes the help panel animate across a greater distance.

Change 608510 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Move white background back down to the dialog

https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/ /608510