Merge pull request #130 from Kilian/polypane-hide-elements

Add Polypane to hide elements tip

src/tips/en/hide-elements.md

@@ -2,7 +2,7 @@
 date: 2024-06-12
 authors: Patrick Brosset
 title: Hide elements from the page, without changing the layout
-tags: ["tip", "personalization", "css", "browser:edge", "browser:chrome", "browser:firefox"]
+tags: ["tip", "personalization", "css", "browser:edge", "browser:chrome", "browser:firefox", "browser:polypane"]
 see-also: ["remove-annoying-overlays.md"]
 ---
 In the DevTools' **Elements** (or **Inspector**) tool, you can delete nodes from the DOM tree by selecting them in the tool and then pressing <kbd>Delete</kbd> or <kbd>Backspace</kbd>. While this is great to completely remove the elements and make others take more space for example, it can also break the CSS layout of the page.
@@ -18,7 +18,7 @@ To hide an element without removing it from the DOM tree, in DevTools:
 1. Go to the **Elements** tool (called **Inspector** in Firefox).
 1. Select the element you want to hide.
 
- * Either from the poage, by right-clicking on it and selecting **Inspect**.
+ * Either from the page, by right-clicking on it and selecting **Inspect**.
  * Or from the tool, by finding and clicking on the element in the DOM tree.
 
 1. Press <kbd>H</kbd> on your keyboard.
@@ -28,3 +28,11 @@ To hide an element without removing it from the DOM tree, in DevTools:
 To show the element again, make sure it's selected in the **Elements**/**Inspector** tool, and press <kbd>H</kbd> again.
 
 ![Chrome with DevTools opened, showing how pressing H hides elements from the page](../../assets/img/hide-elements.png)
+
+### In Polypane
+
+1. Select the element you want to hide in the **Elements** panel.
+1. Click the **Eye** button in the toolbar. It will go from an open eye to a closed eye.
+1. Click it again to show the element again.
+
+![Polypane with the Elements panel opened, showing how Clicking the eye icon hides elements from the page](../../assets/img/hide-elements-polypane.png)