"Open in CodePen/JSFiddle" broken; open popup with incomplete URL

[WebMechanic]

Summary In any API reference page onMDN that offers to open a code example in CodePan of JSFiddle, both buttons open a popup window where the target URL lacks the id/key/reference of the pen or fiddle in question. I don't try this feature very often 'cos these buttons have been repeatedly broken for me since ever, maybe they worked once a long time ago, and until today I never bothered ...

Steps To Reproduce (STR)

1. visit i.e. https://developer.mozilla.org/en-US/docs/Web/CSS/attr
2. find the code example
3. click any of the two buttons "Open in CodePen/JSFiddle"

Actual behavior The popup windows open either

• https://codepen.io/pen/?&editable=true
• https://jsfiddle.net/api/mdn/ (gives 404) None of which has any valuable content.

Console says: NS_ERROR_FAILURE in onclick in react-main.(hash).js Async: EventhandlerNonNull. Since the file is minfied and I don't know React I can't provide further information.

Both buttons are broken in Firefox/75 dev, Nightly, Chrome/80, Canary/83, Edge/83 ... so basically everywhere as far as Windoze is concerned. I am using Win10 Pro.

Expected behavior The popup windows should open the correct CodePen/JSFiddle URL with the example.

Additional context

WHY Buttons? 🧐

I'm curious why this simple feature is hidden inside JS driven buttons in the first place? What's the rationale other than using React because buttons are interactive UI widgets?

In any case this "solution" breaks any aspects of both A11Y and UX because there is no link / URL in the first place that:

• one could right-click to "Open in Tab/new Window"
• one could copy or bookmark (via the context menu)
• one could drag onto the desktop as a shortcut, onto an app icon, into an editor, ...

K.I.S.S. anyone?

Why not a proper, vanilla <a> that's 100% accessible and functional and virtually unbreakable. And if you love buttons to "hide" those precious URLs, why not an honest simple <form method="get" target="_blank"> with two distinct <button type="button" formaction="codepen-|fiddle-url" formtarget="codepen|jsfiddle">?

Both alternative are native, functional, safe-to-use HTML, unlike some (now literally useless) JS-powered widget that's prone to fail due to arbitrary personal security settings, bad CORS, and whatnot.

Sorry for the slight sarcasm (might be the lockdown), but this is so... 😡

😇 Stay healthy! 🤧😷

[peterbe]

@Gregoor I ~can~ can't reproduce this. Do you think it could have anything to do with being Windows? UPDATE I typoed the word "can['t]"

[Gregoor]

Did you mean to write "can not" @peterbe? It does work on all browsers on my Windows machine. So my gut says "something something network". But I don't know a whole lot about this component, will do some digging.

[Gregoor]

Okay so it couldn't be a link, as it needs to be a POST for CodePen: https://blog.codepen.io/documentation/api/prefill/ (I imagine max URL lenghts would be part of the problem).

Having the form always be in the DOM instead of injecting it dynamically does seem sensible, but it's also not clear to me whether it would solve the problem (since we don't know what the problem is yet).

[peterbe]

Did you mean to write "can not" @peterbe? It does work on all browsers on my Windows machine. So my gut says "something something network". But I don't know a whole lot about this component, will do some digging.

It's interesting that you managed to reproduce it across all your browsers @WebMechanic What it could have been is that that page wasn't rendered properly and at some point, it got updated. Can you try clicking through on one of these other pages?

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Transformations https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/ry https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/-moz-float-edge https://wiki.developer.mozilla.org/en-US/docs/Mozilla/MathML_Project/Start https://wiki.developer.mozilla.org/en-US/docs/Mozilla/MathML_Project/Basics

Also, @WebMechanic if you could, when it happens can you do it with the Web Console open and take a screenshot, or paste, of what you see there.

[WebMechanic]

@peterbe ok, but this will take a while :) I'll incrementally post results for the various browser as I get to them. How convenient I'm in Lockdown™ ... ;)

In general All flavours of Firefox (Mainstream 74, Dev 75, Nightly 76) show the yellow popup bar and request permission to open the popup. I have one "squeeky clean" profile I occasionally use with Nightly with 99.99% off the shelf settings intact and no extensions installed. Will try this too.

IIRC EdgeHTML 18, Chrome and Edgium open the popup w/o asking, will tell if otherwise. EdgeHTML, Chrome and Edgium have their "Experimental Web Platform features" enabled.

As far as I can tell from any Network panel, all resources are loaded (response 200 | 30x), except anything from 'google-analytics.com' which is blocked in the router.

And to get this outta the way:

• I don't use "NoScript" anywhere -- the whole universe stops working if this is on.
• I do use uBlock Origin virtually everywhere (except Edge) -- the web's less annoying with this

[WebMechanic]

Firefox/74.0

My "personal" day-in, day-out browser. Hefty Paranoia settings, Profile is many many years old, constantly tweaked, hacked and probably the messiest configuration (prefs.js) ever. Runs a buttload of Privacy/Security Extensions such as uBlock, EFF Privacy Badger, DecentralEyes you name it. That's life.

Page SVG/Tutorial/Basic_Transformations

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Transformations

Console when OPENING in new Window

Navigated to https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Transformations
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn.speedcurve.com/js/lux.js?id=108906238. (Reason: CORS request did not succeed).
This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”. Basic_Transformations
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn.speedcurve.com/js/lux.js?id=108906238. (Reason: CORS request did not succeed).
<script> source URI is not allowed in this document: “https://cdn.speedcurve.com/js/lux.js?id=108906238”. Basic_Transformations:72:1
<script> source URI is not allowed in this document: “https://www.google-analytics.com/analytics.js”. Basic_Transformations:66:1
Request to access cookie or storage on “<URL>” was blocked because we are blocking all third-party storage access requests and content blocking is enabled. 5
Request to access cookie or storage on “https://mdn.mozillademos.org/en-US/docs/Web/SVG/Tutorial/Basic_Transformations$samples/two_blocks?revision=1422224” was blocked because we are blocking all third-party storage access requests and content blocking is enabled.
Request to access cookie or storage on “https://mdn.mozillademos.org/en-US/docs/Web/SVG/Tutorial/Basic_Transformations$samples/Translation?revision=1422224” was blocked because we are blocking all third-party storage access requests and content blocking is enabled.
Request to access cookie or storage on “https://mdn.mozillademos.org/en-US/docs/Web/SVG/Tutorial/Basic_Transformations$samples/Rotation?revision=1422224” was blocked because we are blocking all third-party storage access requests and content blocking is enabled.
Request to access cookie or storage on “https://mdn.mozillademos.org/en-US/docs/Web/SVG/Tutorial/Bas…tions$samples/Effects_on_Coordinate_Systems?revision=1422224” was blocked because we are blocking all third-party storage access requests and content blocking is enabled.
Request to access cookie or storage on “https://mdn.mozillademos.org/en-US/docs/Web/SVG/Tutorial/Bas…ransformations$samples/Embedding_SVG_in_SVG?revision=1422224” was blocked because we are blocking all third-party storage access requests and content blocking is enabled.

CodePen Button clicked CodePen Empty: "Untitled"

NS_ERROR_FAILURE: react-main.73cb22117c96.js:6
    onclick https://developer.mozilla.org/static/build/js/react-main.73cb22117c96.js:6

JSFiddle Button clicked JSFiddle: 404

NS_ERROR_FAILURE: react-main.73cb22117c96.js:7
    onclick https://developer.mozilla.org/static/build/js/react-main.73cb22117c96.js:7

Console when OPENING in Private Window

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn.speedcurve.com/js/lux.js?id=108906238. (Reason: CORS request did not succeed).
This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”. Basic_Transformations
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn.speedcurve.com/js/lux.js?id=108906238. (Reason: CORS request did not succeed).
<script> source URI is not allowed in this document: “https://cdn.speedcurve.com/js/lux.js?id=108906238”. Basic_Transformations:72:1
<script> source URI is not allowed in this document: “https://www.google-analytics.com/analytics.js”. Basic_Transformations:66:1

Buttons clicked NS_ERROR_FAILURE as above

Page Mozilla/MathML_Project/Start

• https://wiki.developer.mozilla.org/en-US/docs/Mozilla/MathML_Project/Start

Console shows a Gazillion Error in parsing MathML attribute value ‘x.x’ as length. Attribute ignored. which I've removed here.

Console when OPENING in New Window

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn.speedcurve.com/js/lux.js?id=108906238. (Reason: CORS request did not succeed).
This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”. Start
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn.speedcurve.com/js/lux.js?id=108906238. (Reason: CORS request did not succeed).
<script> source URI is not allowed in this document: “https://cdn.speedcurve.com/js/lux.js?id=108906238”. Start:111:1
<script> source URI is not allowed in this document: “https://www.google-analytics.com/analytics.js”. Start:104:1
Request to access cookie or storage on “https://mdn.mozillademos.org/en-US/docs/Mozilla/MathML_Project/Start$samples/Zoomable_Math?revision=385081” was blocked because we are blocking all third-party storage access requests and content blocking is enabled.

CodePen Button clicked Opens with "Zoomable MathSection"

JSFiddle Button clicked Opens with "Zoomable MathSection"

Page Web/SVG/Attribute/viewBox

• https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

Essentially the same as "SVG/Tutorial/Basic_Transformations" for New Windows and Private Window, read: not working Both are on developer.mozilla.org

Page docs/Web/CSS/-moz-float-edge

• https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/-moz-float-edge

Console when OPENING in New Window

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn.speedcurve.com/js/lux.js?id=108906238. (Reason: CORS request did not succeed).
This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”. -moz-float-edge
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn.speedcurve.com/js/lux.js?id=108906238. (Reason: CORS request did not succeed).
<script> source URI is not allowed in this document: “https://cdn.speedcurve.com/js/lux.js?id=108906238”. -moz-float-edge:111:1
<script> source URI is not allowed in this document: “https://www.google-analytics.com/analytics.js”. -moz-float-edge:104:1
Request to access cookie or storage on “https://mdn.mozillademos.org/en-US/docs/Web/CSS/-moz-float-edge$samples/Example?revision=1521164” was blocked because we are blocking all third-party storage access requests and content blocking is enabled.

CodePen Button clicked Opens with "ExampleEditSection" (div.box)

JSFiddle Button clicked Opens with "ExampleEditSection"

Page docs/Mozilla/MathML_Project/Basics

• https://wiki.developer.mozilla.org/en-US/docs/Mozilla/MathML_Project/Basics

Console when OPENED in New Window

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn.speedcurve.com/js/lux.js?id=108906238. (Reason: CORS request did not succeed).
This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”. Basics
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn.speedcurve.com/js/lux.js?id=108906238. (Reason: CORS request did not succeed).
<script> source URI is not allowed in this document: “https://cdn.speedcurve.com/js/lux.js?id=108906238”. Basics:111:1
<script> source URI is not allowed in this document: “https://www.google-analytics.com/analytics.js”. Basics:104:1
Loading mixed (insecure) display content “http://www.mozilla.org/images/logo-star.gif” on a secure page
Basics
Loading mixed (insecure) display content “http://www.mozilla.org/images/mozilla-16.png” on a secure page
Basics
Loading mixed (insecure) display content “http://www.mozilla.org/images/logo-star.gif” on a secure page
2 Basics
Loading mixed (insecure) display content “http://www.mozilla.org/images/mozilla-16.png” on a secure page
2 Basics
“veryverythinmathspace”, “verythinmathspace”, “thinmathspace”, “mediummathspace”, “thickmathspace”, “verythickmathspace” and “veryverythickmathspace” are deprecated values for MathML lengths and will be removed at a future date. Basics
Loading mixed (insecure) display content “http://www.mozilla.org/images/mozilla-banner.gif” on a secure page
Basics
MathML attributes “align”, “numalign” and “denomalign” are deprecated values and will be removed at a future date. MathML_Button
Request to access cookie or storage on “<URL>” was blocked because we are blocking all third-party storage access requests and content blocking is enabled. 5
Request to access cookie or storage on “http://www.mozilla.org/images/mozilla-banner.gif” was blocked because we are blocking all third-party storage access requests and content blocking is enabled.
Request to access cookie or storage on “https://www.mozilla.org/images/mozilla-banner.gif” was blocked because we are blocking all third-party storage access requests and content blocking is enabled.
Request to access cookie or storage on “https://mdn.mozillademos.org/en-US/docs/Mozilla/MathML_Project/Basics$samples/MathML_Button?revision=385077” was blocked because we are blocking all third-party storage access requests and content blocking is enabled.
Request to access cookie or storage on “https://mdn.mozillademos.org/en-US/docs/Mozilla/MathML_Project/Basics$samples/MathML_and_Javascript?revision=385077” was blocked because we are blocking all third-party storage access requests and content blocking is enabled.
Request to access cookie or storage on “https://mdn.mozillademos.org/en-US/docs/Mozilla/MathML_Project/Basics$samples/MathML_Background_Image?revision=385077” was blocked because we are blocking all third-party storage access requests and content blocking is enabled.

CodePen buttons clicked Opens "MathML and JavascriptSection", "MathML Button", MathML Background Image

JSFiddle buttons clicked Opens "MathML and JavascriptSection", "MathML Button", MathML Background Image

Console when OPENED in Private Window

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn.speedcurve.com/js/lux.js?id=108906238. (Reason: CORS request did not succeed).
This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”. Basics
“veryverythinmathspace”, “verythinmathspace”, “thinmathspace”, “mediummathspace”, “thickmathspace”, “verythickmathspace” and “veryverythickmathspace” are deprecated values for MathML lengths and will be removed at a future date. Basics
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn.speedcurve.com/js/lux.js?id=108906238. (Reason: CORS request did not succeed).
<script> source URI is not allowed in this document: “https://cdn.speedcurve.com/js/lux.js?id=108906238”. Basics:103:1
<script> source URI is not allowed in this document: “https://www.google-analytics.com/analytics.js”. Basics:96:1
Loading mixed (insecure) display content “http://www.mozilla.org/images/logo-star.gif” on a secure page
Basics
Loading mixed (insecure) display content “http://www.mozilla.org/images/mozilla-16.png” on a secure page
Basics
Loading mixed (insecure) display content “http://www.mozilla.org/images/logo-star.gif” on a secure page
2 Basics
Loading mixed (insecure) display content “http://www.mozilla.org/images/mozilla-16.png” on a secure page
2 Basics
MathML attributes “align”, “numalign” and “denomalign” are deprecated values and will be removed at a future date. MathML_Button
Loading mixed (insecure) display content “http://www.mozilla.org/images/mozilla-banner.gif” on a secure page
Basics
Request to access cookie or storage on “<URL>” was blocked because we are blocking all third-party storage access requests and content blocking is enabled. 2
Request to access cookie or storage on “http://www.mozilla.org/images/mozilla-banner.gif” was blocked because we are blocking all third-party storage access requests and content blocking is enabled.
Request to access cookie or storage on “https://www.mozilla.org/images/mozilla-banner.gif” was blocked because we are blocking all third-party storage access requests and content blocking is enabled.

CodePen buttons clicked Opens "MathML and JavascriptSection", "MathML Button", MathML Background Image

JSFiddle buttons clicked Opens "MathML and JavascriptSection", "MathML Button", MathML Background Image

I'M SENSING A PATTERN HERE... 🙄

I'll skip the other pages and post less exhaustive follow-ups (or summary) for the other browsers.

[WebMechanic]

Firefox/76 Nightly

@peterbe @Gregoor Just a quick test with the pages that didn't work above, inkl. the one I reported and ...

🥁

• working with a squeeky clean profile and zero extensions -- a unrealistic setup ;)
• failing with NS_ERROR_FAILURE and my regular "nightly" profile incl. some privacy extensions

I'll compile a list of subspectible extensions installed in Firefox Mainstream & Nightly, Chrome and Endgium. For the Geckos there's probably some setting in about:config that breaks the React code.

[peterbe]

Thank you!!!

Us inside the team are sometimes weird because we're potentially doing things like overriding our tracking protection and other things like popup blockers on the site and that doesn't always reflect the population. We'll triage it and try to respond.

[WebMechanic]

Us inside the team are sometimes weird because we're potentially doing things like overriding our tracking protection and other things like popup blockers on the site and that doesn't always reflect the population.

That's the very reason I have that squeeky clean profile: to see what mere mortals see :-)

And I usually use FF-Dev or Nightly to browse MDN, caniuse, css-tricks, et al 'cos all this stuff I have in my default browser breaks a lot of pages - on purpose.

EdgeHTML/18

Does open the pages (maybe it was Edgium after all that I used earlier), but I had to answer a Captcha first on CodePen - never seen this before - and somethings fishy in both.

Note how the Pen title and Fiddle Meta contain visible SVG markup.

[WebMechanic]

Those messed up Pen and Fiddle titles in my previous post are not related to EdgeHTML but the source page. All three samples from developer.mozilla.org show some markup or code in the titles on CodePen or JSFiddel. Pages from wiki.developer.mozilla.org show a proper title in both.

Also pages from developer.mozilla.org trigger the yellow popup blocker in FF, whereas wiki.developer.mozilla.org pass through.

Now my brain hurts and I'm hungry. Enuff for today.