Fix rdb keypaths and focus scrolling (#455)

* Fix focus scrolling to work properly the first time even if all levels were collapsed * update to RTA v2.0 beta 11 * Update absolute key path to properly be able to dig into ArrayGrids and use `#` before findNode keys * expand focused node for easier access to its children Co-authored-by: Brian Leighty <[email protected]> Co-authored-by: Bronley Plumb <[email protected]>
rokucommunity · Jan 9, 2023 · 0ed210a · 0ed210a
1 parent 0270516
commit 0ed210a
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 20 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -71,7 +71,7 @@
         "pretty-bytes": "^5.6.0",
         "roku-debug": "^0.17.3",
         "roku-deploy": "^3.9.2",
-        "roku-test-automation": "^2.0.0-beta.9",
+        "roku-test-automation": "^2.0.0-beta.11",
         "semver": "^7.1.3",
         "source-map": "^0.7.3",
         "thenby": "^1.3.4",

diff --git a/src/viewProviders/BaseRdbViewProvider.ts b/src/viewProviders/BaseRdbViewProvider.ts
@@ -15,7 +15,7 @@ export abstract class BaseRdbViewProvider extends BaseWebviewViewProvider {
         'getNodesInfo',
         'hasFocus',
         'isInFocusChain',
-        'observeField',
+        'onFieldChangeOnce',
         'readRegistry',
         'setValue',
         'writeRegistry',

diff --git a/webviews/src/views/SceneGraphInspectorView/NodeBranchPage.svelte b/webviews/src/views/SceneGraphInspectorView/NodeBranchPage.svelte
@@ -29,18 +29,25 @@
     let selected = false;
     export let focusedNode = -1;
     $: {
+        // If we are the focused node then we want to scroll down to this node
         if (focusedNode !== -1 && nodeTree.ref === focusedNode) {
+            // We need to expand all the parents before we can calculate how far we need to scroll down
+            dispatch('childExpanded');
             selected = true;
 
-            if (self) {
-                const rect = self.getBoundingClientRect()
-                document.getElementById('container').scrollTo({
-                    left: rect.left,
-                    top: rect.top - 90,
-                    behavior: 'smooth'
-                });
-            }
-            dispatch('childExpanded');
+            // Go ahead and expand us as well to speed up digging into children if desired
+            expanded = true
+
+            setTimeout(() => {
+                if (self) {
+                    const rect = self.getBoundingClientRect()
+                    document.getElementById('container').scrollTo({
+                        left: rect.left,
+                        top: rect.top - 90,
+                        behavior: 'smooth'
+                    });
+                }
+            }, 0);
         } else {
             selected = false;
         }

diff --git a/webviews/src/views/SceneGraphInspectorView/NodeDetailPage.svelte b/webviews/src/views/SceneGraphInspectorView/NodeDetailPage.svelte
@@ -17,8 +17,24 @@
         let nodeTree = inspectNodeNodeTree;
         if (inspectNodeNodeTree) {
             while (nodeTree) {
-                if (nodeTree.id) {
-                    absoluteKeyPathParts.unshift(nodeTree.id);
+                if (nodeTree.subtype === 'RowListItem') {
+                    // If we encounter a RowListItem then we know we need to modify the keypath structure
+                    const position = absoluteKeyPathParts.shift();
+                    for (const child of nodeTree.children) {
+                        if (child.position === position) {
+                            if (child.subtype === 'MarkupGrid') {
+                                absoluteKeyPathParts.unshift('items');
+                            } else if (child.subtype === 'Group') {
+                                absoluteKeyPathParts.unshift('title');
+                            } else {
+                                console.log('Encountered unexpected subtype ' + child.subtype);
+                            }
+                            break;
+                        }
+                    }
+                    absoluteKeyPathParts.unshift(nodeTree.position);
+                } else if (nodeTree.id) {
+                    absoluteKeyPathParts.unshift('#' + nodeTree.id);
                 } else if (nodeTree.position >= 0) {
                     absoluteKeyPathParts.unshift(nodeTree.position);
                 }