From f93e33528e14dc8af14e30905b346be1ad5fb23e Mon Sep 17 00:00:00 2001
From: Antonio <bandantonio@users.noreply.github.com>
Date: Thu, 22 Oct 2020 05:08:26 +0300
Subject: [PATCH] docs: revised the web embeds feature page (#26008)

* docs: revised the web embeds feature page

* docs: minor styling updates to the web embeds feature page

* docs: fixed text and grammar mentions

* docs: changed placement of the webviews warning

* docs: added a few missing commas
---
 docs/tutorial/web-embeds.md | 59 +++++++++++++++++++++++++++++--------
 1 file changed, 47 insertions(+), 12 deletions(-)

diff --git a/docs/tutorial/web-embeds.md b/docs/tutorial/web-embeds.md
index 1b260b775c..110fe713a1 100644
--- a/docs/tutorial/web-embeds.md
+++ b/docs/tutorial/web-embeds.md
@@ -1,22 +1,57 @@
-# Web embeds in Electron
+# Web embeds
 
-If you want to embed (third party) web content in an Electron `BrowserWindow`, there are three options available to you: `<iframe>` tags, `<webview>` tags, and `BrowserViews`. Each one offers slightly different functionality and is useful in different situations. To help you choose between these, this guide will explain the differences and capabilities of each.
+## Overview
 
-## Iframes
+If you want to embed (third-party) web content in an Electron `BrowserWindow`,
+there are three options available to you: `<iframe>` tags, `<webview>` tags,
+and `BrowserViews`. Each one offers slightly different functionality and is
+useful in different situations. To help you choose between these, this guide
+explains the differences and capabilities of each option.
 
-Iframes in Electron behave like iframes in regular browsers. An `<iframe>` element in your page can show external web pages, provided that their [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) allows it. To limit the amount of capabilities a site in an `<iframe>` tag, it's recommended to use the [`sandbox` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox) and only allow the capabilities you want to support.
+### Iframes
 
-## WebViews
+Iframes in Electron behave like iframes in regular browsers. An `<iframe>`
+element in your page can show external web pages, provided that their
+[Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
+allows it. To limit the number of capabilities of a site in an `<iframe>` tag,
+it is recommended to use the [`sandbox` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox)
+and only allow the capabilities you want to support.
 
-[WebViews](../api/webview-tag.md) are based on Chromium's WebViews and are not explicitly supported by Electron. We do not guarantee that the WebView API will remain available in future versions of Electron. This is why, if you want to use `<webview>` tags, you will need to set `webviewTag` to `true` in the `webPreferences` of your `BrowserWindow`.
+### WebViews
 
-WebViews are a custom element (`<webview>`) that will only work inside Electron.
-They are implemented as an "out-of-process iframe". This means that all communication with the `<webview>` is done asynchronously using IPC. The `<webview>` element has many custom methods and events, similar to `webContents`, that allow you much greater control over the contents.
+> Important Note:
+[we do not recommend you to use use WebViews](https://www.electronjs.org/docs/api/webview-tag#warning),
+as this tag undergoes dramatic architectural changes that may affect stability
+of your application. Consider switching to alternatives, like `iframe` and
+Electron's `BrowserView`, or an architecture that avoids embedded content
+by design.
 
-Compared to an `<iframe>`, `<webview>` tends to be slightly slower but offers much greater control in loading and communicating with the third party content and handling various events.
+[WebViews](../api/webview-tag.md) are based on Chromium's WebViews and are not
+explicitly supported by Electron. We do not guarantee that the WebView API will
+remain available in future versions of Electron. To use `<webview>` tags, you
+will need to set `webviewTag` to `true` in the `webPreferences` of your
+`BrowserWindow`.
 
-## BrowserViews
+WebView is a custom element (`<webview>`) that will only work inside Electron.
+They are implemented as an "out-of-process iframe". This means that all
+communication with the `<webview>` is done asynchronously using IPC. The
+`<webview>` element has many custom methods and events, similar to
+`webContents`, that provide you with greater control over the content.
 
-[BrowserViews](../api/browser-view.md) are not part of the DOM - instead, they are created in and controlled by your main process. They are simply another layer of web content on top of your existing window. This means that they are completely separate from your own `BrowserWindow` content and that their position is not controlled by the DOM or CSS but by setting the bounds in the main process.
+Compared to an `<iframe>`, `<webview>` tends to be slightly slower but offers
+much greater control in loading and communicating with the third-party content
+and handling various events.
 
-BrowserViews offer the greatest control over their contents, since they implement the `webContents` similarly to how a `BrowserWindow` implements it. However, they are not part of your DOM but are overlaid on top of them, which means you will have to manage their position manually.
+### BrowserViews
+
+[BrowserViews](../api/browser-view.md) are not a part of the DOM - instead,
+they are created in and controlled by your Main process. They are simply
+another layer of web content on top of your existing window. This means
+that they are completely separate from your own `BrowserWindow` content and
+their position is not controlled by the DOM or CSS. Instead, it is controlled
+by setting the bounds in the Main process.
+
+`BrowserViews` offer the greatest control over their contents, since they
+implement the `webContents` similarly to how the `BrowserWindow` does it.
+However, as `BrowserViews` are not a part of your DOM, but are rather overlaid
+on top of them, you will have to manage their position manually.