feat(frame): handle back navigation when common layout is used as a root element (#5608)

* test(e2e): update modal navigation app

Add layout as root.
Add show modal layout.

* chore(frame): move frame stack modifiers in a separate frame-stack module

* feat(frame): handle back navigation when using common layout as root element

e2e/modal-navigation/app/app.ts

@@ -3,3 +3,4 @@ import * as application from "tns-core-modules/application";
 
 application.run({ moduleName: "app-root" });
 // application.run({ moduleName: "tab-root" });
+// application.run({ moduleName: "layout-root" });

e2e/modal-navigation/app/home/home-page.ts

@@ -41,6 +41,14 @@ export function onModalPage(args: EventData) {
         false);
 }
 
+export function onModalLayout(args: EventData) {
+    const view = args.object as View;
+    view.showModal("modal-layout/modal-layout",
+        "context",
+        () => console.log("home-page modal layout closed"),
+        false);
+}
+
 export function onModalTabView(args: EventData) {
     const fullscreen = false;
     const animated = false;
@@ -61,7 +69,14 @@ export function onNavigate(args: EventData) {
     page.frame.navigate("second/second-page");
 }
 
-export function onRootViewChange() {
-    let rootView = application.getRootView();
-    rootView instanceof Frame ? application._resetRootView({ moduleName: "tab-root" }) : application._resetRootView({ moduleName: "app-root" });
+export function onFrameRootViewReset() {
+    application._resetRootView({ moduleName: "app-root" });
 }
+
+export function onTabRootViewReset() {
+    application._resetRootView({ moduleName: "tab-root" });
+}
+
+export function onLayoutRootViewReset() {
+    application._resetRootView({ moduleName: "layout-root" });
+}

e2e/modal-navigation/app/home/home-page.xml

@@ -12,8 +12,11 @@
     <StackLayout>
         <Button text="Show Modal Page With Frame" tap="onModalFrame" />
         <Button text="Show Modal Page" tap="onModalPage" />
+        <Button text="Show Modal Layout" tap="onModalLayout" />
         <Button text="Show Modal TabView" tap="onModalTabView" />
         <Button text="Navigate To Second Page" tap="onNavigate" />
-        <Button text="Change Root View" tap="onRootViewChange" />
+        <Button text="Reset Frame Root View" tap="onFrameRootViewReset" />
+        <Button text="Reset Tab Root View" tap="onTabRootViewReset" />
+        <Button text="Reset Layout Root View" tap="onLayoutRootViewReset" />
     </StackLayout>
 </Page>

e2e/modal-navigation/app/layout-root.xml

@@ -0,0 +1,3 @@
+<GridLayout>
+    <Frame defaultPage="home/home-page" />
+</GridLayout>

e2e/modal-navigation/app/modal-layout/modal-layout.ts

@@ -0,0 +1,23 @@
+export function onShowingModally() {
+    console.log("modal-layout showingModally");
+}
+
+export function onLoaded() {
+    console.log("modal-layout loaded");
+}
+
+export function onNavigatingTo() {
+    console.log("modal-layout onNavigatingTo");
+}
+
+export function onNavigatingFrom() {
+    console.log("modal-layout onNavigatingFrom");
+}
+
+export function onNavigatedTo() {
+    console.log("modal-layout onNavigatedTo");
+}
+
+export function onNavigatedFrom() {
+    console.log("modal-layout onNavigatedFrom");
+}

e2e/modal-navigation/app/modal-layout/modal-layout.xml

@@ -0,0 +1,7 @@
+<GridLayout backgroundColor="green" showingModally="onShowingModally" loaded="onLoaded"
+    navigatingTo="onNavigatingTo"
+    navigatingFrom="onNavigatingFrom"
+    navigatedTo="onNavigatedTo"
+    navigatedFrom="onNavigatedFrom">
+    <Frame defaultPage="modal/modal-page"></Frame>
+</GridLayout>

e2e/modal-navigation/e2e/screen.ts

@@ -12,7 +12,9 @@ const modalFrame = "Show Modal Page With Frame";
 const modalPage = "Show Modal Page";
 const modalTabView = "Show Modal TabView";
 const navToSecondPage = "Navigate To Second Page";
-const rootView = "Change Root View";
+const resetFrameRootView = "Reset Frame Root View";
+const resetTabRootView = "Reset Tab Root View";
+const resetLayoutRootView = "Reset Layout Root View";
 
 const showNestedModalFrame = "Show Nested Modal Page With Frame";
 const showNestedModalPage = "Show Nested Modal Page";
@@ -35,9 +37,19 @@ export class Screen {
         console.log(home + " loaded!");
     }
 
-    changeRootView = async () => {
-        const btnChangeRootView = await this._driver.findElementByText(rootView);
-        await btnChangeRootView.tap();
+    resetFrameRootView = async () => {
+        const btnResetFrameRootView = await this._driver.findElementByText(resetFrameRootView);
+        await btnResetFrameRootView.tap();
+    }
+
+    resetTabRootView = async () => {
+        const btnResetTabRootView = await this._driver.findElementByText(resetTabRootView);
+        await btnResetTabRootView.tap();
+    }
+
+    resetLayoutRootView = async () => {
+        const btnResetLayoutRootView = await this._driver.findElementByText(resetLayoutRootView);
+        await btnResetLayoutRootView.tap();
     }
 
     loadedTabRootView = async () => {
@@ -52,7 +64,7 @@ export class Screen {
         try {
             await this.loadedTabRootView();
         } catch (err) {
-            await this.changeRootView();
+            await this.resetTabRootView();
             await this.loadedTabRootView();
         }
     }