Add Safari to existing tips

src/tips/en/change-color-theme.md

@@ -1,10 +1,12 @@
 ---
 title: Change the color theme of DevTools
-tags: ["personalization", "browser:edge", "browser:chrome", "browser:firefox"]
+tags: ["personalization", "browser:edge", "browser:chrome", "browser:firefox", "browser:safari"]
 ---
 DevTools supports a light and dark theme. You can change the theme based on your preference, to match your browser theme for example.
 
 * In Firefox
   * Go to the settings (press F1) and select "dark" or light"
 * In Chrome or Edge
-  * Also go to settings (press F1) and select "light" or "dark" in the Themes drop-down
+  * Also go to settings (press F1) and select "light" or "dark" in the Themes drop-down
+* In Safari
+  * Go to the settings and select "Appearance" between "System", "Light" or "Dark"

src/tips/en/copy-from-console.md

@@ -1,6 +1,6 @@
 ---
 title: Copy an object from the console
-tags: ["console", "javascript", "browser:edge", "browser:firefox", "browser:chrome"]
+tags: ["console", "javascript", "browser:edge", "browser:firefox", "browser:chrome", "browser:safari"]
 ---
 The console panel supports a very handy `copy()` function that stringifies and copies anything you pass to it as an argument, so you can then paste it somewhere else.
 

src/tips/en/debugger-statement.md

@@ -1,6 +1,6 @@
 ---
 title: Use the debugger statement to pause script execution
-tags: ["javascript", "debug", "browser:firefox", "browser:chrome", "browser:edge"]
+tags: ["javascript", "debug", "browser:firefox", "browser:chrome", "browser:edge", "browser:safari"]
 ---
 If you prefer to use `console.log()` statements rather than the JavaScript debugger because you find it difficult to set breakpoints in DevTools (or you can't), then you can use the `debugger` statement in JavaScript.
 

src/tips/en/expand-nodes-recursively.md

@@ -1,9 +1,13 @@
 ---
 title: Expand DOM nodes recursively
-tags: ["html", "productivity", "browser:firefox", "browser:edge", "browser:chrome"]
+tags: ["html", "productivity", "browser:firefox", "browser:edge", "browser:chrome", "browser:safari"]
 ---
 You can expand all descendants under a given DOM node in one go, to avoid having to expand each node one by one, which may take a while.
 
-Right-click on the node you want to expand and select "Expand recursively". You can also `alt+click` on the arrow next to the node.
+* In Chrome and Edge
+  * Right-click on the node you want to expand and select "Expand recursively". You can also `alt+click` or `option+click` on the arrow next to the node.
+* In Firefox and Safari
+  * Right-click on the node you want to expand and select "Expand All". You can also `alt+click` or `option+click` on the arrow next to the node.
+
 
 ![GIF animation showing right-clicking on a node in Chrome's Elements panel and choosing "expand recursively"](/assets/img/expand-nodes-recursively.gif)

src/tips/en/find-css-changes.md

@@ -1,10 +1,10 @@
 ---
 title: Find and export CSS changes
-tags: ["css", "export", "browser:edge", "browser:chrome", "browser:firefox"]
+tags: ["css", "export", "browser:edge", "browser:chrome", "browser:firefox", "browser:safari"]
 ---
 If you spent time changing CSS in DevTools, either in the Rules panel (in Firefox), or in the Sources or Styles panels (in Chrome or Edge), and you don't remember all of the changes you made, you can find and extract them easily from:
 
-* In Firefox:
+* In Firefox or Safari:
   * The Changes panel (in the Inspector), which allows you to copy all changes, or copy a given CSS rule
 * In Chrome or Edge:
   * The Changes panel (which you can open from the command menu by typing `ctrl+shift+P` or `cmd+shift+P`)

src/tips/en/get-current-element-in-console.md

@@ -1,6 +1,6 @@
 ---
 title: Get the selected element in the console
-tags: ["console", "html", "productivity", "browser:edge", "browser:firefox", "browser:chrome"]
+tags: ["console", "html", "productivity", "browser:edge", "browser:firefox", "browser:chrome", "browser:safari"]
 ---
 If you selected an element in the elements panel (in Chrome or Edge) or the inspector panel (in Firefox), you can refer to it in the console using `$0`.
 

src/tips/en/highlight-matching-elements.md

@@ -1,13 +1,13 @@
 ---
 title: Highlight all the elements that a CSS rule matches
-tags: ["html", "css", "highlighter", "browser:edge", "browser:firefox", "browser:chrome"]
+tags: ["html", "css", "highlighter", "browser:edge", "browser:firefox", "browser:chrome", "browser:safari"]
 ---
 When you want to know which elements a given CSS rule will apply to, in addition to the currently selected element, you can:
 
 * In Firefox:
   * In the Style Editor panel: hover over any rule selector for some time.
   * In the Rules panel: click on the selector icon next to any rule selector.
-* In Chrome or Edge:
+* In Chrome, Edge or Safari:
   * In the Styles panel: hover over any rule selector for some time.
 
 ![GIF animation showing how hovering over selectors in chrome highlights the matching elements in the page](/assets/img/highlight-matching-elements.gif)

src/tips/en/query-dom-from-console.md

@@ -1,6 +1,6 @@
 ---
 title: Find DOM elements from the console
-tags: ["console", "html", "browser:edge", "browser:firefox", "browser:chrome"]
+tags: ["console", "html", "browser:edge", "browser:firefox", "browser:chrome", "browser:safari"]
 ---
 `$` and `$$` are 2 functions you can use in the console to find elements in the page.
 

src/tips/en/see-the-page-in-3d.md

@@ -1,11 +1,14 @@
 ---
 title: See the page in 3D
-tags: ["html", "css", "browser:edge"]
+tags: ["html", "css", "browser:edge", "browser:safari"]
 ---
 See your page in 3 dimensions to quickly find out how deeply nested it is and fix z-index stacking issues.
 
-* In Edge, open the command menu (`ctrl+shift+P` or `cmd+shift+P`).
-* Type `3D` and press Enter.
-* In the new panel that opens, switch between the 2 z-index and DOM modes to visualize the page in 3D.
+* In Edge
+  * Open the command menu (`ctrl+shift+P` or `cmd+shift+P`).
+  * Type `3D` and press Enter.
+  * In the new panel that opens, switch between the 2 z-index and DOM modes to visualize the page in 3D.
+* In Safari
+  * Open the Layers panel
 
 ![Screenshot of the 3D view tool showing a page's z-index stacking tree as a 3d scene](/assets/img/see-the-page-in-3d.png)

src/tips/en/simulate-pseudo-classes.md

@@ -1,9 +1,9 @@
 ---
 title: Simulate pseudo CSS classes
-tags: ["html", "css", "debug", "browser:edge", "browser:firefox", "browser:chrome"]
+tags: ["html", "css", "debug", "browser:edge", "browser:firefox", "browser:chrome", "browser:safari"]
 ---
 If you use `:hover`, `:active`, and other such pseudo-classes in CSS, you can actually simulate these states in DevTools without having to hover over or click on buttons and links.
 
-Open the Styles panel (in Chrome or Edge) or the Rules panel (in Firefox), and click the `:hov` button. This will expand a section that allows you to lock one or multiple of these pseudo-classes on the selected element.
+Open the Styles panel (in Chrome, Edge or Safari) or the Rules panel (in Firefox), and click the `:hov` button. This will expand a section that allows you to lock one or multiple of these pseudo-classes on the selected element.
 
 ![Screenshot of the :hov panel to simulate various pseudo-classes](/assets/img/simulate-pseudo-classes.png)

src/tips/en/unminify-javascript-code.md

@@ -1,6 +1,6 @@
 ---
 title: Unminify JavaScript code to easily read and debug it
-tags: ["javascript", "debug", "browser:firefox", "browser:chrome", "browser:edge"]
+tags: ["javascript", "debug", "browser:firefox", "browser:chrome", "browser:edge", "browser:safari"]
 ---
 Sometimes, the JavaScript code that runs on a website is minified and really hard to read. This is common in production.