feat: add infobox for elements at snapshotMaxDepth

app/common/public/locales/en/translation.json

@@ -133,6 +133,7 @@
   "contextDropdownInfo": "Multiple contexts detected; certain elements might only be accessible after switching to a different context. Note that webview inspection in Appium Inspector is less accurate than the DevTools of Chrome or Safari. For more information, see:",
   "idAutocompletionCanBeDisabled": "The requested id selector does not have a package name prefix. This Appium session has package name autocompletion enabled, which may be the reason why no elements were found. To disable this behavior, relaunch this session with the capability 'appium:disableIdLocatorAutocompletion' set to 'true'.",
   "missingAutomationNameForStrategies": "Additional locator strategies may be available. To view them, add the capability 'appium:automationName' when launching the session. Note that this capability is mandatory in Appium 2.",
+  "snapshotMaxDepthReached": "This element is located at the maximum source depth {{selectedElementDepth}}, therefore its child elements (if any) are not shown. To reveal them, change the 'snapshotMaxDepth' setting to a value greater than {{selectedElementDepth}}. Check your driver documentation for the maximum supported value.",
   "Tap": "Tap",
   "Gathering initial app source…": "Gathering initial app source…",
   "couldNotObtainSource": "Could not obtain source: {{errorMsg}}",

app/common/renderer/components/Inspector/Inspector.module.css

@@ -389,8 +389,7 @@
   width: 350px;
 }
 
-.elementActions {
-  margin-bottom: 20px;
+.selectedElemActions {
   gap: 8px;
 }
 
@@ -423,7 +422,7 @@
   margin-right: -12px;
 }
 
-.selectedElemNotInteractableAlertRow {
+.selectedElemInfoMessage {
   justify-content: center;
 }
 

app/common/renderer/components/Inspector/SelectedElement.jsx

@@ -6,7 +6,7 @@ import {
   LoadingOutlined,
   SendOutlined,
 } from '@ant-design/icons';
-import {Alert, Button, Col, Input, Row, Spin, Table, Tooltip} from 'antd';
+import {Alert, Button, Col, Input, Row, Space, Spin, Table, Tooltip} from 'antd';
 import _ from 'lodash';
 import React, {useRef} from 'react';
 
@@ -29,15 +29,34 @@ const SelectedElement = (props) => {
     isFindingElementsTimes,
     selectedElement,
     selectedElementId,
+    selectedElementPath,
     elementInteractionsNotAvailable,
     selectedElementSearchInProgress,
+    sessionSettings,
     t,
   } = props;
 
   const sendKeys = useRef();
 
   const isDisabled = selectedElementSearchInProgress || isFindingElementsTimes;
 
+  const showSnapshotMaxDepthReachedMessage = () => {
+    const selectedElementDepth = selectedElementPath.split('.').length;
+    if (selectedElementDepth === sessionSettings.snapshotMaxDepth) {
+      return (
+        <Row type={ROW.FLEX} gutter={10} className={styles.selectedElemInfoMessage}>
+          <Col>
+            <Alert
+              type={ALERT.INFO}
+              message={t('snapshotMaxDepthReached', {selectedElementDepth})}
+              showIcon
+            />
+          </Col>
+        </Row>
+      );
+    }
+  };
+
   const selectedElementTableCell = (text, copyToClipBoard) => {
     if (copyToClipBoard) {
       return (
@@ -158,15 +177,16 @@ const SelectedElement = (props) => {
   }
 
   return (
-    <div>
+    <Space className={styles.spaceContainer} direction="vertical" size="middle">
+      {showSnapshotMaxDepthReachedMessage()}
       {elementInteractionsNotAvailable && (
-        <Row type={ROW.FLEX} gutter={10} className={styles.selectedElemNotInteractableAlertRow}>
+        <Row type={ROW.FLEX} gutter={10} className={styles.selectedElemInfoMessage}>
           <Col>
             <Alert type={ALERT.INFO} message={t('interactionsNotAvailable')} showIcon />
           </Col>
         </Row>
       )}
-      <Row justify="center" type={ROW.FLEX} align="middle" className={styles.elementActions}>
+      <Row justify="center" type={ROW.FLEX} align="middle" className={styles.selectedElemActions}>
         <Tooltip title={t('Tap')}>
           <Button
             disabled={isDisabled}
@@ -238,12 +258,8 @@ const SelectedElement = (props) => {
           </Spin>
         </Row>
       )}
-      <br />
       {currentContext === NATIVE_APP && showXpathWarning && (
-        <div>
-          <Alert message={t('usingXPathNotRecommended')} type={ALERT.WARNING} showIcon />
-          <br />
-        </div>
+        <Alert message={t('usingXPathNotRecommended')} type={ALERT.WARNING} showIcon />
       )}
       {dataSource.length > 0 && (
         <Row className={styles.selectedElemContentRow}>
@@ -256,7 +272,7 @@ const SelectedElement = (props) => {
           />
         </Row>
       )}
-    </div>
+    </Space>
   );
 };