QmlDesigner: Autoexpand material browser sections on search

Also refactors ensuring visibility of selected item as the old way
broke when searching.

Fixes: QDS-9109
Change-Id: I87e45ff04a32e4de0adb7029cdfa47b058fa0f61
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>

share/qtcreator/qmldesigner/materialBrowserQmlSource/MaterialBrowser.qml

@@ -257,19 +257,68 @@ Item {
 
     function ensureVisible(yPos, itemHeight)
     {
-        if (yPos < 0) {
+        let currentY = contentYBehavior.targetValue && scrollViewAnim.running
-            let adjustedY = scrollView.contentY + yPos
+            ? contentYBehavior.targetValue : scrollView.contentY
-            if (adjustedY < itemHeight)
+
+        if (currentY > yPos) {
+            if (yPos < itemHeight)
                 scrollView.contentY = 0
             else
-                scrollView.contentY = adjustedY
+                scrollView.contentY = yPos
-        } else if (yPos + itemHeight > scrollView.height) {
+            return true
-            let adjustedY = scrollView.contentY + yPos + itemHeight - scrollView.height + 8
+        } else {
-            if (scrollView.contentHeight - adjustedY - scrollView.height < itemHeight)
+            let adjustedY = yPos + itemHeight - scrollView.height + 8
-                scrollView.contentY = scrollView.contentHeight - scrollView.height
+            if (currentY < adjustedY) {
-            else
+                if (scrollView.contentHeight - scrollView.height < adjustedY )
-                scrollView.contentY = adjustedY
+                    scrollView.contentY = scrollView.contentHeight - scrollView.height
+                else
+                    scrollView.contentY = adjustedY
+                return true
+            }
         }
+
+        return false
+    }
+
+    function ensureSelectedVisible()
+    {
+        if (rootView.materialSectionFocused && materialsSection.expanded && root.currMaterialItem
+                && materialBrowserModel.isVisible(materialBrowserModel.selectedIndex)) {
+            return ensureVisible(root.currMaterialItem.mapToItem(scrollView.contentItem, 0, 0).y,
+                                 root.currMaterialItem.height)
+        } else if (!rootView.materialSectionFocused && texturesSection.expanded) {
+            let currItem = texturesRepeater.itemAt(materialBrowserTexturesModel.selectedIndex)
+            if (currItem && materialBrowserTexturesModel.isVisible(materialBrowserTexturesModel.selectedIndex))
+                return ensureVisible(currItem.mapToItem(scrollView.contentItem, 0, 0).y, currItem.height)
+        } else {
+            return ensureVisible(0, 90)
+        }
+    }
+
+    Timer {
+        id: ensureTimer
+        interval: 20
+        repeat: true
+        triggeredOnStart: true
+
+        onTriggered: {
+            // Redo until ensuring didn't change things
+            if (!root.ensureSelectedVisible()) {
+                stop()
+                interval = 20
+                triggeredOnStart = true
+            }
+        }
+    }
+
+    function startDelayedEnsureTimer(delay)
+    {
+        // Ensuring visibility immediately in some cases like before new search results are rendered
+        // causes mapToItem return incorrect values, leading to undesirable flicker,
+        // so delay ensuring visibility a bit.
+        ensureTimer.interval = delay
+        ensureTimer.triggeredOnStart = false
+        ensureTimer.restart()
     }
 
     Connections {
@@ -283,10 +332,12 @@ Item {
 
             root.currMaterialItem = materialRepeater.itemAt(materialBrowserModel.selectedIndex);
 
-            if (materialsSection.expanded) {
+            ensureTimer.start()
-                ensureVisible(root.currMaterialItem.mapToItem(scrollView, 0, 0).y,
+        }
-                              root.currMaterialItem.height)
+
-            }
+        function onIsEmptyChanged()
+        {
+            ensureTimer.start()
         }
     }
 
@@ -295,10 +346,12 @@ Item {
 
         function onSelectedIndexChanged()
         {
-            if (texturesSection.expanded) {
+            ensureTimer.start()
-                let currItem = texturesRepeater.itemAt(materialBrowserTexturesModel.selectedIndex)
+        }
-                ensureVisible(currItem.mapToItem(scrollView, 0, 0).y, currItem.height)
+
-            }
+        function onIsEmptyChanged()
+        {
+            ensureTimer.start()
         }
     }
 
@@ -307,13 +360,7 @@ Item {
 
         function onMaterialSectionFocusedChanged()
         {
-            if (rootView.materialSectionFocused && materialsSection.expanded) {
+            ensureTimer.start()
-                ensureVisible(root.currMaterialItem.mapToItem(scrollView, 0, 0).y,
-                              root.currMaterialItem.height)
-            } else if (!rootView.materialSectionFocused && texturesSection.expanded) {
-                let currItem = texturesRepeater.itemAt(materialBrowserTexturesModel.selectedIndex)
-                ensureVisible(currItem.mapToItem(scrollView, 0, 0).y, currItem.height)
-            }
         }
     }
 
@@ -348,7 +395,26 @@ Item {
                     width: parent.width
                     style: StudioTheme.Values.searchControlStyle
 
+                    property string previousSearchText: ""
+                    property bool materialsExpanded: true
+                    property bool texturesExpanded: true
+
                     onSearchChanged: (searchText) => {
+                        if (searchText !== "") {
+                            if (previousSearchText === "") {
+                                materialsExpanded = materialsSection.expanded
+                                texturesExpanded = texturesSection.expanded
+                            }
+                            materialsSection.expanded = true
+                            texturesSection.expanded = true
+                        } else if (previousSearchText !== "") {
+                            materialsSection.expanded = materialsExpanded
+                            texturesSection.expanded = texturesExpanded
+                        }
+                        previousSearchText = searchText
+
+                        root.startDelayedEnsureTimer(50)
+
                         rootView.handleSearchFilterChanged(searchText)
                     }
                 }
@@ -409,7 +475,11 @@ Item {
             interactive: !ctxMenu.opened && !ctxMenuTextures.opened && !rootView.isDragging
 
             Behavior on contentY {
-                PropertyAnimation { easing.type: Easing.InOutQuad }
+                id: contentYBehavior
+                PropertyAnimation {
+                    id: scrollViewAnim
+                    easing.type: Easing.InOutQuad
+                }
             }
 
             Column {
@@ -438,6 +508,13 @@ Item {
                             rootView.acceptBundleMaterialDrop()
                         }
 
+                        onExpandedChanged: {
+                            if (!expanded) {
+                                root.startDelayedEnsureTimer(300) // wait for section collapse animation
+                                rootView.focusMaterialSection(false)
+                            }
+                        }
+
                         Grid {
                             id: gridMaterials
 
@@ -515,6 +592,13 @@ Item {
                             rootView.acceptBundleTextureDrop()
                         }
 
+                        onExpandedChanged: {
+                            if (!expanded) {
+                                root.startDelayedEnsureTimer(300) // wait for section collapse animation
+                                rootView.focusMaterialSection(true)
+                            }
+                        }
+
                         Grid {
                             id: gridTextures