tor-browser

browser_PanelMultiView.js (15352B)

---

/* Any copyright is dedicated to the Public Domain.
* http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

/**
* Unit tests for the PanelMultiView module.
*/

const PANELS_COUNT = 2;
let gPanelAnchors = [];
let gPanels = [];
let gPanelMultiViews = [];

const PANELVIEWS_COUNT = 4;
let gPanelViews = [];
let gPanelViewLabels = [];

const EVENT_TYPES = [
 "popupshown",
 "popuphidden",
 "PanelMultiViewHidden",
 "ViewShowing",
 "ViewShown",
 "ViewHiding",
];

/**
* Checks that the element is displayed, including the state of the popup where
* the element is located. This can trigger a synchronous reflow if necessary,
* because even though the code under test is designed to avoid synchronous
* reflows, it can raise completion events while a layout flush is still needed.
*
* In production code, event handlers for ViewShown have to wait for a flush if
* they need to read style or layout information, like other code normally does.
*/
function is_visible(element) {
 let win = element.ownerGlobal;
 let style = win.getComputedStyle(element);
 if (style.display == "none") {
   return false;
 }
 if (style.visibility != "visible") {
   return false;
 }
 if (win.XULPopupElement.isInstance(element) && element.state != "open") {
   return false;
 }

 // Hiding a parent element will hide all its children
 if (element.parentNode != element.ownerDocument) {
   return is_visible(element.parentNode);
 }

 return true;
}

/**
* Checks whether the label in the specified view is visible.
*/
function assertLabelVisible(viewIndex, expectedVisible) {
 Assert.equal(
   is_visible(gPanelViewLabels[viewIndex]),
   expectedVisible,
   `Visibility of label in view ${viewIndex}`
 );
}

/**
* Opens the specified view as the main view in the specified panel.
*/
async function openPopup(panelIndex, viewIndex) {
 gPanelMultiViews[panelIndex].setAttribute(
   "mainViewId",
   gPanelViews[viewIndex].id
 );

 let promiseShown = BrowserTestUtils.waitForEvent(
   gPanelViews[viewIndex],
   "ViewShown"
 );
 PanelMultiView.openPopup(
   gPanels[panelIndex],
   gPanelAnchors[panelIndex],
   "bottomright topright"
 );
 await promiseShown;

 Assert.ok(PanelView.forNode(gPanelViews[viewIndex]).active);
 assertLabelVisible(viewIndex, true);
}

/**
* Closes the specified panel.
*/
async function hidePopup(panelIndex) {
 gPanelMultiViews[panelIndex].setAttribute(
   "mainViewId",
   gPanelViews[panelIndex].id
 );

 let promiseHidden = BrowserTestUtils.waitForEvent(
   gPanels[panelIndex],
   "popuphidden"
 );
 PanelMultiView.hidePopup(gPanels[panelIndex]);
 await promiseHidden;
}

/**
* Opens the specified subview in the specified panel.
*/
async function showSubView(panelIndex, viewIndex) {
 let promiseShown = BrowserTestUtils.waitForEvent(
   gPanelViews[viewIndex],
   "ViewShown"
 );
 gPanelMultiViews[panelIndex].showSubView(gPanelViews[viewIndex]);
 await promiseShown;

 Assert.ok(PanelView.forNode(gPanelViews[viewIndex]).active);
 assertLabelVisible(viewIndex, true);
}

/**
* Navigates backwards to the specified view, which is displayed as a result.
*/
async function goBack(panelIndex, viewIndex) {
 let promiseShown = BrowserTestUtils.waitForEvent(
   gPanelViews[viewIndex],
   "ViewShown"
 );
 gPanelMultiViews[panelIndex].goBack();
 await promiseShown;

 Assert.ok(PanelView.forNode(gPanelViews[viewIndex]).active);
 assertLabelVisible(viewIndex, true);
}

/**
* Records the specified events on an element into the specified array. An
* optional callback can be used to respond to events and trigger nested events.
*/
function recordEvents(
 element,
 eventTypes,
 recordArray,
 eventCallback = () => {}
) {
 let nestedEvents = [];
 element.recorders = eventTypes.map(eventType => {
   let recorder = {
     eventType,
     listener(event) {
       let eventString =
         nestedEvents.join("") + `${event.originalTarget.id}: ${event.type}`;
       info(`Event on ${eventString}`);
       recordArray.push(eventString);
       // Any synchronous event triggered from within the given callback will
       // include information about the current event.
       nestedEvents.unshift(`${eventString} > `);
       eventCallback(event);
       nestedEvents.shift();
     },
   };
   element.addEventListener(recorder.eventType, recorder.listener);
   return recorder;
 });
}

/**
* Stops recording events on an element.
*/
function stopRecordingEvents(element) {
 for (let recorder of element.recorders) {
   element.removeEventListener(recorder.eventType, recorder.listener);
 }
 delete element.recorders;
}

/**
* Sets up the elements in the browser window that will be used by all the other
* regression tests. Since the panel and view elements can live anywhere in the
* document, they are simply added to the same toolbar as the panel anchors.
*
* <toolbar id="nav-bar">
*     <toolbarbutton/>      ->  gPanelAnchors[panelIndex]
*     <panel>               ->  gPanels[panelIndex]
*       <panelmultiview/>   ->  gPanelMultiViews[panelIndex]
*     </panel>
*     <panelview>           ->  gPanelViews[viewIndex]
*       <label/>            ->  gPanelViewLabels[viewIndex]
*     </panelview>
* </toolbar>
*/
add_task(async function test_setup() {
 let navBar = document.getElementById("nav-bar");

 for (let i = 0; i < PANELS_COUNT; i++) {
   gPanelAnchors[i] = document.createXULElement("toolbarbutton");
   gPanelAnchors[i].classList.add(
     "toolbarbutton-1",
     "chromeclass-toolbar-additional"
   );
   navBar.appendChild(gPanelAnchors[i]);

   gPanels[i] = document.createXULElement("panel");
   gPanels[i].id = "panel-" + i;
   gPanels[i].setAttribute("type", "arrow");
   gPanels[i].setAttribute("photon", true);
   navBar.appendChild(gPanels[i]);

   gPanelMultiViews[i] = document.createXULElement("panelmultiview");
   gPanelMultiViews[i].id = "panelmultiview-" + i;
   gPanels[i].appendChild(gPanelMultiViews[i]);
 }

 for (let i = 0; i < PANELVIEWS_COUNT; i++) {
   gPanelViews[i] = document.createXULElement("panelview");
   gPanelViews[i].id = "panelview-" + i;
   navBar.appendChild(gPanelViews[i]);

   gPanelViewLabels[i] = document.createXULElement("label");
   gPanelViewLabels[i].setAttribute("value", "PanelView " + i);
   gPanelViews[i].appendChild(gPanelViewLabels[i]);
 }

 registerCleanupFunction(() => {
   [...gPanelAnchors, ...gPanels, ...gPanelViews].forEach(e => e.remove());
 });
});

/**
* Shows and hides all views in a panel with this static structure:
*
* - Panel 0
*   - View 0
*     - View 1
*     - View 3
*       - View 2
*/
add_task(async function test_simple() {
 // Show main view 0.
 await openPopup(0, 0);

 // Show and hide subview 1.
 await showSubView(0, 1);
 assertLabelVisible(0, false);
 await goBack(0, 0);
 assertLabelVisible(1, false);

 // Show subview 3.
 await showSubView(0, 3);
 assertLabelVisible(0, false);

 // Show and hide subview 2.
 await showSubView(0, 2);
 assertLabelVisible(3, false);
 await goBack(0, 3);
 assertLabelVisible(2, false);

 // Hide subview 3.
 await goBack(0, 0);
 assertLabelVisible(3, false);

 // Hide main view 0.
 await hidePopup(0);
 assertLabelVisible(0, false);
});

/**
* Tests the event sequence in a panel with this static structure:
*
* - Panel 0
*   - View 0
*     - View 1
*     - View 3
*       - View 2
*/
add_task(async function test_simple_event_sequence() {
 let recordArray = [];
 recordEvents(gPanels[0], EVENT_TYPES, recordArray);

 await openPopup(0, 0);
 await showSubView(0, 1);
 await goBack(0, 0);
 await showSubView(0, 3);
 await showSubView(0, 2);
 await goBack(0, 3);
 await goBack(0, 0);
 await hidePopup(0);

 stopRecordingEvents(gPanels[0]);

 Assert.deepEqual(recordArray, [
   "panelview-0: ViewShowing",
   "panelview-0: ViewShown",
   "panel-0: popupshown",
   "panelview-1: ViewShowing",
   "panelview-1: ViewShown",
   "panelview-1: ViewHiding",
   "panelview-0: ViewShown",
   "panelview-3: ViewShowing",
   "panelview-3: ViewShown",
   "panelview-2: ViewShowing",
   "panelview-2: ViewShown",
   "panelview-2: ViewHiding",
   "panelview-3: ViewShown",
   "panelview-3: ViewHiding",
   "panelview-0: ViewShown",
   "panelview-0: ViewHiding",
   "panelmultiview-0: PanelMultiViewHidden",
   "panel-0: popuphidden",
 ]);
});

/**
* Tests that further navigation is suppressed until the new view is shown.
*/
add_task(async function test_navigation_suppression() {
 await openPopup(0, 0);

 // Test re-entering the "showSubView" method.
 let promiseShown = BrowserTestUtils.waitForEvent(gPanelViews[1], "ViewShown");
 gPanelMultiViews[0].showSubView(gPanelViews[1]);
 Assert.ok(
   !PanelView.forNode(gPanelViews[0]).active,
   "The previous view should become inactive synchronously."
 );

 // The following call will have no effect.
 gPanelMultiViews[0].showSubView(gPanelViews[2]);
 await promiseShown;

 // Test re-entering the "goBack" method.
 promiseShown = BrowserTestUtils.waitForEvent(gPanelViews[0], "ViewShown");
 gPanelMultiViews[0].goBack();
 Assert.ok(
   !PanelView.forNode(gPanelViews[1]).active,
   "The previous view should become inactive synchronously."
 );

 // The following call will have no effect.
 gPanelMultiViews[0].goBack();
 await promiseShown;

 // Main view 0 should be displayed.
 assertLabelVisible(0, true);

 await hidePopup(0);
});

/**
* Tests reusing views that are already open in another panel. In this test, the
* structure of the first panel will change dynamically:
*
* - Panel 0
*   - View 0
*     - View 1
* - Panel 1
*   - View 1
*     - View 2
* - Panel 0
*   - View 1
*     - View 0
*/
add_task(async function test_switch_event_sequence() {
 let recordArray = [];
 recordEvents(gPanels[0], EVENT_TYPES, recordArray);
 recordEvents(gPanels[1], EVENT_TYPES, recordArray);

 // Show panel 0.
 await openPopup(0, 0);
 await showSubView(0, 1);

 // Show panel 1 with the view that is already open and visible in panel 0.
 // This will close panel 0 automatically.
 await openPopup(1, 1);
 await showSubView(1, 2);

 // Show panel 0 with a view that is already open but invisible in panel 1.
 // This will close panel 1 automatically.
 await openPopup(0, 1);
 await showSubView(0, 0);

 // Hide panel 0.
 await hidePopup(0);

 stopRecordingEvents(gPanels[0]);
 stopRecordingEvents(gPanels[1]);

 Assert.deepEqual(recordArray, [
   "panelview-0: ViewShowing",
   "panelview-0: ViewShown",
   "panel-0: popupshown",
   "panelview-1: ViewShowing",
   "panelview-1: ViewShown",
   "panelview-1: ViewHiding",
   "panelview-0: ViewHiding",
   "panelmultiview-0: PanelMultiViewHidden",
   "panel-0: popuphidden",
   "panelview-1: ViewShowing",
   "panel-1: popupshown",
   "panelview-1: ViewShown",
   "panelview-2: ViewShowing",
   "panelview-2: ViewShown",
   "panel-1: popuphidden",
   "panelview-2: ViewHiding",
   "panelview-1: ViewHiding",
   "panelmultiview-1: PanelMultiViewHidden",
   "panelview-1: ViewShowing",
   "panelview-1: ViewShown",
   "panel-0: popupshown",
   "panelview-0: ViewShowing",
   "panelview-0: ViewShown",
   "panelview-0: ViewHiding",
   "panelview-1: ViewHiding",
   "panelmultiview-0: PanelMultiViewHidden",
   "panel-0: popuphidden",
 ]);
});

/**
* Tests the event sequence when opening the main view is canceled.
*/
add_task(async function test_cancel_mainview_event_sequence() {
 let recordArray = [];
 recordEvents(gPanels[0], EVENT_TYPES, recordArray, event => {
   if (event.type == "ViewShowing") {
     event.preventDefault();
   }
 });

 gPanelMultiViews[0].setAttribute("mainViewId", gPanelViews[0].id);

 let promiseHidden = BrowserTestUtils.waitForEvent(gPanels[0], "popuphidden");
 PanelMultiView.openPopup(
   gPanels[0],
   gPanelAnchors[0],
   "bottomright topright"
 );
 await promiseHidden;

 stopRecordingEvents(gPanels[0]);

 Assert.deepEqual(recordArray, [
   "panelview-0: ViewShowing",
   "panelview-0: ViewHiding",
   "panelmultiview-0: PanelMultiViewHidden",
   "panelmultiview-0: popuphidden",
 ]);
});

/**
* Tests the event sequence when opening a subview is canceled.
*/
add_task(async function test_cancel_subview_event_sequence() {
 let recordArray = [];
 recordEvents(gPanels[0], EVENT_TYPES, recordArray, event => {
   if (
     event.type == "ViewShowing" &&
     event.originalTarget.id == gPanelViews[1].id
   ) {
     event.preventDefault();
   }
 });

 await openPopup(0, 0);

 let promiseHiding = BrowserTestUtils.waitForEvent(
   gPanelViews[1],
   "ViewHiding"
 );
 gPanelMultiViews[0].showSubView(gPanelViews[1]);
 await promiseHiding;

 // Only the subview should have received the hidden event at this point.
 Assert.deepEqual(recordArray, [
   "panelview-0: ViewShowing",
   "panelview-0: ViewShown",
   "panel-0: popupshown",
   "panelview-1: ViewShowing",
   "panelview-1: ViewHiding",
 ]);
 recordArray.length = 0;

 await hidePopup(0);

 stopRecordingEvents(gPanels[0]);

 Assert.deepEqual(recordArray, [
   "panelview-0: ViewHiding",
   "panelmultiview-0: PanelMultiViewHidden",
   "panel-0: popuphidden",
 ]);
});

/**
* Tests the event sequence when closing the panel while opening the main view.
*/
add_task(async function test_close_while_showing_mainview_event_sequence() {
 let recordArray = [];
 recordEvents(gPanels[0], EVENT_TYPES, recordArray, event => {
   if (event.type == "ViewShowing") {
     PanelMultiView.hidePopup(gPanels[0]);
   }
 });

 gPanelMultiViews[0].setAttribute("mainViewId", gPanelViews[0].id);

 let promiseHidden = BrowserTestUtils.waitForEvent(gPanels[0], "popuphidden");
 let promiseHiding = BrowserTestUtils.waitForEvent(
   gPanelViews[0],
   "ViewHiding"
 );
 PanelMultiView.openPopup(
   gPanels[0],
   gPanelAnchors[0],
   "bottomright topright"
 );
 await promiseHiding;
 await promiseHidden;

 stopRecordingEvents(gPanels[0]);

 Assert.deepEqual(recordArray, [
   "panelview-0: ViewShowing",
   "panelview-0: ViewShowing > panelview-0: ViewHiding",
   "panelview-0: ViewShowing > panelmultiview-0: PanelMultiViewHidden",
   "panelview-0: ViewShowing > panelmultiview-0: popuphidden",
 ]);
});

/**
* Tests the event sequence when closing the panel while opening a subview.
*/
add_task(async function test_close_while_showing_subview_event_sequence() {
 let recordArray = [];
 recordEvents(gPanels[0], EVENT_TYPES, recordArray, event => {
   if (
     event.type == "ViewShowing" &&
     event.originalTarget.id == gPanelViews[1].id
   ) {
     PanelMultiView.hidePopup(gPanels[0]);
   }
 });

 await openPopup(0, 0);

 let promiseHidden = BrowserTestUtils.waitForEvent(gPanels[0], "popuphidden");
 gPanelMultiViews[0].showSubView(gPanelViews[1]);
 await promiseHidden;

 stopRecordingEvents(gPanels[0]);

 Assert.deepEqual(recordArray, [
   "panelview-0: ViewShowing",
   "panelview-0: ViewShown",
   "panel-0: popupshown",
   "panelview-1: ViewShowing",
   "panelview-1: ViewShowing > panelview-1: ViewHiding",
   "panelview-1: ViewShowing > panelview-0: ViewHiding",
   "panelview-1: ViewShowing > panelmultiview-0: PanelMultiViewHidden",
   "panelview-1: ViewShowing > panel-0: popuphidden",
 ]);
});