Merge lp:~nick-dedekind/unity8/menu.width.fix into lp:unity8

[Nick Dedekind]

Fixed menu layout width calculations.

 * Are there any related MPs required for this MP to build/function as expected? Please list.
No

 * Did you perform an exploratory manual test run of your code change and any related functionality?
Yes

 * If you changed the packaging (debian), did you subscribe the ubuntu-unity team to this MP?
N/A

 * If you changed the UI, has there been a design review?
N/A

[Unity8 CI Bot (unity8-ci-bot)]

PASSED: Continuous integration, rev:2771
https://unity8-jenkins.ubuntu.com/job/lp-unity8-ci/2944/
Executed test runs:
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build/3841
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/test-0-autopkgtest/label=amd64,release=xenial+overlay,testname=qmluitests.sh/2234
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/test-0-autopkgtest/label=amd64,release=zesty,testname=qmluitests.sh/2234
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-0-fetch/3869
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=xenial+overlay/3712
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=xenial+overlay/3712/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=zesty/3712
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=zesty/3712/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=xenial+overlay/3712
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=xenial+overlay/3712/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=zesty/3712
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=zesty/3712/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=xenial+overlay/3712
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=xenial+overlay/3712/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=zesty/3712
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=zesty/3712/artifact/output/*zip*/output.zip

Click here to trigger a rebuild:
https://unity8-jenkins.ubuntu.com/job/lp-unity8-ci/2944/rebuild

review: Approve (continuous-integration)

[Albert Astals Cid (aacid)]

 * Did you perform an exploratory manual test run of the code change and any related functionality?
Yes

 * Did CI run pass? If not, please explain why.
Yes

review: Approve

[lp:~nick-dedekind/unity8/menu.width.fix]

2772. By Nick Dedekind on 2017-01-20

color fixes

2773. By Nick Dedekind on 2017-01-23

Auto scroll. Maximum height to bottom of screen

2774. By Nick Dedekind on 2017-01-23

Added overflow button

2775. By Nick Dedekind on 2017-01-23

enabled only when item enabled

=== modified file 'qml/ApplicationMenus/MenuPopup.qml'
--- qml/ApplicationMenus/MenuPopup.qml	2017-01-09 15:26:05 +0000
+++ qml/ApplicationMenus/MenuPopup.qml	2017-01-18 14:44:04 +0000
@@ -26,19 +26,7 @@
     objectName: "menu"
     backgroundColor: theme.palette.normal.overlay
 
-    property alias unityMenuModel: listView.model
-
-    readonly property real __ajustedMinimumHeight: {
-        if (listView.contentHeight > __minimumHeight) {
-            return units.gu(30);
-        }
-        return Math.max(listView.contentHeight, units.gu(2));
-    }
-
-    readonly property real __minimumWidth: units.gu(20)
-    readonly property real __minimumHeight: units.gu(30)
-    readonly property real __maximumWidth: Screen.width * 0.7
-    readonly property real __maximumHeight: Screen.height * 0.7
+    property alias unityMenuModel: repeater.model
 
     function show() {
         visible = true;
@@ -63,18 +51,23 @@
         d.dismissAll();
     }
 
-    implicitWidth: container.width
-    implicitHeight: MathUtils.clamp(listView.contentHeight, __ajustedMinimumHeight, __maximumHeight)
+    implicitWidth: focusScope.width
+    implicitHeight: focusScope.height
 
     MenuNavigator {
         id: d
         objectName: "d"
-        itemView: listView
+        itemView: repeater
 
         property Item currentItem: null
         property Item hoveredItem: null
         readonly property int currentIndex: currentItem ? currentItem.__ownIndex : -1
 
+        property real __minimumWidth: units.gu(20)
+        property real __maximumWidth: Screen.width * 0.7
+        property real __minimumHeight: units.gu(2)
+        property real __maximumHeight: Screen.height * 0.7
+
         signal dismissAll()
 
         onCurrentItemChanged: {
@@ -86,13 +79,26 @@
         }
 
         onSelect: {
-            currentItem = listView.itemAt(index);
+            currentItem = repeater.itemAt(index);
+            if (currentItem) {
+                if (currentItem.y < listView.contentY) {
+                    listView.contentY = currentItem.y;
+                } else if (currentItem.y + currentItem.height > listView.contentY + listView.height) {
+                    listView.contentY = currentItem.y + currentItem.height - listView.height;
+                }
+            }
         }
     }
 
+    MouseArea {
+        // Eat events.
+        anchors.fill: parent
+    }
+
     Item {
         id: focusScope
-        anchors.fill: parent
+        width: container.width
+        height: container.height
         focus: visible
 
         Keys.onUpPressed: d.selectPrevious(d.currentIndex)
@@ -108,17 +114,17 @@
             id: container
             objectName: "container"
 
-            width: listView.contentWidth
-            height: parent.height
+            height: MathUtils.clamp(listView.contentHeight, d.__minimumHeight, d.__maximumHeight)
+            width: menuColumn.width
             spacing: 0
 
-            // FIXME use ListView.header - tried but was flaky with positionViewAtIndex.
+            // Header - scroll up
             Item {
-                Layout.fillWidth: true;
-                Layout.maximumHeight: units.gu(3)
-                Layout.minimumHeight: units.gu(3)
+                Layout.fillWidth: true
+                height: units.gu(3)
                 visible: listView.contentHeight > root.height
                 enabled: !listView.atYBeginning
+                z: 1
 
                 Rectangle {
                     color: enabled ? theme.palette.normal.overlayText :
@@ -143,47 +149,35 @@
                 MouseArea {
                     anchors.fill: parent
                     onPressed: {
-                        var index = listView.indexAt(0, listView.contentY);
-                        listView.positionViewAtIndex(index-1, ListView.Beginning);
+                        var item = menuColumn.childAt(0, listView.contentY);
+                        if (item) {
+                            var previousItem = item;
+                            do {
+                                previousItem = repeater.itemAt(previousItem.__ownIndex-1);
+                                if (!previousItem) {
+                                    listView.contentY = 0;
+                                    return;
+                                }
+                            } while (previousItem.__isSeparator);
+
+                            listView.contentY = previousItem.y
+                        }
                     }
                 }
             }
 
-            ListView {
+            // Menu Items
+            Flickable {
                 id: listView
-                objectName: "listView"
+                clip: interactive
+
                 Layout.fillHeight: true
                 Layout.fillWidth: true
-                contentWidth: MathUtils.clamp(contentItem.childrenRect.width,
-                                              __minimumWidth,
-                                              __maximumWidth)
-
-                orientation: Qt.Vertical
-                interactive: contentHeight > height
-                clip: interactive
-                highlightFollowsCurrentItem: false
-
-                highlight: Rectangle {
-                    color: "transparent"
-                    border.width: units.dp(1)
-                    border.color: UbuntuColors.orange
-                    z: 1
-
-                    width: listView.width
-                    height:  d.currentItem ? d.currentItem.height : 0
-                    y:  d.currentItem ? d.currentItem.y : 0
-                    visible: d.currentItem
-                }
-
-                function itemAt(index) {
-                    if (index > count || index < 0) return null;
-                    currentIndex = index;
-                    return currentItem;
-                }
+                contentHeight: menuColumn.height
+                interactive: height < contentHeight
 
                 MouseArea {
-                    id: menuMouseArea
-                    anchors.fill: listView
+                    anchors.fill: parent
                     hoverEnabled: true
                     propagateComposedEvents: true // propogate events so we send clicks to children.
                     z: 1 // on top so we override any other hovers
@@ -195,7 +189,7 @@
 
                         if (!d.hoveredItem || !d.currentItem ||
                                 !d.hoveredItem.contains(Qt.point(pos.x - d.currentItem.x, pos.y - d.currentItem.y))) {
-                            d.hoveredItem = listView.itemAt(listView.indexAt(pos.x, pos.y));
+                            d.hoveredItem = menuColumn.childAt(pos.x, pos.y)
                             if (!d.hoveredItem || !d.hoveredItem.enabled)
                                 return false;
                             d.currentItem = d.hoveredItem;
@@ -216,89 +210,123 @@
                     }
                 }
 
-                delegate: Loader {
-                    id: loader
-                    objectName: root.objectName + "-item" + __ownIndex
-
-                    property int __ownIndex: index
-
-                    width: root.width
-                    enabled: model.isSeparator ? false : model.sensitive
-
-                    sourceComponent: {
-                        if (model.isSeparator) {
-                            return separatorComponent;
-                        }
-                        return menuItemComponent;
-                    }
-
-                    property Item popup: null
-
-                    Component {
-                        id: menuItemComponent
-                        MenuItem {
-                            id: menuItem
-                            menuData: model
-                            objectName: loader.objectName + "-actionItem"
-
-                            action.onTriggered: {
-                                d.currentItem = loader;
-
-                                if (hasSubmenu) {
-                                    if (!popup) {
-                                        var model = root.unityMenuModel.submenu(__ownIndex);
-                                        popup = submenuComponent.createObject(focusScope, {
-                                                                                  objectName: loader.objectName + "-",
-                                                                                  unityMenuModel: model,
-                                                                                  x: Qt.binding(function() { return root.width }),
-                                                                                  y: Qt.binding(function() { return loader.y })
-                                                                              });
-                                    } else if (popup) {
-                                        popup.visible = true;
-                                    }
-                                    popup.retreat.connect(function() {
-                                        popup.destroy();
-                                        popup = null;
-                                        menuItem.forceActiveFocus();
-                                    })
-                                } else {
-                                    root.unityMenuModel.activate(__ownIndex);
-                                }
-                            }
-
-                            Connections {
-                                target: d
-                                onCurrentIndexChanged: {
-                                    if (popup && d.currentIndex != __ownIndex) {
-                                        popup.visible = false;
-                                    }
-                                }
-                                onDismissAll: {
-                                    if (popup) {
-                                        popup.destroy();
-                                        popup = null;
-                                    }
-                                }
-                            }
-                        }
-                    }
-
-                    Component {
-                        id: separatorComponent
-                        ListItems.ThinDivider {
-                            objectName: loader.objectName + "-separator"
-                        }
-                    }
-                }
-            } // ListView
-
-            // FIXME use ListView.footer - tried but was flaky with positionViewAtIndex.
+                ColumnLayout {
+                    id: menuColumn
+                    spacing: 0
+
+                    width: MathUtils.clamp(implicitWidth, d.__minimumWidth, d.__maximumWidth)
+
+                    Repeater {
+                        id: repeater
+
+                        Loader {
+                            id: loader
+                            objectName: root.objectName + "-item" + __ownIndex
+
+                            property int __ownIndex: index
+                            property bool __isSeparator: model.isSeparator
+
+                            enabled: __isSeparator ? false : model.sensitive
+
+                            sourceComponent: {
+                                if (model.isSeparator) {
+                                    return separatorComponent;
+                                }
+                                return menuItemComponent;
+                            }
+
+                            property Item popup: null
+
+                            Layout.fillWidth: true
+
+                            Component {
+                                id: menuItemComponent
+                                MenuItem {
+                                    id: menuItem
+                                    menuData: model
+                                    objectName: loader.objectName + "-actionItem"
+
+                                    width: MathUtils.clamp(implicitWidth, d.__minimumWidth, d.__maximumWidth)
+
+                                    action.onTriggered: {
+                                        d.currentItem = loader;
+
+                                        if (hasSubmenu) {
+                                            if (!popup) {
+                                                var model = root.unityMenuModel.submenu(__ownIndex);
+                                                popup = submenuComponent.createObject(focusScope, {
+                                                                                          objectName: loader.objectName + "-",
+                                                                                          unityMenuModel: model,
+                                                                                          x: Qt.binding(function() { return root.width }),
+                                                                                          y: Qt.binding(function() {
+                                                                                              var dummy = listView.contentY; // force a recalc on contentY change.
+                                                                                              return mapToItem(container, 0, y).y;
+                                                                                          })
+                                                                                      });
+                                            } else if (popup) {
+                                                popup.visible = true;
+                                            }
+                                            popup.retreat.connect(function() {
+                                                popup.destroy();
+                                                popup = null;
+                                                menuItem.forceActiveFocus();
+                                            })
+                                        } else {
+                                            root.unityMenuModel.activate(__ownIndex);
+                                        }
+                                    }
+
+                                    Connections {
+                                        target: d
+                                        onCurrentIndexChanged: {
+                                            if (popup && d.currentIndex != __ownIndex) {
+                                                popup.visible = false;
+                                            }
+                                        }
+                                        onDismissAll: {
+                                            if (popup) {
+                                                popup.destroy();
+                                                popup = null;
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+
+                            Component {
+                                id: separatorComponent
+                                ListItems.ThinDivider {
+                                    objectName: loader.objectName + "-separator"
+                                    implicitHeight: units.dp(2)
+                                }
+                            }
+                        }
+
+                    }
+                }
+
+                // Highlight
+                Rectangle {
+                    color: "transparent"
+                    border.width: units.dp(1)
+                    border.color: UbuntuColors.orange
+                    z: 1
+
+                    width: listView.width
+                    height:  d.currentItem ? d.currentItem.height : 0
+                    y:  d.currentItem ? d.currentItem.y : 0
+                    visible: d.currentItem
+                }
+
+            } // Flickable
+
+            // Header - scroll down
             Item {
-                Layout.fillWidth: true;
-                Layout.maximumHeight: units.gu(3)
-                Layout.minimumHeight: units.gu(3)
+                Layout.fillWidth: true
+                height: units.gu(3)
                 visible: listView.contentHeight > root.height
                 enabled: !listView.atYEnd
+                z: 1
 
                 Rectangle {
                     color: enabled ? theme.palette.normal.overlayText :
@@ -323,8 +351,19 @@
                 MouseArea {
                     anchors.fill: parent
                     onPressed: {
-                        var index = listView.indexAt(0, listView.contentY);
-                        listView.positionViewAtIndex(index+1, ListView.Beginning);
+                        var item = menuColumn.childAt(0, listView.contentY + listView.height);
+                        if (item) {
+                            var nextItem = item;
+                            do {
+                                nextItem = repeater.itemAt(nextItem.__ownIndex+1);
+                                if (!nextItem) {
+                                    listView.contentY = listView.contentHeight - listView.height;
+                                    return;
+                                }
+                            } while (nextItem.__isSeparator);
+
+                            listView.contentY = nextItem.y - listView.height
+                        }
                     }
                 }
             }

=== modified file 'tests/qmltests/ApplicationMenuDataLoader.qml'
--- tests/qmltests/ApplicationMenuDataLoader.qml	2017-01-06 14:07:36 +0000
+++ tests/qmltests/ApplicationMenuDataLoader.qml	2017-01-18 14:44:04 +0000
@@ -10,6 +10,7 @@
 
     Connections {
         id: sMgrHandler
+        target: null
         onSurfaceCreated: {
             var fakeMenuPath = "/" + surface.persistentId.replace(/\W+/g, "");
 
@@ -25,21 +26,28 @@
         var data = [];
         if (root === undefined) root = true;
 
-        if (prefix === undefined) prefix = "menu"
-
         for (var i = 0; i < length; i++) {
 
+            var menuName = prefix;
+            if (menuName === undefined) {
+                var chars = Math.random() * 20;
+                menuName = "";
+                for (var x = 0; x < chars; x++) {
+                    menuName += String.fromCharCode((Math.random() * 26) + 65);
+                }
+            }
+
             var menuCode = String.fromCharCode(i+65);
 
             var isSeparator = !root && separatorInterval > 0 && ((i+1) % separatorInterval == 0);
             var row = {
                 "rowData": {                // 1
-                    "label": prefix + "&" + menuCode,
+                    "label": menuName + "&" + menuCode,
                     "sensitive": true,
                     "isSeparator": isSeparator,
                     "icon": "",
                     "ext": {},
-                    "action": prefix + menuCode,
+                    "action": menuName + menuCode,
                     "actionState": {},
                     "isCheck": false,
                     "isRadio": false,
@@ -49,7 +57,7 @@
             }
             var isSubmenu = root === undefined || root === true || (submenuInterval > 0 && ((i+1) % submenuInterval == 0));
             if (isSubmenu && !isSeparator && depth > 1) {
-                row["submenu"] = generateTestData(length, depth-1, submenuInterval, separatorInterval, prefix + menuCode + ".", false);
+                row["submenu"] = generateTestData(length, depth-1, submenuInterval, separatorInterval,prefix, false);
             }
             data[i] = row;
         }

=== modified file 'tests/qmltests/ApplicationMenus/tst_MenuBar.qml'
--- tests/qmltests/ApplicationMenus/tst_MenuBar.qml	2017-01-09 15:26:05 +0000
+++ tests/qmltests/ApplicationMenus/tst_MenuBar.qml	2017-01-18 14:44:04 +0000
@@ -65,7 +65,7 @@
 
             unityMenuModel: UnityMenuModel {
                 id: menuBackend
-                modelData: appMenuData.generateTestData(7,5,2,3,"menu")
+                modelData: appMenuData.generateTestData(17,5,2,3)
             }
         }
     }
@@ -83,12 +83,12 @@
 
         function init() {
             menuBar.dismiss();
-            menuBackend.modelData = appMenuData.generateTestData(5,5,2,3,"menu")
+            menuBackend.modelData = appMenuData.generateTestData(5,5,2,3)
             activatedSpy.clear();
         }
 
         function test_mouseNavigation() {
-            menuBackend.modelData = appMenuData.generateTestData(3,3,0,0,"menu");
+            menuBackend.modelData = appMenuData.generateTestData(3,3,0,0);
             wait(50) // wait for row to build
             var priv = findInvisibleChild(menuBar, "d");
 
@@ -114,7 +114,7 @@
         }
 
         function test_keyboardNavigation_RightKeySelectsNextMenuItem(data) {
-            menuBackend.modelData = appMenuData.generateTestData(3,3,0,0,"menu");
+            menuBackend.modelData = appMenuData.generateTestData(3,3,0,0);
             var priv = findInvisibleChild(menuBar, "d");
 
             var menuItem0 = findChild(menuBar, "menuBar-item0"); verify(menuItem0);
@@ -139,7 +139,7 @@
         }
 
         function test_keyboardNavigation_LeftKeySelectsPreviousMenuItem(data) {
-            menuBackend.modelData = appMenuData.generateTestData(3,3,0,0,"menu");
+            menuBackend.modelData = appMenuData.generateTestData(3,3,0,0);
             var priv = findInvisibleChild(menuBar, "d");
 
             var menuItem0 = findChild(menuBar, "menuBar-item0"); verify(menuItem0);

=== modified file 'tests/qmltests/ApplicationMenus/tst_MenuPopup.qml'
--- tests/qmltests/ApplicationMenus/tst_MenuPopup.qml	2017-01-09 15:26:05 +0000
+++ tests/qmltests/ApplicationMenus/tst_MenuPopup.qml	2017-01-18 14:44:04 +0000
@@ -1,4 +1,4 @@
-/*
+/*
  * Copyright (C) 2016 Canonical, Ltd.
  *
  * This program is free software; you can redistribute it and/or modify
@@ -28,8 +28,8 @@
 
 Item {
     id: root
-    width:  Math.max(units.gu(100), page.width + units.gu(6))
-    height:  Math.max(units.gu(50), page.height + units.gu(6))
+    width:  Math.max(units.gu(100), loader.width + units.gu(6))
+    height:  Math.max(units.gu(50), loader.height + units.gu(6))
 
     Binding {
         target: MouseTouchAdaptor
@@ -39,25 +39,37 @@
 
     ApplicationMenuDataLoader { id: appMenuData }
 
-    MenuPopup {
-        id: page
-
-        anchors {
-            left: parent.left
-            top: parent.top
-            leftMargin: units.gu(3)
-            topMargin: units.gu(3)
-        }
-
-        unityMenuModel: UnityMenuModel {
-            id: menuBackend
-            modelData: appMenuData.generateTestData(7,5,2,3,"menu")
+    Loader {
+        id: loader
+        sourceComponent: MenuPopup {
+            anchors {
+                left: parent ? parent.left : undefined
+                top: parent ? parent.top : undefined
+                leftMargin: units.gu(3)
+                topMargin: units.gu(3)
+            }
+
+            unityMenuModel: UnityMenuModel {
+                modelData: [{
+                        "rowData": {
+                            "label": "Short",
+                        }}, {
+                       "rowData": {
+                           "label": "This is a long menu item which tests width",
+                       }}
+                    ]
+            }
+
+            Binding {
+                target: activatedSpy
+                property: "target"
+                value: unityMenuModel
+            }
         }
     }
 
     SignalSpy {
         id: activatedSpy
-        target: menuBackend
         signalName: "activated"
     }
 
@@ -66,14 +78,20 @@
         name: "MenuPopup"
         when: windowShown
 
+        property var menu: loader.status === Loader.Ready ? loader.item : null
+
         function init() {
-            page.show();
+            loader.active = true;
+            menu.show();
         }
 
         function cleanup() {
-            page.reset();
+            menu.reset();
             wait(100); // let the page dismiss
             activatedSpy.clear();
+
+            loader.active = false;
+            tryCompare(loader, "item", null);
         }
 
         // visit and verify that all the backend menus have been created
@@ -90,6 +108,7 @@
                 // recurse into submenu
                 var submenu = rows[i]["submenu"];
                 if (submenu) {
+                    waitForRendering(menuItem);
                     mouseClick(menuItem, menuItem.width/2, menuItem.height/2);
                     tryCompare(menuPriv, "currentItem", menuItem);
 
@@ -113,15 +132,15 @@
         }
 
         function test_mouseNavigation(data) {
-            menuBackend.modelData = data.testData;
+            menu.unityMenuModel.modelData = data.testData;
 
-            recurseMenuConstruction(data.testData, page);
+            recurseMenuConstruction(data.testData, menu);
         }
 
         function test_checkableMenuTogglesOnClick() {
-            menuBackend.modelData = appMenuData.singleCheckable;
+            menu.unityMenuModel.modelData = appMenuData.singleCheckable;
 
-            var menuItem = findChild(page, "menu-item0-actionItem");
+            var menuItem = findChild(menu, "menu-item0-actionItem");
             verify(menuItem);
             compare(menuItem.action.checkable, true, "Menu item should be checkable");
             compare(menuItem.action.checked, false, "Menu item should not be checked");
@@ -132,13 +151,13 @@
         }
 
         function test_keyboardNavigation_DownKeySelectsAndOpensNextMenuItemAndRotates() {
-            menuBackend.modelData = appMenuData.generateTestData(3,3,0,0,"menu",false);
-
-            var item0 = findChild(page, "menu-item0"); verify(item0);
-            var item1 = findChild(page, "menu-item1"); verify(item1);
-            var item2 = findChild(page, "menu-item2"); verify(item2);
-
-            var priv = findInvisibleChild(page, "d");
+            menu.unityMenuModel.modelData = appMenuData.generateTestData(3,3,0,0,"menu",false);
+
+            var item0 = findChild(menu, "menu-item0"); verify(item0);
+            var item1 = findChild(menu, "menu-item1"); verify(item1);
+            var item2 = findChild(menu, "menu-item2"); verify(item2);
+
+            var priv = findInvisibleChild(menu, "d");
 
             keyClick(Qt.Key_Down, Qt.NoModifier);
             compare(priv.currentItem, item0, "CurrentItem should have moved to item 0");
@@ -154,13 +173,13 @@
         }
 
         function test_keyboardNavigation_UpKeySelectsAndOpensPreviousMenuItemAndRotates() {
-            menuBackend.modelData = appMenuData.generateTestData(3,3,0,0,"menu",false);
-
-            var item0 = findChild(page, "menu-item0"); verify(item0);
-            var item1 = findChild(page, "menu-item1"); verify(item1);
-            var item2 = findChild(page, "menu-item2"); verify(item2);
-
-            var priv = findInvisibleChild(page, "d");
+            menu.unityMenuModel.modelData = appMenuData.generateTestData(3,3,0,0,"menu",false);
+
+            var item0 = findChild(menu, "menu-item0"); verify(item0);
+            var item1 = findChild(menu, "menu-item1"); verify(item1);
+            var item2 = findChild(menu, "menu-item2"); verify(item2);
+
+            var priv = findInvisibleChild(menu, "d");
 
             keyClick(Qt.Key_Down, Qt.NoModifier);
             compare(priv.currentItem, item0, "CurrentItem should have moved to item 2");
@@ -176,17 +195,17 @@
         }
 
         function test_keyboardNavigation_RightKeyEntersSubMenu() {
-            menuBackend.modelData = appMenuData.generateTestData(3,3,1,0,"menu",false);
-
-            var menuItem = findChild(page, "menu-item0");
-
-            var priv = findInvisibleChild(page, "d");
+            menu.unityMenuModel.modelData = appMenuData.generateTestData(3,3,1,0,"menu",false);
+
+            var menuItem = findChild(menu, "menu-item0");
+
+            var priv = findInvisibleChild(menu, "d");
             priv.currentItem = menuItem;
 
             keyClick(Qt.Key_Right, Qt.NoModifier);
             tryCompareFunction(function() { return menuItem.popup !== null && menuItem.popup.visible }, true);
 
-            var submenu0 = findChild(page, "menu-item0-menu"); verify(submenu0);
+            var submenu0 = findChild(menu, "menu-item0-menu"); verify(submenu0);
             var submenu0item0 = findChild(submenu0, "menu-item0-menu-item0"); verify(submenu0item0);
 
             var submenu0Priv = findInvisibleChild(submenu0, "d"); verify(submenu0Priv);
@@ -194,14 +213,106 @@
         }
 
         function test_keyboardNavigation_LeftKeyClosesSubMenu() {
-            menuBackend.modelData = appMenuData.generateTestData(3,3,1,0,"menu",false);
+            menu.unityMenuModel.modelData = appMenuData.generateTestData(3,3,1,0,"menu",false);
 
-            var menuItem = findChild(page, "menu-item0"); verify(menuItem);
+            var menuItem = findChild(menu, "menu-item0"); verify(menuItem);
             mouseClick(menuItem, menuItem.width/2, menuItem.height/2);
             tryCompareFunction(function() { return menuItem.popup !== null && menuItem.popup.visible }, true);
 
             keyClick(Qt.Key_Left, Qt.NoModifier);
             tryCompareFunction(function() { return menuItem.popup !== null && menuItem.popup.visible }, false);
         }
+
+        function test_differentSizes() {
+            var differentSizesMenu = [{
+                "rowData": { "label": "Short" }}, {
+                "rowData": { "label": "This is a long menu item which tests width" }
+            }];
+
+            menu.unityMenuModel.modelData = differentSizesMenu;
+
+            waitForRendering(menu);
+            var longWidth = menu.width;
+            differentSizesMenu.pop();
+            menu.unityMenuModel.modelData = differentSizesMenu;
+
+            waitForRendering(menu);
+            verify(menu.width < longWidth);
+        }
+
+        function test_minimumWidth() {
+            var shortMenu = [{
+                "rowData": { "label": "Short" }
+            }];
+            menu.unityMenuModel.modelData = shortMenu;
+
+            var priv = findInvisibleChild(menu, "d");
+            priv.__minimumWidth = 0;
+            priv.__maximumWidth = 1000;
+            tryCompareFunction(function() { return menu.width > priv.__minimumWidth; }, true);
+
+            priv.__minimumWidth = 300;
+            tryCompare(menu, "width", priv.__minimumWidth);
+        }
+
+        function test_maximumWidth() {
+            var longMenu = [{
+                "rowData": { "label": "This is a long menu item which tests width" }
+            }];
+
+            var priv = findInvisibleChild(menu, "d");
+            priv.__minimumWidth = 0;
+            priv.__maximumWidth = 100;
+
+            menu.unityMenuModel.modelData = longMenu;
+            tryCompare(menu, "width", priv.__maximumWidth);
+
+            priv.__maximumWidth = 200;
+            tryCompare(menu, "width", priv.__maximumWidth);
+
+            priv.__maximumWidth = 1200;
+            tryCompareFunction(function() { return menu.width < priv.__maximumWidth; }, true);
+        }
+
+        function test_minimumHeight() {
+            var shortMenu = [{
+                "rowData": { "label": "menu1" }
+            }];
+            menu.unityMenuModel.modelData = shortMenu;
+
+            var priv = findInvisibleChild(menu, "d");
+            priv.__minimumHeight = 0;
+            priv.__maximumHeight = 1000;
+            tryCompareFunction(function() { return menu.height > priv.__minimumHeight; }, true);
+
+            priv.__minimumHeight = 300;
+            tryCompare(menu, "height", priv.__minimumHeight);
+        }
+
+        function test_maximumHeight() {
+            var shortMenu = [{
+                "rowData": { "label": "menu1" }}, {
+                "rowData": { "label": "menu2" }}, {
+                "rowData": { "label": "menu3" }}, {
+                "rowData": { "label": "menu4" }}, {
+                "rowData": { "label": "menu5" }}, {
+                "rowData": { "label": "menu6" }}, {
+                "rowData": { "label": "menu7" }}, {
+                "rowData": { "label": "menu8" }}, {
+                "rowData": { "label": "menu9" }
+            }];
+            menu.unityMenuModel.modelData = shortMenu;
+
+            var priv = findInvisibleChild(menu, "d");
+            priv.__minimumHeight = 0;
+            priv.__maximumHeight = 100;
+            tryCompare(menu, "height", priv.__maximumHeight);
+
+            priv.__maximumHeight = 200;
+            tryCompare(menu, "height", priv.__maximumHeight);
+
+            priv.__maximumHeight = 1200;
+            tryCompareFunction(function() { return menu.height < priv.__maximumHeight; }, true);
+        }
     }
 }