Merge pull request #7518 from MendixBart/pe/x-ray-mode-docs

X-ray mode documentation

content/en/docs/refguide/modeling/menus/edit-menu/preferences-dialog.md

@@ -203,17 +203,23 @@ In Studio Pro version 10.6 a new access rule editor was introduced in Beta. Enab
 
 For more information, see [Defining Access Rules Using the New Editor](/refguide/access-rules/#new-editor) section of *Access Rules*.
 
-### 9.2 Use the Modernized Expression Editor
+### 9.2 Expression Editor
 
-The expression editor is modernized since Studio Pro 10.6. This setting is enbaled by default. The editor allows the user to write rich text statements and get instant feedback on their validity. In Studio Pro, it is often used to write an expression for a decision or to write an XPath expression for data filtering.
+The expression editor is modernized since Studio Pro 10.6. This setting is enabled by default. The editor allows the user to write rich text statements and get instant feedback on their validity. In Studio Pro, it is often used to write an expression for a decision or to write an XPath expression for data filtering.
 
-### 9.3 Micro- And Nanoflow Editor
+### 9.3 Page Editor
+
+In Studio Pro version 10.9, X-ray mode was introduced to the page editor in Beta. Enable this option to view your app in X-ray mode: a more detailed version of Design mode. 
+
+For more information, see [X-Ray Mode](/refguide/page/#x-ray-mode).
+
+### 9.4 Micro- And Nanoflow Editor
 
 In Studio Pro 10.4 and 10.5, only the **Use the Beta version as the default editor** setting is shown. When this setting is enabled, the modern logic editors (as a beta feature) will become the default editors for all your microflows, nanoflows, and rules. 
 
 In Studio Pro 10.6, only the **Enable switching to the Classic version of the editor** setting is shown. When this setting is enabled, you will be able to see the toggle to switch between the **Classic** and **Modern** version in your logic editors.
 
-### 9.4 Visual Builder
+### 9.5 Visual Builder
 
 In Studio Pro version 10.5, a new, visual, way of constructing XPath constraints was introduced. This is called Visual Builder for database constraints. The default way to construct XPath constraints is to write XPath expressions, but you can change the default by checking **Enable the XPath Builder as the default XPath constraint editor**.
 

content/en/docs/refguide/modeling/pages/page/_index.md

@@ -183,12 +183,40 @@ It has the following features which are not available in **Structure mode**:
 * The widgets are shown as they will be on the page – for example two text widgets which are laid out vertically in structural mode may actually be laid out horizontally when the app is published, and this will be reflected in **Design mode**
 * The page layout can be seen for different device modes – for example phone or browser by clicking the appropriate device mode button:
 
-    {{< figure src="/attachments/refguide/modeling/pages/page/design-factor.png" alt="Show styles button" >}}
+    {{< figure src="/attachments/refguide/modeling/pages/page/design-factor.png" alt="Show styles button" class="image-border">}}
 
 * The widgets have design properties and CSS classes and styles applied to them so you can see what they will look like
 * Toggle showing conditionally-visible widgets in the top bar:
 
-    {{< figure src="/attachments/refguide/modeling/pages/page/conditional-visibility.jpg" alt="Show conditional visibility" >}}
+    {{< figure src="/attachments/refguide/modeling/pages/page/conditional-visibility.jpg" alt="Show conditional visibility" class="image-border">}}
+
+* **X-ray mode** to visualize the structure of a page
+
+#### 3.2.1 X-Ray Mode (Beta) {#x-ray-mode}
+
+{{% alert color="info" %}}
+**X-ray mode** is currently in beta. The feature is enabled by default on Mac and disabled by default on Windows. It can be enabled or disabled in **Preferences** > **New features**.
+
+When the feature is disabled, the button to toggle **X-ray mode** is not shown in the top bar and the keyboard shortcuts do not work.
+{{% /alert %}}
+
+Before this feature, you could either work in **Structure** mode and see a completely detailed view of your app in progress or **Design** mode which gave you a more simplified view of the app as your end-user might see it. 
+
+**X-ray mode** is a way to visualize certain structures of a page while in **Design mode**. It offers you a similar experience as **Design** mode, but you get more detailed information on structures and page elements. 
+
+When enabled, certain widgets appear bigger with an extra outline so they are easier to work with. **X-ray mode** affects structures such as **Container**, **Layout Grid**, and **Data View** widgets. These extra effects are removed when **X-ray mode** is turned off.
+
+**X-ray mode** can be enabled and disabled by clicking the button in the top bar from **Design** mode. It can also be enabled or disabled using these shortcuts:
+* Windows: <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>X</kbd>
+* Mac: <kbd>Cmd</kbd> + <kbd>Alt</kbd> + <kbd>X</kbd>
+
+Here is a page as shown in **Design mode** with **X-ray mode** disabled:
+
+{{< figure src="/attachments/refguide/modeling/pages/page/design-mode-no-x-ray.png" alt="Design mode with x-ray mode turned off" >}}
+
+Here is the same page with **X-ray mode** enabled:
+
+{{< figure src="/attachments/refguide/modeling/pages/page/design-mode-x-ray.png" alt="Design mode with x-ray mode turn on" >}}
 
 ## 4 Read More
 

content/en/docs/releasenotes/studio-pro/10/10.9.md

@@ -26,6 +26,8 @@ As **Structure mode** is not supported on Mac, we are enabling X-Ray mode on Mac
 
 On Windows, X-Ray mode can also be enabled in the **New features** section of **Preferences**. You can opt out of the beta by disabling the feature in **Preferences**. 
 
+For more information, see [X-Ray Mode](/refguide/page/#x-ray-mode).
+
 #### Session and Login Token Improvements
 
 We introduced authentication token support for applications, allowing users to stay logged in until their token expires.