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();
         }
     }

tns-core-modules/ui/core/view/view-common.ts

@@ -976,6 +976,18 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
     _onDetachedFromWindow(): void {
         //
     }
+
+    _hasAncestorView(ancestorView: ViewDefinition): boolean {
+        let matcher = (view: ViewDefinition) => view === ancestorView;
+
+        for (let parent = this.parent; parent != null; parent = parent.parent) {
+            if (matcher(<ViewDefinition>parent)) {
+                return true;
+            }
+        }
+
+        return false;
+    }
 }
 
 export const automationTextProperty = new Property<ViewCommon, string>({ name: "automationText" });

tns-core-modules/ui/core/view/view.android.ts

@@ -22,6 +22,7 @@ import {
 
 import { Background, ad as androidBackground } from "../../styling/background";
 import { profile } from "../../../profiling";
+import { topmost } from "../../frame/frame-stack";
 
 export * from "./view-common";
 
@@ -287,6 +288,18 @@ export class View extends ViewCommon {
         super.onUnloaded();
     }
 
+    public onBackPressed(): boolean {
+        let topmostFrame = topmost();
+
+        // Delegate back navigation handling to the topmost Frame
+        // when it's a child of the current View.
+        if (topmostFrame && topmostFrame._hasAncestorView(this)) {
+            return topmostFrame.onBackPressed();
+        }
+
+        return false;
+    }
+
     private hasGestureObservers() {
         return this._gestureObservers && Object.keys(this._gestureObservers).length > 0
     }

tns-core-modules/ui/core/view/view.d.ts

@@ -705,6 +705,11 @@ export abstract class View extends ViewBase {
      * Called in android when native view is dettached from window.
      */
     _onDetachedFromWindow(): void;
+
+    /**
+     * Checks whether the current view has specific view for an ancestor.
+     */
+    _hasAncestorView(ancestorView: View): boolean;
     //@endprivate
 
     /**

tns-core-modules/ui/frame/frame-common.ts

@@ -9,10 +9,9 @@ import { knownFolders, path } from "../../file-system";
 import { parse, createViewFromEntry } from "../builder";
 import { profile } from "../../profiling";
 
+import { frameStack, topmost as frameStackTopmost, _pushInFrameStack, _popFromFrameStack, _removeFromFrameStack } from "./frame-stack";
 export * from "../core/view";
 
-let frameStack: Array<FrameBase> = [];
-
 function buildEntryFromArgs(arg: any): NavigationEntry {
     let entry: NavigationEntry;
     if (typeof arg === "string") {
@@ -403,41 +402,15 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
     }
 
     public _pushInFrameStack() {
-        if (this._isInFrameStack && frameStack[frameStack.length - 1] === this) {
-            return;
-        }
-
-        if (this._isInFrameStack) {
-            const indexOfFrame = frameStack.indexOf(this);
-            frameStack.splice(indexOfFrame, 1);
-        }
-
-        frameStack.push(this);
-        this._isInFrameStack = true;
+        _pushInFrameStack(this);
     }
 
     public _popFromFrameStack() {
-        if (!this._isInFrameStack) {
-            return;
-        }
-
-        const top = topmost();
-        if (top !== this) {
-            throw new Error("Cannot pop a Frame which is not at the top of the navigation stack.");
-        }
-
-        frameStack.pop();
-        this._isInFrameStack = false;
+        _popFromFrameStack(this);
     }
 
     public _removeFromFrameStack() {
-        if (!this._isInFrameStack) {
-            return;
-        }
-
-        const index = frameStack.indexOf(this);
-        frameStack.splice(index, 1);
-        this._isInFrameStack = false;
+        _removeFromFrameStack(this);
     }
 
     public _dialogClosed(): void {
@@ -585,11 +558,7 @@ export function getFrameById(id: string): FrameBase {
 }
 
 export function topmost(): FrameBase {
-    if (frameStack.length > 0) {
-        return frameStack[frameStack.length - 1];
-    }
-
-    return undefined;
+    return frameStackTopmost();
 }
 
 export function goBack(): boolean {

tns-core-modules/ui/frame/frame-stack.ts

@@ -0,0 +1,50 @@
+// Types.
+import { FrameBase } from "./frame-common";
+
+export let frameStack: Array<FrameBase> = [];
+
+export function topmost(): FrameBase {
+    if (frameStack.length > 0) {
+        return frameStack[frameStack.length - 1];
+    }
+
+    return undefined;
+}
+
+export function _pushInFrameStack(frame: FrameBase): void {
+    if (frame._isInFrameStack && frameStack[frameStack.length - 1] === frame) {
+        return;
+    }
+
+    if (frame._isInFrameStack) {
+        const indexOfFrame = frameStack.indexOf(frame);
+        frameStack.splice(indexOfFrame, 1);
+    }
+
+    frameStack.push(frame);
+    frame._isInFrameStack = true;
+}
+
+export function _popFromFrameStack(frame: FrameBase): void {
+    if (!frame._isInFrameStack) {
+        return;
+    }
+
+    const top = topmost();
+    if (top !== frame) {
+        throw new Error("Cannot pop a Frame which is not at the top of the navigation stack.");
+    }
+
+    frameStack.pop();
+    frame._isInFrameStack = false;
+}
+
+export function _removeFromFrameStack(frame: FrameBase): void {
+    if (!frame._isInFrameStack) {
+        return;
+    }
+
+    const index = frameStack.indexOf(frame);
+    frameStack.splice(index, 1);
+    frame._isInFrameStack = false;
+}