fix: Add sandbox attrs to live samples that call open() (#38271)

* feat(api): Fix window.open examples

* feat(api): Fix window.open example

Author: bsmth

files/en-us/web/api/blob/index.md

@@ -57,23 +57,19 @@ const blob = new Blob([JSON.stringify(obj, null, 2)], {
 
 ### Creating a URL representing the contents of a typed array
 
-The following code creates a JavaScript [typed array](/en-US/docs/Web/JavaScript/Guide/Typed_arrays) and creates a new `Blob` containing the typed array's data. It then calls {{DOMxRef("URL/createObjectURL_static", "URL.createObjectURL()")}} to convert the blob into a {{glossary("URL")}}.
+The following example creates a JavaScript [typed array](/en-US/docs/Web/JavaScript/Guide/Typed_arrays) and creates a new `Blob` containing the typed array's data. It then calls {{DOMxRef("URL/createObjectURL_static", "URL.createObjectURL()")}} to convert the blob into a {{glossary("URL")}}.
 
-#### HTML
-
-```html
+```html live-sample___url-from-array
 <p>
   This example creates a typed array containing the ASCII codes for the space
   character through the letter Z, then converts it to an object URL. A link to
   open that object URL is created. Click the link to see the decoded object URL.
 </p>
 ```
 
-#### JavaScript
-
 The main piece of this code for example purposes is the `typedArrayToURL()` function, which creates a `Blob` from the given typed array and returns an object URL for it. Having converted the data into an object URL, it can be used in a number of ways, including as the value of the {{HTMLElement("img")}} element's [`src`](/en-US/docs/Web/HTML/Element/img#src) attribute (assuming the data contains an image, of course).
 
-```js
+```js live-sample___url-from-array
 function showViewLiveResultButton() {
   if (window.self !== window.top) {
     // Ensure that if our document is in a frame, we get the user
@@ -103,18 +99,15 @@ if (!showViewLiveResultButton()) {
   }
 
   const url = typedArrayToURL(bytes, "text/plain");
-
   const link = document.createElement("a");
+
   link.href = url;
   link.innerText = "Open the array URL";
-
   document.body.appendChild(link);
 }
 ```
 
-#### Result
-
-{{EmbedLiveSample("Creating_a_URL_representing_the_contents_of_a_typed_array", 600, 200)}}
+{{EmbedLiveSample('url-from-array', , , , , , , 'allow-popups')}}
 
 ### Extracting data from a blob
 

files/en-us/web/api/document/hasfocus/index.md

@@ -32,29 +32,27 @@ None.
 
 ## Examples
 
+### Checking if the document has focus
+
 The following example checks whether the document has focus or not.
 A function called `checkPageFocus()` updates a paragraph element depending on the result of `document.hasFocus()`.
 Opening a new window will cause the document to lose focus and switching back to the original window will cause the document to regain focus.
 
-### HTML
-
-```html
+```html live-sample___has-focus
 <p id="log">Focus check results are shown here.</p>
 <button id="newWindow">Open new window</button>
 ```
 
-```css hidden
+```css hidden live-sample___has-focus
 body {
   padding: 1rem;
   background: gray;
   text-align: center;
-  font-size: 1.5rem;
+  font: 1.5rem sans-serif;
 }
 ```
 
-### JavaScript
-
-```js
+```js live-sample___has-focus
 const body = document.querySelector("body");
 const log = document.getElementById("log");
 
@@ -80,9 +78,7 @@ document.getElementById("newWindow").addEventListener("click", openWindow);
 setInterval(checkDocumentFocus, 300);
 ```
 
-### Result
-
-{{EmbedLiveSample("Examples")}}
+{{EmbedLiveSample('has-focus', , , , , , , 'allow-popups')}}
 
 ## Specifications
 

files/en-us/web/api/media_capture_and_streams_api/taking_still_photos/index.md

@@ -228,7 +228,7 @@ If there isn't a valid image available (that is, the `width` and `height` are bo
 
 ### HTML
 
-```html
+```html live-sample___photo-capture
 <div class="content-area">
   <h1>MDN - navigator.mediaDevices.getUserMedia(): Still photo capture demo</h1>
   <p>
@@ -247,16 +247,14 @@ If there isn't a valid image available (that is, the `width` and `height` are bo
     Visit our article
     <a
       href="https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API/Taking_still_photos">
-      Taking still photos with WebRTC</a
-    >
+      Taking still photos with WebRTC
+    </a>
     to learn more about the technologies used here.
   </p>
 </div>
 ```
 
-### CSS
-
-```css
+```css hidden live-sample___photo-capture
 #video {
   border: 1px solid black;
   box-shadow: 2px 2px 3px black;
@@ -301,31 +299,31 @@ If there isn't a valid image available (that is, the `width` and `height` are bo
 }
 
 .content-area {
-  font-size: 16px;
-  font-family: "Lucida Grande", "Arial", sans-serif;
+  font:
+    1.2rem "Lucida Grande",
+    "Arial",
+    sans-serif;
   width: 760px;
+  padding: 2rem;
 }
 ```
 
 ### JavaScript
 
-```js
+```js live-sample___photo-capture
 (() => {
   // The width and height of the captured photo. We will set the
   // width to the value defined here, but the height will be
   // calculated based on the aspect ratio of the input stream.
-
   const width = 320; // We will scale the photo width to this
   let height = 0; // This will be computed based on the input stream
 
   // |streaming| indicates whether or not we're currently streaming
   // video from the camera. Obviously, we start at false.
-
   let streaming = false;
 
   // The various HTML elements we need to configure or control. These
   // will be set by the startup() function.
-
   let video = null;
   let canvas = null;
   let photo = null;
@@ -338,9 +336,15 @@ If there isn't a valid image available (that is, the `width` and `height` are bo
       // won't be able to request permission for camera access.
       document.querySelector(".content-area").remove();
       const button = document.createElement("button");
-      button.textContent = "View live result of the example code above";
+      button.textContent = "Open example in new window";
       document.body.append(button);
-      button.addEventListener("click", () => window.open(location.href));
+      button.addEventListener("click", () =>
+        window.open(
+          location.href,
+          "MDN",
+          "width=850,height=700,left=150,top=150",
+        ),
+      );
       return true;
     }
     return false;
@@ -373,7 +377,6 @@ If there isn't a valid image available (that is, the `width` and `height` are bo
 
           // Firefox currently has a bug where the height can't be read from
           // the video, so we will make assumptions if this happens.
-
           if (isNaN(height)) {
             height = width / (4 / 3);
           }
@@ -400,9 +403,7 @@ If there isn't a valid image available (that is, the `width` and `height` are bo
     clearPhoto();
   }
 
-  // Fill the photo with an indication that none has been
-  // captured.
-
+  // Fill the photo with an indication that none has been captured.
   function clearPhoto() {
     const context = canvas.getContext("2d");
     context.fillStyle = "#AAA";
@@ -417,7 +418,6 @@ If there isn't a valid image available (that is, the `width` and `height` are bo
   // format data URL. By drawing it on an offscreen canvas and then
   // drawing that to the screen, we can change its size and/or apply
   // other changes before drawing it.
-
   function takePicture() {
     const context = canvas.getContext("2d");
     if (width && height) {
@@ -438,9 +438,7 @@ If there isn't a valid image available (that is, the `width` and `height` are bo
 })();
 ```
 
-### Result
-
-{{EmbedLiveSample('Demo', '100%', 30)}}
+{{EmbedLiveSample('photo-capture', '100%', '30', , , , , 'allow-popups')}}
 
 ## Fun with filters
 
@@ -454,7 +452,7 @@ You can, if needed, restrict the set of permitted video sources to a specific de
 
 ## See also
 
-- [Sample code on GitHub](https://github.com/mdn/samples-server/tree/master/s/webrtc-capturestill)
 - {{domxref("MediaDevices.getUserMedia")}}
-- [Using frames from a video](/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#using_frames_from_a_video) in the Canvas tutorial
 - {{domxref("CanvasRenderingContext2D.drawImage()")}}
+- [Using frames from a video](/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#using_frames_from_a_video) in the Canvas tutorial
+- [Sample code on GitHub](https://github.com/mdn/samples-server/tree/master/s/webrtc-capturestill)