Merge branch 'main' into refactor-dicts

files/en-us/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md

@@ -27,10 +27,14 @@ How do you pull it up? Three ways:
 
 - **_Menu bar:_**
 
-  - **Firefox:** Menu ![Firefox hamburger menu icon that has more options to customize and control Firefox.](2014-01-10-13-08-08-f52b8c.png) _➤ More tools ➤ Web Developer Tools_
+  - **Firefox:** _Menu (☰) ➤ More tools ➤ Web Developer Tools_
   - **Chrome:** _More tools ➤ Developer tools_
-  - **Safari:** _Develop ➤ Show Web Inspector._ If you can't see the _Develop_ menu, go to _Safari ➤ Preferences ➤ Advanced_, and check the _Show Develop menu in menu bar_ checkbox.
   - **Opera**: _Developer ➤ Developer tools_
+  - **Safari:** _Develop ➤ Show Web Inspector._
+
+    > [!NOTE]
+    > The Safari developer tools are not enabled by default.
+    > To enable them, go to _Safari ➤ Preferences ➤ Advanced_, and check the _Show Develop menu in menu bar_ or _Enable features for web developers_ checkbox.
 
 - **_Context menu:_** Press-and-hold/right-click an item on a webpage (Ctrl-click on the Mac), and choose _Inspect Element_ from the context menu that appears. (_An added bonus:_ this method straight-away highlights the code of the element you right-clicked.)
 
@@ -44,9 +48,8 @@ The developer tools usually open by default to the inspector, which looks someth
 
 If you _don't_ see the inspector,
 
-- Tap/click the _Inspector_ tab.
-- In Chrome, Microsoft Edge, or Opera, tap/click Elements.
-- In Safari, the controls are not so clearly presented, but you should see the HTML if you haven't selected something else to appear in the window. Press the _Style_ button to see the CSS.
+- **Firefox:** Select the **Inspector** tab.
+- **Other browsers:** Select the **Elements** tab.
 
 ### Exploring the DOM inspector
 
@@ -80,20 +83,23 @@ These features are especially handy:
 You'll notice a number of clickable tabs at the top of the CSS Viewer:
 
 - _Computed_: This shows the computed styles for the currently selected element (the final, normalized values that the browser applies).
-- _Layout_: In Firefox, this area includes two sections:
+- _Layout_: This shows the details for CSS [grid](/en-US/docs/Web/CSS/CSS_grid_layout) and [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) layout modes if the element you are inspecting uses them.
+- _Fonts_: In Firefox and Safari, the _Fonts_ tab shows the fonts applied to the current element.
+
+The _box model_ view visually represents the current element's box model, so you can see at a glance what padding, border and margin is applied to it, and how big its content is. In Firefox, this is located in the _Layout_ tab, and in other browsers it is in the _Computed_ tab.
 
-  - _Box Model_: represents visually the current element's box model, so you can see at a glance what padding, border and margin is applied to it, and how big its content is.
-  - _Grid_: If the page you are inspecting uses CSS grid, this section allows you to view the grid details.
+In some browsers, the JavaScript details of the selected element can also be viewed in this panel. In Safari, these are unified under the _Node_ tab, but are in separate tabs in Chrome, Opera, and Edge.
 
-- _Fonts_: In Firefox, the _Fonts_ tab shows the fonts applied to the current element.
+- _Properties_: The {{Glossary("Property (JavaScript)", "properties")}} of the element object.
+- _Event Listeners_: The [events](/en-US/docs/Web/API/Event) associated with the element.
 
 ### Find out more
 
 Find out more about the Inspector in different browsers:
 
 - [Firefox Page inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/index.html)
-- [Chrome DOM inspector](https://developer.chrome.com/docs/devtools/dom/) (Opera's inspector works the same as this)
-- [Safari DOM inspector and style explorer](https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW1)
+- [Chrome DOM inspector](https://developer.chrome.com/docs/devtools/dom/) (Opera and Edge's inspector is the same)
+- [Safari Elements tab](https://webkit.org/web-inspector/elements-tab/)
 
 ## The JavaScript debugger
 
@@ -103,15 +109,12 @@ The JavaScript debugger allows you to watch the value of variables and set break
 
 To get to the debugger:
 
-**Firefox**: Select ![Firefox menu icon that has more options to customize and control Firefox.](2014-01-10-13-08-08-f52b8c.png) ➤ _Web Developer_ ➤ _Debugger_ or press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd> to open the JavaScript Debugger. If the tools are already displayed, click on the **Debugger** tab.
-
-**Chrome**: Open the Developer tools and then select the **Sources** tab. (Opera works the same way.)
-
-**Safari**: Open the Developer Tools and then select the Debugger tab.
+**Firefox**: Open the Developer tools and select the **Debugger** tab.
+**Other browsers**: Open the Developer tools and select the **Sources** tab.
 
 ### Exploring the debugger
 
-There are three panes in the JavaScript Debugger on Firefox.
+Each browser's JavaScript debugger is divided into three panes. The layout of these is somewhat different depending on the browser you are using; this guide uses Firefox as a reference.
 
 #### File list
 
@@ -146,19 +149,14 @@ The final section, **Scopes**, shows what values are visible from various points
 Find out more about the JavaScript debugger in different browsers:
 
 - [Firefox JavaScript Debugger](https://firefox-source-docs.mozilla.org/devtools-user/debugger/index.html))
-- [Microsoft Edge Debugger](https://learn.microsoft.com/en-us/archive/microsoft-edge/legacy/developer/devtools-guide/debugger)
-- [Chrome Debugger](https://developer.chrome.com/docs/devtools/javascript/)
-- [Safari Debugger](https://developer.apple.com/safari/tools/)
+- [Chrome Debugger](https://developer.chrome.com/docs/devtools/javascript/) (Opera and Edge's debugger is the same)
+- [Safari Sources tab](https://webkit.org/web-inspector/sources-tab/)
 
 ## The JavaScript console
 
-The JavaScript console is an incredibly useful tool for debugging JavaScript that isn't working as expected. It allows you to run lines of JavaScript against the page currently loaded in the browser, and reports the errors encountered as the browser tries to execute your code. To access the console in any browser:
-
-If the developer tools are already open, click or press the Console tab.
-
-If not, Firefox allows you to open the console directly using <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd> or using the menu command: Menu ![Firefox menu](2014-01-10-13-08-08-f52b8c.png) _➤ Web Developer ➤ Web Console,_ or _Tools ➤_ _Web Developer ➤ Web Console._ On other browsers, open the developer tools and then click the Console tab.
+The JavaScript console is an incredibly useful tool for debugging JavaScript that isn't working as expected. It allows you to run lines of JavaScript against the page currently loaded in the browser, and reports the errors encountered as the browser tries to execute your code.
 
-This will give you a window like the following:
+To access the console in any browser, open the developer tools and select the **Console** tab. This will give you a window like the following:
 
 ![The Console tab of the browser developer tools. Two JavaScript functions have been executed in the console. The user entered functions, and the console displayed the return values.](console_only.png)
 
@@ -207,8 +205,8 @@ You'll start to see the kind of errors that the browser returns. Often these err
 Find out more about the JavaScript console in different browsers:
 
 - [Firefox Web Console](https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html)
-- [Chrome JavaScript Console](https://developer.chrome.com/docs/devtools/console/) (Opera's inspector works the same as this)
-- [Safari Console](https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1)
+- [Chrome JavaScript Console](https://developer.chrome.com/docs/devtools/console/) (Opera and Edge's console is the same)
+- [Safari Console Object API](https://webkit.org/web-inspector/console-object-api/) and [Console Command Line API](https://webkit.org/web-inspector/console-command-line-api/)
 
 ## See also
 

files/en-us/learn/css/building_blocks/cascade_layers/index.md

@@ -258,9 +258,9 @@ You can import more than one CSS file into a single layer. The following declara
 You can import styles and create layers based on specific conditions using [media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) and [feature queries](/en-US/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries). The following imports a style sheet into an `international` layer only if the browser supports `display: ruby`, and the file being imported is dependent on the width of the screen.
 
 ```css
-@import url("ruby-narrow.css") layer(international) supports(display: ruby) and
+@import url("ruby-narrow.css") layer(international) supports(display: ruby)
   (width < 32rem);
-@import url("ruby-wide.css") layer(international) supports(display: ruby) and
+@import url("ruby-wide.css") layer(international) supports(display: ruby)
   (width >= 32rem);
 ```
 

files/en-us/learn/forms/sending_and_retrieving_form_data/index.md

@@ -213,7 +213,7 @@ This example displays a page with the data we sent. You can see this in action i
 ![Otherwise blank web page with "hi mom", the data received in response after submitting form data to a php file with POST method](php-result.png)
 
 > [!NOTE]
-> This example won't work when you load it into a browser locally — browsers cannot interpret PHP code, so when the form is submitted the browser will just offer to download the PHP file for you. To get it to work, you need to run the example through a PHP server of some kind. Good options for local PHP testing are [MAMP](https://www.mamp.info/en/downloads/) (Mac and Windows) and [AMPPS](https://ampps.com/downloads/) (Mac, Windows, Linux).
+> This example won't work when you load it into a browser locally — browsers cannot interpret PHP code, so when the form is submitted the browser will just offer to download the PHP file for you. To get it to work, you need to run the example through a PHP server of some kind. Good options for local PHP testing are [MAMP](https://www.mamp.info/en/downloads/) (Mac and Windows) and [XAMPP](https://www.apachefriends.org/download.html) (Mac, Windows, Linux).
 >
 > Note also that if you are using MAMP but don't have MAMP Pro installed (or if the MAMP Pro demo time trial has expired), you might have trouble getting it working. To get it working again, we have found that you can load up the MAMP app, then choose the menu options _MAMP_ > _Preferences_ > _PHP_, and set "Standard Version:" to "7.2.x" (x will differ depending on what version you have installed).
 

files/en-us/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.md

@@ -53,6 +53,7 @@ Inside the first `if...else`, you need to nest another `if...else` that puts app
 - Score of 90 to 100 — "What an amazing score! Did you cheat? Are you for real?"
 
 Try updating the live code below to recreate the finished example. After you've entered your code, try changing `machineActive` to `true`, to see if it works.
+Please note that, for the scope of this exercise, the `Your score is __` statement will remain on the screen regardless of the `machineActive`'s value.
 
 {{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/conditionals/conditionals2.html", '100%', 400)}}
 

files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.md

@@ -78,7 +78,7 @@ We now have an app that displays a list of to-do items. However, we can't update
 4. Let's load this component into our app. Go back to `App.vue` and add the following `import` statement just below the previous one, inside your `<script>` element:
 
    ```js
-   import ToDoForm from "./components/ToDoForm";
+   import ToDoForm from "./components/ToDoForm.vue";
    ```
 
 5. You also need to register the new component in your `App` component — update the `components` property of the component object so that it looks like this:

files/en-us/mozilla/firefox/releases/48/index.md

@@ -60,7 +60,7 @@ page-type: firefox-release-notes
 
 - The `text` value of {{cssxref("background-clip")}} is now available in all type of Firefox (and not only non-release builds) ([Firefox bug 1263516](https://bugzil.la/1263516)).
 - The `absolute` value of {{cssxref("position")}} properties on the top layer element ([Firefox bug 1236828](https://bugzil.la/1236828)).
-- Added an internal-only syntax for {{domxref("@supports")}} to detect pref ([Firefox bug 1259889](https://bugzil.la/1259889)).
+- Added an internal-only syntax for {{cssxref("@supports")}} to detect pref ([Firefox bug 1259889](https://bugzil.la/1259889)).
 
 ### JavaScript
 

files/en-us/mozilla/firefox/releases/51/index.md

@@ -94,7 +94,7 @@ Firefox 51 was released on January 24, 2017. This article lists key changes that
 - Scripts served with an `image/*`, `video/*`, `audio/*` or `text/csv` MIME type are now blocked and are not loaded or executed. This happen when they are declared using {{HTMLElement("script")}}, or loaded via {{domxref("WorkerGlobalScope.importScripts()")}}, {{domxref("Worker.Worker","Worker()")}}, {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} ([Firefox bug 1229267](https://bugzil.la/1229267) and [Firefox bug 1288361](https://bugzil.la/1288361)).
 - Support for SHA-1 certificates from publicly-trusted certificate authorities has been removed ([Firefox bug 1302140](https://bugzil.la/1302140)). See also [Phasing Out SHA-1 on the Public Web](https://blog.mozilla.org/security/2016/10/18/phasing-out-sha-1-on-the-public-web/) for more information.
 - New WoSign and StartCom certificates will no longer be accepted ([Firefox bug 1309707](https://bugzil.la/1309707)), see [Distrusting New WoSign and StartCom Certificates](https://blog.mozilla.org/security/2016/10/24/distrusting-new-wosign-and-startcom-certificates/) for more information.
-- The [PAC](</en-US/docs/Mozilla/Projects/Necko/Proxy_Auto-Configuration_(PAC)_file>) `FindProxyForURL(url, host)` function now strips paths and queries from https\:// URLs to avoid information leakage (see [Firefox bug 1255474](https://bugzil.la/1255474) and [CVE-2017-5384](https://nvd.nist.gov/vuln/detail/CVE-2017-5384)).
+- The [PAC](/en-US/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_PAC_file) `FindProxyForURL(url, host)` function now strips paths and queries from https\:// URLs to avoid information leakage (see [Firefox bug 1255474](https://bugzil.la/1255474) and [CVE-2017-5384](https://nvd.nist.gov/vuln/detail/CVE-2017-5384)).
 
 ### XHR
 
@@ -135,8 +135,8 @@ Firefox 51 was released on January 24, 2017. This article lists key changes that
 
 ### Removals
 
-- The non-standard [Simple Push API](/en-US/docs/Archive/Firefox_OS/API/Simple_Push_API), mainly intended for use with Firefox OS and now superseded by the [W3C Push API](/en-US/docs/Web/API/Push_API), has been completely removed from Gecko ([Firefox bug 1296579](https://bugzil.la/1296579)).
-- The non-standard [Alarms API](/en-US/docs/Archive/Firefox_OS/API/Alarm_API), mainly intended for use with Firefox OS, has been completely removed from Gecko ([Firefox bug 1300884](https://bugzil.la/1300884)).
+- The non-standard Simple Push API, mainly intended for use with Firefox OS and now superseded by the [W3C Push API](/en-US/docs/Web/API/Push_API), has been completely removed from Gecko ([Firefox bug 1296579](https://bugzil.la/1296579)).
+- The non-standard Alarms API, mainly intended for use with Firefox OS, has been completely removed from Gecko ([Firefox bug 1300884](https://bugzil.la/1300884)).
 - Support for prefixes in the [Page Visibility API](/en-US/docs/Web/API/Page_Visibility_API) has been removed ([Firefox bug 812701](https://bugzil.la/812701)).
 
 ## Changes for add-on and Mozilla developers
@@ -161,15 +161,15 @@ Firefox 51 was released on January 24, 2017. This article lists key changes that
 ### Other
 
 - The [`multiprocessCompatible` property of `install.rdf`](/en-US/docs/Mozilla/Add-ons/Install_Manifests#multiprocesscompatible) must now be explicitly set to `false` to prevent multiprocess from being enabled in Firefox when the add-on is installed.
-- The Mozilla-specific [Social API](/en-US/docs/Mozilla/Projects/Social_API) has been substantially changed (largely to remove APIs no longer used), as follows:
+- The Mozilla-specific Social API has been substantially changed (largely to remove APIs no longer used), as follows:
 
-  - The {{domxref("MozSocial")}} interface and the {{domxref("navigator.mozSocial")}} property which supports it have been removed.
-  - The [Social Bookmarks API](/en-US/docs/Mozilla/Projects/Social_API/Bookmarks) has been removed.
+  - The `MozSocial` interface and the `Navigator.mozSocial` property which supports it have been removed.
+  - The Social Bookmarks API has been removed.
   - The Social chat functionality has been removed.
   - The Social Status API has been removed.
-  - All of the [social widgets](/en-US/docs/Mozilla/Projects/Social_API/Widgets), except for the Share panel, have been removed. This includes the social sidebar, flyover panels, and so forth.
+  - All of the social widgets, except for the Share panel, have been removed. This includes the social sidebar, flyover panels, and so forth.
   - All supporting user interface features and functionality for the removed APIs have been removed as well.
-  - [Social service provider manifest](/en-US/docs/Mozilla/Projects/Social_API/Manifest) properties supporting the removed functionality are no longer supported.
+  - Social service provider manifest properties supporting the removed functionality are no longer supported.
 
 - If an add-on uses `mimeTypes.rdf` to provide a file extension to MIME type mapping, it must now register an entry in the `"ext-to-type-mapping"` category ([Firefox bug 306471](https://bugzil.la/306471)).
 - The [Browser API](/en-US/docs/Mozilla/Gecko/Chrome/API/Browser_API) now includes a `detail` object on the event object of the [`mozbrowserlocationchange`](/en-US/docs/Web/Events/mozbrowserlocationchange) event that contains `canGoForward`/`canGoBack` properties, allowing retrieval of the mozBrowser's back/forward status synchronously ([Firefox bug 1279635](https://bugzil.la/1279635)).

files/en-us/mozilla/firefox/releases/56/index.md

@@ -51,7 +51,7 @@ _No changes._
 
 #### DOM events
 
-- {{domxref("HTMLElement/wheel_event", "onwheel")}} is now available on {{domxref("HTMLElement")}} — it wasn't before ([Firefox bug 1370550](https://bugzil.la/1370550)).
+- {{domxref("Element/wheel_event", "onwheel")}} is now available on {{domxref("HTMLElement")}} — it wasn't before ([Firefox bug 1370550](https://bugzil.la/1370550)).
 
 #### Media and WebRTC
 
@@ -74,7 +74,7 @@ _No changes._
 ### Other
 
 - Gecko now encodes URLs internally as [punycode](https://en.wikipedia.org/wiki/Punycode), to avoid URL encoding problems (see [Firefox bug 945240](https://bugzil.la/945240), also see discussion in [Firefox bug 942074](https://bugzil.la/942074)).
-- Firefox on Windows and macOS can now be made to run in [headless mode](/en-US/docs/Mozilla/Firefox/Headless_mode) using the `-headless` flag (see [Firefox bug 1355150](https://bugzil.la/1355150) and [Firefox bug 1355147](https://bugzil.la/1355147)).
+- Firefox on Windows and macOS can now be made to run in headless mode using the `-headless` flag (see [Firefox bug 1355150](https://bugzil.la/1355150) and [Firefox bug 1355147](https://bugzil.la/1355147)).
 
 ## Removals from the web platform