feat: add CSS classes to app/modal root views to target platform/device/orientation/type (#7606)

tests/app/test-runner.ts

@@ -154,6 +154,9 @@ if (platform.isIOS && ios.MajorVersion > 10) {
     allTests["SAFEAREA-WEBVIEW"] = webViewSafeAreaTests;
 }
 
+import * as rootViewsCssClassesTests from "./ui/styling/root-views-css-classes-tests";
+allTests["ROOT-VIEWS-CSS-CLASSES"] = rootViewsCssClassesTests;
+
 import * as stylePropertiesTests from "./ui/styling/style-properties-tests";
 allTests["STYLE-PROPERTIES"] = stylePropertiesTests;
 

tests/app/ui/page/page-tests-common.ts

@@ -505,11 +505,6 @@ function _test_WhenInnerViewCallsCloseModal(closeModalGetter: (ShownModallyData)
     helper.navigate(masterPageFactory);
 
     TKUnit.waitUntilReady(() => modalClosedWithResult);
-
-    if (isIOS) {
-        // Remove this line when we have a good way to detect actual modal close on ios
-        TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
-    }
 }
 
 export function test_WhenViewBaseCallsShowModal_WithArguments_ShouldOpenModal() {
@@ -572,11 +567,6 @@ export function test_WhenViewBaseCallsShowModal_WithArguments_ShouldOpenModal()
     helper.navigate(masterPageFactory);
 
     TKUnit.waitUntilReady(() => modalClosed);
-
-    if (isIOS) {
-        // Remove this line when we have a good way to detect actual modal close on ios
-        TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
-    }
 }
 
 export function test_WhenViewBaseCallsShowModal_WithShowModalOptionsArguments_ShouldOpenModal() {
@@ -794,11 +784,6 @@ export function test_WhenRootTabViewShownModallyItCanCloseModal() {
     helper.navigate(masterPageFactory);
 
     TKUnit.waitUntilReady(() => modalClosed);
-
-    if (isIOS) {
-        // Remove this line when we have a good way to detect actual modal close on ios
-        TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
-    }
 }
 
 export function test_WhenPageIsNavigatedToItCanShowAnotherPageAsModal() {
@@ -885,11 +870,6 @@ export function test_WhenPageIsNavigatedToItCanShowAnotherPageAsModal() {
     TKUnit.assertEqual(modalUnloaded, 1, "modalUnloaded");
 
     masterPage.off(Page.navigatedToEvent, navigatedToEventHandler);
-
-    if (isIOS) {
-        // Remove this line when we have a good way to detect actual modal close on ios
-        TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
-    }
 }
 
 export function test_WhenModalPageShownHostPageNavigationEventsShouldNotBeRaised() {
@@ -967,11 +947,6 @@ export function test_WhenModalPageShownHostPageNavigationEventsShouldNotBeRaised
 
     TKUnit.waitUntilReady(() => ready);
 
-    if (isIOS) {
-        // Remove this line when we have a good way to detect actual modal close on ios
-        TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
-    }
-
     // only raised by the initial navigation to the master page
     TKUnit.assertTrue(hostNavigatingToCount === 1);
     TKUnit.assertTrue(hostNavigatedToCount === 1);
@@ -1058,11 +1033,6 @@ export function test_WhenModalPageShownModalNavigationToEventsShouldBeRaised() {
 
     TKUnit.waitUntilReady(() => ready && !modalFrame.isLoaded);
 
-    if (isIOS) {
-        // Remove this line when we have a good way to detect actual modal close on ios
-        TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
-    }
-
     // only raised by the initial show modal navigation
     TKUnit.assertTrue(modalNavigatingToCount === 1);
     TKUnit.assertTrue(modalNavigatedToCount === 1);
@@ -1138,12 +1108,6 @@ export function test_WhenModalFrameShownModalEventsRaisedOnRootModalFrame() {
     helper.navigate(masterPageFactory);
 
     TKUnit.waitUntilReady(() => ready && !modalFrame.isLoaded);
-
-    if (isIOS) {
-        // Remove this line when we have a good way to detect actual modal close on ios
-        TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
-    }
-
     TKUnit.assertTrue(showingModallyCount === 1);
     TKUnit.assertTrue(shownModallyCount === 1);
 }
@@ -1206,12 +1170,6 @@ export function test_WhenModalPageShownShowModalEventsRaisedOnRootModalPage() {
     helper.navigate(masterPageFactory);
 
     TKUnit.waitUntilReady(() => ready);
-
-    if (isIOS) {
-        // Remove this line when we have a good way to detect actual modal close on ios
-        TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
-    }
-
     TKUnit.assertTrue(showingModallyCount === 1);
     TKUnit.assertTrue(shownModallyCount === 1);
 }
@@ -1279,12 +1237,6 @@ export function test_WhenModalPageShownShowModalEventsRaisedOnRootModalTabView()
     TKUnit.assertEqual(_stack().length, 2, "Host and modal tab frame should be instantiated at this point!");
 
     TKUnit.waitUntilReady(() => ready);
-
-    if (isIOS) {
-        // Remove this line when we have a good way to detect actual modal close on ios
-        TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
-    }
-
     TKUnit.assertEqual(_stack().length, 1, "Single host frame should be instantiated at this point!");
 
     TKUnit.assertTrue(showingModallyCount === 1);

tests/app/ui/styling/root-views-css-classes-tests.ts

@@ -0,0 +1,188 @@
+import * as helper from "../../ui-helper";
+import * as TKUnit from "../../tk-unit";
+
+import {
+    android,
+    getRootView,
+    ios
+} from "tns-core-modules/application";
+import {
+    isAndroid,
+    device
+} from "tns-core-modules/platform";
+import { Button } from "tns-core-modules/ui/button/button";
+import { Page } from "tns-core-modules/ui/page";
+import {
+    ShownModallyData,
+    ShowModalOptions,
+    View
+} from "tns-core-modules/ui/frame";
+import {
+    _rootModalViews
+} from "tns-core-modules/ui/core/view/view-common";
+import { DeviceType } from "tns-core-modules/ui/enums/enums";
+
+const ROOT_CSS_CLASS = "ns-root";
+const MODAL_CSS_CLASS = "ns-modal";
+const ANDROID_PLATFORM_CSS_CLASS = "ns-android";
+const IOS_PLATFORM_CSS_CLASS = "ns-ios";
+const PHONE_DEVICE_TYPE_CSS_CLASS = "ns-phone";
+const TABLET_DEVICE_TYPE_CSS_CLASS = "ns-tablet";
+const PORTRAIT_ORIENTATION_CSS_CLASS = "ns-portrait";
+const LANDSCAPE_ORIENTATION_CSS_CLASS = "ns-landscape";
+const UNKNOWN_ORIENTATION_CSS_CLASS = "ns-unknown";
+
+export function test_root_view_root_css_class() {
+    const rootViewCssClasses = getRootView().cssClasses;
+
+    TKUnit.assertTrue(rootViewCssClasses.has(
+        ROOT_CSS_CLASS),
+        `${ROOT_CSS_CLASS} CSS class is missing`
+    );
+}
+
+export function test_root_view_platform_css_class() {
+    const rootViewCssClasses = getRootView().cssClasses;
+
+    if (isAndroid) {
+        TKUnit.assertTrue(rootViewCssClasses.has(
+            ANDROID_PLATFORM_CSS_CLASS),
+            `${ANDROID_PLATFORM_CSS_CLASS} CSS class is missing`
+        );
+        TKUnit.assertFalse(rootViewCssClasses.has(
+            IOS_PLATFORM_CSS_CLASS),
+            `${IOS_PLATFORM_CSS_CLASS} CSS class is present`
+        );
+    } else {
+        TKUnit.assertTrue(rootViewCssClasses.has(
+            IOS_PLATFORM_CSS_CLASS),
+            `${IOS_PLATFORM_CSS_CLASS} CSS class is missing`
+        );
+        TKUnit.assertFalse(rootViewCssClasses.has(
+            ANDROID_PLATFORM_CSS_CLASS),
+            `${ANDROID_PLATFORM_CSS_CLASS} CSS class is present`
+        );
+    }
+}
+
+export function test_root_view_device_type_css_class() {
+    const rootViewCssClasses = getRootView().cssClasses;
+    const deviceType = device.deviceType;
+
+    if (deviceType === DeviceType.Phone) {
+        TKUnit.assertTrue(rootViewCssClasses.has(
+            PHONE_DEVICE_TYPE_CSS_CLASS),
+            `${PHONE_DEVICE_TYPE_CSS_CLASS} CSS class is missing`
+        );
+        TKUnit.assertFalse(rootViewCssClasses.has(
+            TABLET_DEVICE_TYPE_CSS_CLASS),
+            `${TABLET_DEVICE_TYPE_CSS_CLASS} CSS class is present`
+        );
+    } else {
+        TKUnit.assertTrue(rootViewCssClasses.has(
+            TABLET_DEVICE_TYPE_CSS_CLASS),
+            `${TABLET_DEVICE_TYPE_CSS_CLASS} CSS class is missing`
+        );
+        TKUnit.assertFalse(rootViewCssClasses.has(
+            PHONE_DEVICE_TYPE_CSS_CLASS),
+            `${PHONE_DEVICE_TYPE_CSS_CLASS} CSS class is present`
+        );
+    }
+}
+
+export function test_root_view_orientation_css_class() {
+    const rootViewCssClasses = getRootView().cssClasses;
+    let appOrientation;
+
+    if (isAndroid) {
+        appOrientation = android.orientation;
+    } else {
+        appOrientation = ios.orientation;
+    }
+
+    if (appOrientation === "portrait") {
+        TKUnit.assertTrue(rootViewCssClasses.has(
+            PORTRAIT_ORIENTATION_CSS_CLASS),
+            `${PORTRAIT_ORIENTATION_CSS_CLASS} CSS class is missing`
+        );
+        TKUnit.assertFalse(rootViewCssClasses.has(
+            LANDSCAPE_ORIENTATION_CSS_CLASS),
+            `${LANDSCAPE_ORIENTATION_CSS_CLASS} CSS class is present`
+        );
+        TKUnit.assertFalse(rootViewCssClasses.has(
+            UNKNOWN_ORIENTATION_CSS_CLASS),
+            `${UNKNOWN_ORIENTATION_CSS_CLASS} CSS class is present`
+        );
+    } else if (appOrientation === "landscape") {
+        TKUnit.assertTrue(rootViewCssClasses.has(
+            LANDSCAPE_ORIENTATION_CSS_CLASS),
+            `${LANDSCAPE_ORIENTATION_CSS_CLASS} CSS class is missing`
+        );
+        TKUnit.assertFalse(rootViewCssClasses.has(
+            PORTRAIT_ORIENTATION_CSS_CLASS),
+            `${PORTRAIT_ORIENTATION_CSS_CLASS} CSS class is present`
+        );
+        TKUnit.assertFalse(rootViewCssClasses.has(
+            UNKNOWN_ORIENTATION_CSS_CLASS),
+            `${UNKNOWN_ORIENTATION_CSS_CLASS} CSS class is present`
+        );
+    } else if (appOrientation === "landscape") {
+        TKUnit.assertTrue(rootViewCssClasses.has(
+            UNKNOWN_ORIENTATION_CSS_CLASS),
+            `${UNKNOWN_ORIENTATION_CSS_CLASS} CSS class is missing`
+        );
+        TKUnit.assertFalse(rootViewCssClasses.has(
+            LANDSCAPE_ORIENTATION_CSS_CLASS),
+            `${LANDSCAPE_ORIENTATION_CSS_CLASS} CSS class is present`
+        );
+        TKUnit.assertFalse(rootViewCssClasses.has(
+            PORTRAIT_ORIENTATION_CSS_CLASS),
+            `${PORTRAIT_ORIENTATION_CSS_CLASS} CSS class is present`
+        );
+    }
+}
+
+export function test_modal_root_view_modal_css_class() {
+    let modalClosed = false;
+
+    const modalCloseCallback = function () {
+        modalClosed = true;
+    };
+
+    const modalPageShownModallyEventHandler = function (args: ShownModallyData) {
+        const page = <Page>args.object;
+        page.off(View.shownModallyEvent, modalPageShownModallyEventHandler);
+
+        TKUnit.assertTrue(_rootModalViews[0].cssClasses.has(MODAL_CSS_CLASS));
+        args.closeCallback();
+    };
+
+    const hostNavigatedToEventHandler = function (args) {
+        const page = <Page>args.object;
+        page.off(Page.navigatedToEvent, hostNavigatedToEventHandler);
+
+        const modalPage = new Page();
+        modalPage.on(View.shownModallyEvent, modalPageShownModallyEventHandler);
+        const button = <Button>page.content;
+        const options: ShowModalOptions = {
+            context: {},
+            closeCallback: modalCloseCallback,
+            fullscreen: false,
+            animated: false
+        };
+        button.showModal(modalPage, options);
+    };
+
+    const hostPageFactory = function (): Page {
+        const hostPage = new Page();
+        hostPage.on(Page.navigatedToEvent, hostNavigatedToEventHandler);
+
+        const button = new Button();
+        hostPage.content = button;
+
+        return hostPage;
+    };
+
+    helper.navigate(hostPageFactory);
+    TKUnit.waitUntilReady(() => modalClosed);
+}

tns-core-modules/application/application-common.ts

@@ -40,6 +40,7 @@ import {
     LoadAppCSSEventData,
     UnhandledErrorEventData
 } from "./application";
+import { DeviceOrientation } from "../ui/enums/enums";
 
 export { UnhandledErrorEventData, DiscardedErrorEventData, CssChangedEventData, LoadAppCSSEventData };
 
@@ -53,6 +54,13 @@ export const uncaughtErrorEvent = "uncaughtError";
 export const discardedErrorEvent = "discardedError";
 export const orientationChangedEvent = "orientationChanged";
 
+export const CSS_CLASS_PREFIX = "ns-";
+const ORIENTATION_CSS_CLASSES = [
+    `${CSS_CLASS_PREFIX}${DeviceOrientation.portrait}`,
+    `${CSS_CLASS_PREFIX}${DeviceOrientation.landscape}`,
+    `${CSS_CLASS_PREFIX}${DeviceOrientation.unknown}`
+];
+
 let cssFile: string = "./app.css";
 
 let resources: any = {};
@@ -92,7 +100,7 @@ export function livesync(rootView: View, context?: ModuleContext) {
     }
 
     // Handle application styles
-    if (reapplyAppStyles && rootView) {
+    if (rootView && reapplyAppStyles) {
         rootView._onCssStateChange();
     } else if (liveSyncCore) {
         liveSyncCore(context);
@@ -117,6 +125,15 @@ export function loadAppCss(): void {
     }
 }
 
+export function orientationChanged(rootView: View, newOrientation: "portrait" | "landscape" | "unknown"): void {
+    const newOrientationCssClass = `${CSS_CLASS_PREFIX}${newOrientation}`;
+    if (!rootView.cssClasses.has(newOrientationCssClass)) {
+        ORIENTATION_CSS_CLASSES.forEach(c => rootView.cssClasses.delete(c));
+        rootView.cssClasses.add(newOrientationCssClass);
+        rootView._onCssStateChange();
+    }
+}
+
 global.__onUncaughtError = function (error: NativeScriptError) {
     events.notify(<UnhandledErrorEventData>{ eventName: uncaughtErrorEvent, object: app, android: error, ios: error, error: error });
 };

tns-core-modules/application/application.android.ts

@@ -1,20 +1,28 @@
+// Definitions.
 import {
-    AndroidActivityBundleEventData, AndroidActivityEventData, ApplicationEventData, OrientationChangedEventData,
+    AndroidActivityBackPressedEventData,
-    AndroidApplication as AndroidApplicationDefinition, AndroidActivityNewIntentEventData,
+    AndroidActivityBundleEventData,
-    AndroidActivityResultEventData, AndroidActivityBackPressedEventData, AndroidActivityRequestPermissionsEventData,
+    AndroidActivityEventData,
-    CssChangedEventData
+    AndroidActivityNewIntentEventData,
+    AndroidActivityRequestPermissionsEventData,
+    AndroidActivityResultEventData,
+    AndroidApplication as AndroidApplicationDefinition,
+    ApplicationEventData,
+    CssChangedEventData,
+    OrientationChangedEventData
 } from ".";
 
 import {
-    notify, hasListeners, lowMemoryEvent, orientationChangedEvent, suspendEvent, displayedEvent,
+    displayedEvent, hasListeners, livesync, lowMemoryEvent, notify, Observable, on,
-    setApplication, livesync, Observable
+    orientationChanged, orientationChangedEvent, setApplication, suspendEvent
 } from "./application-common";
+
 import { profile } from "../profiling";
 
 // First reexport so that app module is initialized.
 export * from "./application-common";
 
-// types
+// Types.
 import { NavigationEntry, View, AndroidActivityCallbacks } from "../ui/frame";
 
 const ActivityCreated = "activityCreated";
@@ -240,6 +248,13 @@ export function getNativeApplication(): android.app.Application {
     return nativeApp;
 }
 
+on(orientationChangedEvent, (args: OrientationChangedEventData) => {
+    const rootView = getRootView();
+    if (rootView) {
+        orientationChanged(rootView, args.newValue);
+    }
+});
+
 global.__onLiveSync = function __onLiveSync(context?: ModuleContext) {
     if (androidApp && androidApp.paused) {
         return;

tns-core-modules/application/application.d.ts

@@ -53,6 +53,11 @@ export const lowMemoryEvent: string;
  */
 export const orientationChangedEvent: string;
 
+/**
+ * String value "ns-" used for CSS class prefix.
+ */
+export const CSS_CLASS_PREFIX: string;
+
 /**
  * Event data containing information for the application events.
  */

tns-core-modules/application/application.ios.ts

@@ -1,15 +1,17 @@
+
 import {
-    iOSApplication as IOSApplicationDefinition,
     ApplicationEventData,
     CssChangedEventData,
+    iOSApplication as IOSApplicationDefinition,
     LaunchEventData,
     LoadAppCSSEventData,
     OrientationChangedEventData
 } from ".";
 
 import {
-    notify, launchEvent, resumeEvent, suspendEvent, exitEvent, lowMemoryEvent,
+    CSS_CLASS_PREFIX, displayedEvent, exitEvent, getCssFileName, launchEvent, livesync,
-    orientationChangedEvent, setApplication, livesync, displayedEvent, getCssFileName
+    lowMemoryEvent, notify, on, orientationChanged, orientationChangedEvent, resumeEvent,
+    setApplication, suspendEvent
 } from "./application-common";
 
 // First reexport so that app module is initialized.
@@ -19,9 +21,16 @@ export * from "./application-common";
 import { createViewFromEntry } from "../ui/builder";
 import { ios as iosView, View } from "../ui/core/view";
 import { Frame, NavigationEntry } from "../ui/frame";
-import { ios } from "../utils/utils";
+import { device } from "../platform/platform";
 import { profile } from "../profiling";
+import { ios } from "../utils/utils";
 
+const ROOT = "root";
+const IOS_PLATFORM = "ios";
+const ROOT_VIEW_CSS_CLASSES = [
+    `${CSS_CLASS_PREFIX}${ROOT}`,
+    `${CSS_CLASS_PREFIX}${IOS_PLATFORM}`
+];
 const getVisibleViewController = ios.getVisibleViewController;
 
 // NOTE: UIResponder with implementation of window - related to https://github.com/NativeScript/ios-runtime/issues/430
@@ -307,6 +316,11 @@ function createRootView(v?: View) {
         }
     }
 
+    const deviceType = device.deviceType.toLowerCase();
+    ROOT_VIEW_CSS_CLASSES.push(`${CSS_CLASS_PREFIX}${deviceType}`);
+    ROOT_VIEW_CSS_CLASSES.push(`${CSS_CLASS_PREFIX}${iosApp.orientation}`);
+    ROOT_VIEW_CSS_CLASSES.forEach(c => rootView.cssClasses.add(c));
+
     return rootView;
 }
 
@@ -403,6 +417,13 @@ function setViewControllerView(view: View): void {
     }
 }
 
+on(orientationChangedEvent, (args: OrientationChangedEventData) => {
+    const rootView = getRootView();
+    if (rootView) {
+        orientationChanged(rootView, args.newValue);
+    }
+});
+
 global.__onLiveSync = function __onLiveSync(context?: ModuleContext) {
     if (!started) {
         return;

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

@@ -31,6 +31,10 @@ export * from "../view-base";
 export { LinearGradient };
 
 import * as am from "../../animation";
+import { CSS_CLASS_PREFIX } from "../../../application";
+
+const MODAL = "modal";
+
 let animationModule: typeof am;
 function ensureAnimationModule() {
     if (!animationModule) {
@@ -347,8 +351,9 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         return this._modal;
     }
 
-    protected _showNativeModalView(parent: ViewCommon, options: ShowModalOptions) { //context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean, stretched?: boolean, iosOpts?: any) {
+    protected _showNativeModalView(parent: ViewCommon, options: ShowModalOptions) {
         _rootModalViews.push(this);
+        this.cssClasses.add(`${CSS_CLASS_PREFIX}${MODAL}`);
 
         parent._modal = this;
         this._modalParent = parent;

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

@@ -619,10 +619,6 @@ export class View extends ViewCommon {
     }
     protected _showNativeModalView(parent: View, options: ShowModalOptions) {
         super._showNativeModalView(parent, options);
-        if (!this.backgroundColor) {
-            this.backgroundColor = new Color("White");
-        }
-
         initializeDialogFragment();
 
         const df = new DialogFragment();

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

@@ -17,10 +17,10 @@ import {
     _updateTransitions, _reverseTransitions, _clearEntry, _clearFragment, AnimationType
 } from "./fragment.transitions";
 
-import { profile } from "../../profiling";
-
 // TODO: Remove this and get it from global to decouple builder for angular
 import { createViewFromEntry } from "../builder";
+import { device } from "../../platform/platform";
+import { profile } from "../../profiling";
 
 export * from "./frame-common";
 
@@ -32,6 +32,13 @@ interface AnimatorState {
     transitionName: string;
 }
 
+const ROOT = "root";
+const ANDROID_PLATFORM = "android";
+const ROOT_VIEW_CSS_CLASSES = [
+    `${application.CSS_CLASS_PREFIX}${ROOT}`,
+    `${application.CSS_CLASS_PREFIX}${ANDROID_PLATFORM}`
+];
+
 const INTENT_EXTRA = "com.tns.activity";
 const ROOT_VIEW_ID_EXTRA = "com.tns.activity.rootViewId";
 const FRAMEID = "_frameId";
@@ -1280,6 +1287,11 @@ class ActivityCallbacksImplementation implements AndroidActivityCallbacks {
 
             this._rootView = rootView;
             activityRootViewsMap.set(rootView._domId, new WeakRef(rootView));
+
+            const deviceType = device.deviceType.toLowerCase();
+            ROOT_VIEW_CSS_CLASSES.push(`${application.CSS_CLASS_PREFIX}${deviceType}`);
+            ROOT_VIEW_CSS_CLASSES.push(`${application.CSS_CLASS_PREFIX}${application.android.orientation}`);
+            ROOT_VIEW_CSS_CLASSES.forEach(c => this._rootView.cssClasses.add(c));
         }
 
         // Initialize native visual tree;