1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/components/tabview/test/browser_tabview_expander.js Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,236 @@
1.4 +/* Any copyright is dedicated to the Public Domain.
1.5 + http://creativecommons.org/publicdomain/zero/1.0/ */
1.6 +
1.7 +function test() {
1.8 + waitForExplicitFinish();
1.9 + requestLongerTimeout(2);
1.10 + newWindowWithTabView(onTabViewWindowLoaded);
1.11 +}
1.12 +
1.13 +function onTabViewWindowLoaded(win) {
1.14 + ok(win.TabView.isVisible(), "Tab View is visible");
1.15 +
1.16 + let contentWindow = win.document.getElementById("tab-view").contentWindow;
1.17 + let [originalTab] = win.gBrowser.visibleTabs;
1.18 + let currentGroup = contentWindow.GroupItems.getActiveGroupItem();
1.19 +
1.20 + // let's create a group small enough to get stacked
1.21 + let group = new contentWindow.GroupItem([], {
1.22 + immediately: true,
1.23 + bounds: {left: 20, top: 300, width: 400, height: 400}
1.24 + });
1.25 +
1.26 + let expander = contentWindow.iQ(group.container).find(".stackExpander");
1.27 + ok("length" in expander && expander.length == 1, "The group has an expander.");
1.28 +
1.29 + // procreate!
1.30 + contentWindow.UI.setActive(group);
1.31 + for (var i=0; i<7; i++) {
1.32 + win.gBrowser.loadOneTab('http://example.com#' + i, {inBackground: true});
1.33 + }
1.34 + let children = group.getChildren();
1.35 +
1.36 + // Wait until they all update because, once updated, they will notice that they
1.37 + // don't have favicons and this will change their styling at some unknown time.
1.38 + afterAllTabItemsUpdated(function() {
1.39 + ok(!group.shouldStack(group._children.length), "The group should not stack.");
1.40 + is(expander[0].style.display, "none", "The expander is hidden.");
1.41 +
1.42 + // now resize the group down.
1.43 + group.setSize(100, 100, true);
1.44 +
1.45 + ok(group.shouldStack(group._children.length), "The group should stack.");
1.46 + isnot(expander[0].style.display, "none", "The expander is now visible!");
1.47 + let expanderBounds = expander.bounds();
1.48 + ok(group.getBounds().contains(expanderBounds), "The expander lies in the group.");
1.49 + let stackCenter = children[0].getBounds().center();
1.50 + ok(stackCenter.y < expanderBounds.center().y, "The expander is below the stack.");
1.51 +
1.52 + // STAGE 1:
1.53 + // Here, we just expand the group, click elsewhere, and make sure
1.54 + // it collapsed.
1.55 + let stage1expanded = function() {
1.56 + group.removeSubscriber("expanded", stage1expanded);
1.57 +
1.58 + ok(group.expanded, "The group is now expanded.");
1.59 + is(expander[0].style.display, "none", "The expander is hidden!");
1.60 +
1.61 + let overlay = contentWindow.document.getElementById("expandedTray");
1.62 + ok(overlay, "The expanded tray exists.");
1.63 + let $overlay = contentWindow.iQ(overlay);
1.64 +
1.65 + group.addSubscriber("collapsed", stage1collapsed);
1.66 + // null type means "click", for some reason...
1.67 + EventUtils.synthesizeMouse(contentWindow.document.body, 10, $overlay.bounds().bottom + 5,
1.68 + {type: null}, contentWindow);
1.69 + };
1.70 +
1.71 + let stage1collapsed = function() {
1.72 + group.removeSubscriber("collapsed", stage1collapsed);
1.73 + ok(!group.expanded, "The group is no longer expanded.");
1.74 + isnot(expander[0].style.display, "none", "The expander is visible!");
1.75 + let expanderBounds = expander.bounds();
1.76 + ok(group.getBounds().contains(expanderBounds), "The expander still lies in the group.");
1.77 + let stackCenter = children[0].getBounds().center();
1.78 + ok(stackCenter.y < expanderBounds.center().y, "The expander is below the stack.");
1.79 +
1.80 + // now, try opening it up again.
1.81 + group.addSubscriber("expanded", stage2expanded);
1.82 + EventUtils.sendMouseEvent({ type: "click" }, expander[0], contentWindow);
1.83 + };
1.84 +
1.85 + // STAGE 2:
1.86 + // Now make sure every child of the group shows up within this "tray", and
1.87 + // click on one of them and make sure we go into the tab and the tray collapses.
1.88 + let stage2expanded = function() {
1.89 + group.removeSubscriber("expanded", stage2expanded);
1.90 +
1.91 + ok(group.expanded, "The group is now expanded.");
1.92 + is(expander[0].style.display, "none", "The expander is hidden!");
1.93 +
1.94 + let overlay = contentWindow.document.getElementById("expandedTray");
1.95 + ok(overlay, "The expanded tray exists.");
1.96 + let $overlay = contentWindow.iQ(overlay);
1.97 + let overlayBounds = $overlay.bounds();
1.98 +
1.99 + children.forEach(function(child, i) {
1.100 + ok(overlayBounds.contains(child.getBounds()), "Child " + i + " is in the overlay");
1.101 + });
1.102 +
1.103 + win.addEventListener("tabviewhidden", stage2hidden, false);
1.104 + // again, null type means "click", for some reason...
1.105 + EventUtils.synthesizeMouse(children[1].container, 2, 2, {type: null}, contentWindow);
1.106 + };
1.107 +
1.108 + let stage2hidden = function() {
1.109 + win.removeEventListener("tabviewhidden", stage2hidden, false);
1.110 +
1.111 + is(win.gBrowser.selectedTab, children[1].tab, "We clicked on the second child.");
1.112 +
1.113 + win.addEventListener("tabviewshown", stage2shown, false);
1.114 + win.TabView.toggle();
1.115 + };
1.116 +
1.117 + let stage2shown = function() {
1.118 + win.removeEventListener("tabviewshown", stage2shown, false);
1.119 + ok(!group.expanded, "The group is not expanded.");
1.120 + isnot(expander[0].style.display, "none", "The expander is visible!");
1.121 + let expanderBounds = expander.bounds();
1.122 + ok(group.getBounds().contains(expanderBounds), "The expander still lies in the group.");
1.123 + let stackCenter = children[0].getBounds().center();
1.124 + ok(stackCenter.y < expanderBounds.center().y, "The expander is below the stack.");
1.125 +
1.126 + is(group.getTopChild(), children[1], "The top child in the stack is the second tab item");
1.127 + let topChildzIndex = children[1].zIndex;
1.128 + // the second tab item should have the largest z-index.
1.129 + // only check the first 6 tabs as the stack only contains 6 tab items.
1.130 + for (let i = 0; i < 6; i++) {
1.131 + if (i != 1)
1.132 + ok(children[i].zIndex < topChildzIndex,
1.133 + "The child[" + i + "] has smaller zIndex than second child");
1.134 + }
1.135 +
1.136 + // okay, expand this group one last time
1.137 + group.addSubscriber("expanded", stage3expanded);
1.138 + EventUtils.sendMouseEvent({ type: "click" }, expander[0], contentWindow);
1.139 + }
1.140 +
1.141 + // STAGE 3:
1.142 + // Ensure that stack still shows the same top item after a expand and a collapse.
1.143 + let stage3expanded = function() {
1.144 + group.removeSubscriber("expanded", stage3expanded);
1.145 +
1.146 + ok(group.expanded, "The group is now expanded.");
1.147 + let overlay = contentWindow.document.getElementById("expandedTray");
1.148 + let $overlay = contentWindow.iQ(overlay);
1.149 +
1.150 + group.addSubscriber("collapsed", stage3collapsed);
1.151 + // null type means "click", for some reason...
1.152 + EventUtils.synthesizeMouse(contentWindow.document.body, 10, $overlay.bounds().bottom + 5,
1.153 + {type: null}, contentWindow);
1.154 + };
1.155 +
1.156 + let stage3collapsed = function() {
1.157 + group.removeSubscriber("collapsed", stage3collapsed);
1.158 +
1.159 + ok(!group.expanded, "The group is no longer expanded.");
1.160 + isnot(expander[0].style.display, "none", "The expander is visible!");
1.161 +
1.162 + let stackCenter = children[0].getBounds().center();
1.163 + ok(stackCenter.y < expanderBounds.center().y, "The expander is below the stack.");
1.164 +
1.165 + is(group.getTopChild(), children[1],
1.166 + "The top child in the stack is still the second tab item");
1.167 + let topChildzIndex = children[1].zIndex;
1.168 + // the second tab item should have the largest z-index.
1.169 + // only check the first 6 tabs as the stack only contains 6 tab items.
1.170 + for (let i = 0; i < 6; i++) {
1.171 + if (i != 1)
1.172 + ok(children[i].zIndex < topChildzIndex,
1.173 + "The child[" + i + "] has smaller zIndex than second dhild after a collapse.");
1.174 + }
1.175 +
1.176 + // In preparation for Stage 4, find that original tab and make it the active tab.
1.177 + let originalTabItem = originalTab._tabViewTabItem;
1.178 + contentWindow.UI.setActive(originalTabItem);
1.179 +
1.180 + // now, try opening it up again.
1.181 + group.addSubscriber("expanded", stage4expanded);
1.182 + EventUtils.sendMouseEvent({ type: "click" }, expander[0], contentWindow);
1.183 + };
1.184 +
1.185 + // STAGE 4:
1.186 + // Activate another tab not in this group, expand our stacked group, but then
1.187 + // enter Panorama (i.e., zoom into this other group), and make sure we can go to
1.188 + // it and that the tray gets collapsed.
1.189 + let stage4expanded = function() {
1.190 + group.removeSubscriber("expanded", stage4expanded);
1.191 +
1.192 + ok(group.expanded, "The group is now expanded.");
1.193 + is(expander[0].style.display, "none", "The expander is hidden!");
1.194 + let overlay = contentWindow.document.getElementById("expandedTray");
1.195 + ok(overlay, "The expanded tray exists.");
1.196 +
1.197 + let activeTab = contentWindow.UI.getActiveTab();
1.198 + ok(activeTab, "There is an active tab.");
1.199 + let originalTabItem = originalTab._tabViewTabItem;
1.200 +
1.201 + isnot(activeTab, originalTabItem, "But it's not what it was a moment ago.");
1.202 + let someChildIsActive = group.getChildren().some(function(child)
1.203 + child == activeTab);
1.204 + ok(someChildIsActive, "Now one of the children in the group is active.");
1.205 +
1.206 + // now activate Panorama...
1.207 + win.addEventListener("tabviewhidden", stage4hidden, false);
1.208 + win.TabView.toggle();
1.209 + };
1.210 +
1.211 + let stage4hidden = function() {
1.212 + win.removeEventListener("tabviewhidden", stage4hidden, false);
1.213 +
1.214 + isnot(win.gBrowser.selectedTab, originalTab, "We did not enter the original tab.");
1.215 +
1.216 + let someChildIsSelected = group.getChildren().some(function(child)
1.217 + child.tab == win.gBrowser.selectedTab);
1.218 + ok(someChildIsSelected, "Instead we're in one of the stack's children.");
1.219 +
1.220 + win.addEventListener("tabviewshown", stage4shown, false);
1.221 + win.TabView.toggle();
1.222 + };
1.223 +
1.224 + let stage4shown = function() {
1.225 + win.removeEventListener("tabviewshown", stage4shown, false);
1.226 +
1.227 + let overlay = contentWindow.document.getElementById("expandedTray");
1.228 + ok(!group.expanded, "The group is no longer expanded.");
1.229 + isnot(expander[0].style.display, "none", "The expander is visible!");
1.230 +
1.231 + win.close();
1.232 + finish();
1.233 + }
1.234 +
1.235 + // get the ball rolling
1.236 + group.addSubscriber("expanded", stage1expanded);
1.237 + EventUtils.sendMouseEvent({ type: "click" }, expander[0], contentWindow);
1.238 + }, win);
1.239 +}
