@RHo is going to add designs on here.

@RHo -- in a conversation with @Dyolf77_WMF and @Urbanecm, we were looking at the early designs for this change, and they like the new design, but they also recommended that we consider reducing the button to just a question mark, instead of the full "Get help with editing" call-to-action. They say it's because the button is very long in some languages. Having just the question mark is what we do on mobile. Here it is in French:

What do you think?

In T244431#6249231, @Tgr wrote:

In T244431#6217795, @MMiller_WMF wrote:

Also, closing the help panel logs a CTA impression now. We probably don't want that.

I agree that we don't want that. Should we file a task for it? Could you file it please?

Since T255255: Newcomer tasks: Enable easier toggling to open and close Desktop help panel is happening soon, this will probably take care of itself (the extra impression is only happening because we are removing / readding the CTA button now).

@Etonkovidova -- let's make sure this is taken care of with this task.

Change 608509 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Make the CTA button a toggle

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

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

The attached patch implements 1-3, but not 4 (the animation part), because there's not enough information in the task about what the animation would be (and there are no links to mocks or specs or anything that would tell me).

The patch does the following:

• Move the help panel up, to above the button
• Remove the text from the button, and make the button a circle with a diameter of 42px (3em)
• While the help panel is open, no longer hide the button. Instead, change its icon from ? to ^ and make clicking it close the help panel
• Increase the font size of the button (from 12.25px to 14px). It was set to 0.875em twice and that compounded, which was likely a mistake (16 * 0.875 * 0.875 = 12.25; 16 * 0.875 = 14)

The slide up animation for the help panel is unchanged, except that it now travels a greater distance (from the bottom of the viewport to a higher position than before). There is currently no animation while closing the help panel.

In T255255#6266336, @gerritbot wrote:

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

This patch undoes part of T244546#6087058, see T244546#6266354 for an explanation. It fixes an existing issue that would otherwise be made worse by this task.

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

In T255255#6266355, @Catrope wrote:

The attached patch implements 1-3, but not 4 (the animation part), because there's not enough information in the task about what the animation would be (and there are no links to mocks or specs or anything that would tell me).

[...]

There is currently no animation while closing the help panel.

Sorry @Catrope - let me add the animation for *both* opening and closing the panel shortly.

hi @Catrope - I've just added the animation details in the task description. Happy to separate out into a different subtask if you prefer.

Change 609245 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Transitions for the CTA button

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

The attached patch implements the animations mostly the way you asked for, but slightly differently. There's an asymmetry in the spec, saying the icons rotate from +/-90 to 0 when fading in, but from 0 to +/-45 when fading out. It was much easier to implement this with CSS transitions rather than animations, but transitions have to be symmetrical, so what I've implemented for now is a symmetrical version where the icons also rotate 90 degrees when fading out.

I used a transition duration of 400ms, because that's what the duration of the existing transition on opening the help panel was, and I thought the durations of these two transitions should match. We can easily change this though (I've pulled the 400ms number out into a variable, so we can update it in one place to change the duration of both transitions in lockstep).

The underlying CSS is here (starting at line 29), in simplified form it's basically:

.mw-ge-help-panel-cta a.oo-ui-buttonElement-button .oo-ui-iconElement-icon {
    transition: transform 400ms, opacity 400ms;
    /* Implicitly: transform: rotate( 0 ); opacity: 1; */
}

.mw-ge-help-panel-cta a.oo-ui-buttonElement-button .oo-ui-indicatorElement-indicator {
    transition: transform 400ms, opacity 400ms;
    transform: rotate( 90deg );
    opacity: 0;
}

.mw-ge-help-panel-opened.mw-ge-help-panel-cta a.oo-ui-buttonElement-button .oo-ui-iconElement-icon {
    transform: rotate( -90deg );
    opacity: 0;
}

.mw-ge-help-panel-opened.mw-ge-help-panel-cta a.oo-ui-buttonElement-button .oo-ui-indicatorElement-indicator {
    transform: rotate( 0 );
    opacity: 1;
}

(the "icon" is the ?, the "indicator" is the ^; fun fact: my life was made a lot easier by the fact that ^ is one of only four indicators listed at the bottom of this page)

In T255255#6275880, @Catrope wrote:

The attached patch implements the animations mostly the way you asked for, but slightly differently. There's an asymmetry in the spec, saying the icons rotate from +/-90 to 0 when fading in, but from 0 to +/-45 when fading out. It was much easier to implement this with CSS transitions rather than animations, but transitions have to be symmetrical, so what I've implemented for now is a symmetrical version where the icons also rotate 90 degrees when fading out.

I used a transition duration of 400ms, because that's what the duration of the existing transition on opening the help panel was, and I thought the durations of these two transitions should match. We can easily change this though (I've pulled the 400ms number out into a variable, so we can update it in one place to change the duration of both transitions in lockstep).

Thanks @Catrope for adding the animations, it looks great in the above GIF! Sounds good regarding being able to update the transition duration, think 400ms seems right but would want to assess in situ.

I've +2'ed the patches here, but moving into needs more work to address this observation:

I do see an odd issue with the help panel CTA button resizing on the initial click, though, which I've tried to capture in this file: It happens after clicking on a suggested edit from the homepage.

Change 608509 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Make the CTA button a toggle

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

Change 609245 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Transitions for the CTA button

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

If you visit an article via the suggested edit card on the homepage, and then reload the page, the help panel icon will disappear (the panel itself won't).

In T255255#6326934, @Tgr wrote:

If you visit an article via the suggested edit card on the homepage, and then reload the page, the help panel icon will disappear (the panel itself won't).

Note for future testing oo-ui-iconElement-icon oo-ui-icon-help oo-ui-image-invert is not displayed after reloading a page with open guidance panel.

@Catrope will address this issue of the button disappearing this week.

Change 623469 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Don't reattach the CTA unnecessarily

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

In T255255#6292950, @kostajh wrote:

I've +2'ed the patches here, but moving into needs more work to address this observation:

I do see an odd issue with the help panel CTA button resizing on the initial click, though, which I've tried to capture in this file: It happens after clicking on a suggested edit from the homepage.

I'm having trouble reproducing this locally although I still see it in production (cswiki). I'm not sure if this patch will help but it's possible.

If you visit an article via the suggested edit card on the homepage, and then reload the page, the help panel icon will disappear (the panel itself won't).

Is this still occurring? I don't see this problem.

There's a new problem introduced by the not-yet-merged patch, which is captured in this video. If you switch from edit source to edit, the button animates and then vanishes.

I've rewritten the patch to address the reanimation+vanishing problem

Change 623665 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Also attach CTA button when opening help panel

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

In T255255#6425947, @kostajh wrote:

If you visit an article via the suggested edit card on the homepage, and then reload the page, the help panel icon will disappear (the panel itself won't).

Is this still occurring? I don't see this problem.

I was able to reproduce this. The new patch I just uploaded fixes it.

Change 623469 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Reattach CTA button to overlay on startup

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

Change 623665 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Guidance: Also attach CTA button when opening help panel

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

Checked on betalabs - works according to the specs.
The animated gif shows opening SE article, the Help panel opening/closing (in real life the animation is much smoother than in the gif).

The (1) is fixed.
The (2) is still present when switching from 'Edit' to 'Edit source' or from 'Edit source' to 'Read'. It looks reasonably smooth though. Click on the gif below:

Note: Interesting that on mobile since the help panel in overlay, the icon

This looks great, thanks all for working on it! Moving to PM review with some responses to @Etonkovidova's comments below.

In T255255#6431640, @Etonkovidova wrote:

Checked on betalabs - works according to the specs.
The animated gif shows opening SE article, the Help panel opening/closing (in real life the animation is much smoother than in the gif).

Checked as well and agree it looks smooth IRL

Checked both issues (mentioned by @Tgr and @kostajh
(1) If you visit an article via the suggested edit card on the homepage, and then reload the page, the help panel icon will disappear (the panel itself won't).
(2) If you switch from edit source to edit, the button animates and then vanishes
The (1) is fixed.
The (2) is still present when switching from 'Edit' to 'Edit source' or from 'Edit source' to 'Read'. It looks reasonably smooth though. Click on the gif below:

I agree it's a little strange the panel disappears and re-opens when going from Edit to Edit source (the other way around had no issues for me though), but as long as the panel is there I think this is OK.

Note: Interesting that on mobile since the help panel in overlay, the icon

- will not be present separately - it's only visible in transition the the question mark icon (and back). @RHo - should we keep the behavior on mobile? I've attached the gif to illustrate it:

Thanks for catching this, but I don't mind it.