Skip to content

fix(playground): overlay run button for shared playground#712

Open
OnkarRuikar wants to merge 7 commits intomdn:mainfrom
OnkarRuikar:pg_overlay_btn
Open

fix(playground): overlay run button for shared playground#712
OnkarRuikar wants to merge 7 commits intomdn:mainfrom
OnkarRuikar:pg_overlay_btn

Conversation

@OnkarRuikar
Copy link
Copy Markdown
Contributor

@OnkarRuikar OnkarRuikar commented Sep 5, 2025 •
edited
Loading

Description

Need a prominent Run button on canvas for shared playgrounds because the shared code could be untrustworthy.

Motivation

In the current state it is not apparent that users are supposed to click run button to get the output and begin autorun for the shared playgrounds.
It was requested to have big button spanning the entire canvas.

@OnkarRuikar that's ok, but given how unusual it is to look at a playground and not see the result, I feel this will be the likely first interaction on the page, so it need to be big and cover the canvas, and be easy to resolve.

Additional details

For testing used this link: http://localhost:3000/en-US/play?id=rCfusnHbQaseoVnpt5%2BOn3b12l6jKOf8oDyb9smSb5ueTnvaFpg87%2FSZ4fWjiysCSJBwRrmdXiMXJnTQ

or

https://fred-pr712.review.mdn.allizom.net/en-US/play?id=rCfusnHbQaseoVnpt5%2BOn3b12l6jKOf8oDyb9smSb5ueTnvaFpg87%2FSZ4fWjiysCSJBwRrmdXiMXJnTQ

UI changes

before change

before

After changes

with warning

Related issues and pull requests

#665

@OnkarRuikar OnkarRuikar requested a review from a team as a code owner September 5, 2025 11:43
LeoMcA
LeoMcA reviewed Sep 11, 2025
View reviewed changes
Copy link
Copy Markdown
Member

@LeoMcA LeoMcA left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the implementation, I think the design could be a little better - could we use the same icon we use in the top nav next to the playground link, obviously a little bigger, so it's almost like a video play icon overlay?

@OnkarRuikar
Copy link
Copy Markdown
Contributor Author

OnkarRuikar commented Sep 15, 2025

could we use the same icon we use in the top nav next to the playground link,

Done. Used the circle-play icon.

obviously a little bigger,

Made the size bigger and responsive.

so it's almost like a video play icon overlay?

We play videos and run code so shouldn't it be called "MDN Runground"? 🤔
To not give false impression of existence video content in the output, can we use " ▶ Run" instead of just the icon?

playRun.mp4

@OnkarRuikar OnkarRuikar requested a review from LeoMcA September 15, 2025 06:55
@LeoMcA
Copy link
Copy Markdown
Member

LeoMcA commented Sep 15, 2025

Let me... "Run" this past our content team and see what they think

@LeoMcA LeoMcA added the needs content decision This issue needs a decision from the MDN Content Team before it can proceed. label Sep 15, 2025
@caugner
Copy link
Copy Markdown
Contributor

caugner commented Sep 15, 2025

I could imagine making the button smaller, and adding some sort of warning below, so that the user understands the risks of pressing run.

@OnkarRuikar
Copy link
Copy Markdown
Contributor Author

OnkarRuikar commented Sep 16, 2025 •
edited
Loading

I could imagine making the button smaller, and adding some sort of warning below, so that the user understands the risks of pressing run.

"Risk of pressing run", we don't want to scare users so much that they won't even run the code. We already have report banner at the top, how about we reword it like the following?

5

@caugner caugner requested a review from a team as a code owner January 30, 2026 08:16
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Jan 30, 2026 •
edited
Loading

75394a8 was deployed to: https://fred-pr712.review.mdn.allizom.net/

@caugner caugner removed the needs content decision This issue needs a decision from the MDN Content Team before it can proceed. label Mar 13, 2026
@caugner
Copy link
Copy Markdown
Contributor

caugner commented Mar 18, 2026

https://fred-pr712.review.mdn.allizom.net/en-US/play?id=rCfusnHbQaseoVnpt5%2BOn3b12l6jKOf8oDyb9smSb5ueTnvaFpg87%2FSZ4fWjiysCSJBwRrmdXiMXJnTQ

caugner
caugner requested changes Mar 18, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@caugner caugner left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The button seems to overflow weirdly now.

Could the button take the whole area of the iframe, and look like the other buttons on the page in terms of border/background color and hover effect?

@OnkarRuikar
Copy link
Copy Markdown
Contributor Author

OnkarRuikar commented Mar 19, 2026

Could the button take the whole area of the iframe, and look like the other buttons on the page in terms of border/background color and hover effect?

@caugner Do you mean without the white padding around? Like the following:

overlay_button_white-2026-03-19_08.15.53.mp4

For dark theme it's a bit tricky, because the button sits on top of a white iframe. So we need to set the background color manually. What theme color variable should I use for background-color: var(--color-XXX)? All the theme colors involve light shades and not a single one has pitch dark color. Or should I create a new theme variable just for this button with values white|black?

@caugner
Copy link
Copy Markdown
Contributor

caugner commented Mar 20, 2026

Do you mean without the white padding around? Like the following:

Yes, exactly like that.

For dark theme it's a bit tricky, because the button sits on top of a white iframe. So we need to set the background color manually.

Could we use background-color: var(--color-background-page)?

@OnkarRuikar
Copy link
Copy Markdown
Contributor Author

OnkarRuikar commented Mar 25, 2026 •
edited
Loading

Ok now the button covers entire output iframe. And it appears like other buttons around:

overlay_button_updated.mp4

Preview Link:
https://fred-pr712.review.mdn.allizom.net/en-US/play?id=rCfusnHbQaseoVnpt5%2BOn3b12l6jKOf8oDyb9smSb5ueTnvaFpg87%2FSZ4fWjiysCSJBwRrmdXiMXJnTQ

@OnkarRuikar OnkarRuikar requested a review from caugner March 25, 2026 07:07
caugner
caugner requested changes Mar 25, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@caugner caugner left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, UI is looking good, with these remaining nits:

  • Use the same border-radius as mdn-play-runner (.25rem).
  • Use flex-grow: 1 like mdn-play-runner, and hide the mdn-play-runner conditionally if it the overlay button is shown (so that the button takes the same space, and we should no longer need position: absolute, inset: ..., and z-index).
  • Use border-color: currentcolor like mdn-button.
image image

@OnkarRuikar OnkarRuikar requested a review from caugner March 25, 2026 12:04
@caugner
Copy link
Copy Markdown
Contributor

caugner commented Mar 25, 2026

I wonder if we could/should add a text in the button below the "Run" label along these lines:

This shared Playground was authored by a user, not MDN.
Review the code carefully. Running it might expose your IP address.
Do not enter sensitive information.

@caugner
Copy link
Copy Markdown
Contributor

caugner commented Mar 25, 2026

Use border-color: currentcolor like mdn-button.

@OnkarRuikar Let's also apply this change, to make it easier to identify the button as such.

@OnkarRuikar OnkarRuikar requested a review from mdn-bot as a code owner March 26, 2026 04:47
@OnkarRuikar
Copy link
Copy Markdown
Contributor Author

OnkarRuikar commented Mar 26, 2026

How about now?

with warning

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@LeoMcA LeoMcA Awaiting requested review from LeoMcA

@caugner caugner Awaiting requested review from caugner

@mdn-bot mdn-bot Awaiting requested review from mdn-bot

Requested changes must be addressed to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Improve discoverability of "Run" action for Playground links

4 participants

@OnkarRuikar @LeoMcA @caugner @mdn-bot