Merge pull request #7220 from NativeScript/bektchiev/ui-ops-on-main-thread

fix(devtools-ios): Ensure UI modifications run on main thread

tests/app/utils/utils-tests.ts

@@ -18,6 +18,47 @@ export function test_releaseNativeObject_canBeCalledWithNativeObject() {
     }
 };
 
+export function test_executeOnMainThread_Works(done: Function) {
+    utils.executeOnMainThread(() => {
+        try {
+            TKUnit.assertTrue(utils.isMainThread());
+            done();
+        } catch (e) {
+            done(e);
+        }
+    });
+}
+
+export function test_dispatchToMainThread_Works(done: Function) {
+    utils.dispatchToMainThread(() => {
+        try {
+            TKUnit.assertTrue(utils.isMainThread());
+            done();
+        } catch (e) {
+            done(e);
+        }
+    });
+}
+
+export function test_mainThreadify_PassesArgs(done: Function) {
+    const expectedN = 434;
+    const expectedB = true;
+    const expectedS = "string";
+    const f = utils.mainThreadify(function (n: number, b: boolean, s: string) {
+        try {
+            TKUnit.assertTrue(utils.isMainThread());
+            TKUnit.assertEqual(n, expectedN);
+            TKUnit.assertEqual(b, expectedB);
+            TKUnit.assertEqual(s, expectedS);
+            done();
+        } catch (e) {
+            done(e);
+        }
+    });
+
+    f(expectedN, expectedB, expectedS);
+}
+
 function test_releaseNativeObject_canBeCalledWithNativeObject_iOS() {
     let deallocated = false;
     const obj = new ((<any>NSObject).extend({

tns-core-modules/debugger/devtools-elements.common.ts

@@ -2,6 +2,7 @@ import { getNodeById } from "./dom-node";
 
 // Needed for typings only
 import { ViewBase } from "../ui/core/view-base";
+import { mainThreadify } from "../utils/utils";
 
 // Use lazy requires for core modules
 const frameTopmost = () => require("../ui/frame").topmost();
@@ -49,7 +50,7 @@ export function getComputedStylesForNode(nodeId): Array<{ name: string, value: s
     return [];
 }
 
-export function removeNode(nodeId) {
+export const removeNode = mainThreadify(function removeNode(nodeId) {
     const view = getViewById(nodeId);
     if (view) {
         // Avoid importing layout and content view
@@ -63,9 +64,9 @@ export function removeNode(nodeId) {
             console.log("Can't remove child from " + parent);
         }
     }
-}
+});
 
-export function setAttributeAsText(nodeId, text, name) {
+export const setAttributeAsText = mainThreadify(function setAttributeAsText(nodeId, text, name) {
     const view = getViewById(nodeId);
     if (view) {
         // attribute is registered for the view instance
@@ -93,4 +94,4 @@ export function setAttributeAsText(nodeId, text, name) {
 
         view.domNode.loadAttributes();
     }
-}
+});

tns-core-modules/utils/mainthread-helper.android.ts

@@ -0,0 +1,10 @@
+export function dispatchToMainThread(func: () => void) {
+    new android.os.Handler(android.os.Looper.getMainLooper())
+        .post(new java.lang.Runnable({
+            run: func
+        }));
+}
+
+export function isMainThread(): Boolean {
+    return android.os.Looper.myLooper() === android.os.Looper.getMainLooper();
+}

tns-core-modules/utils/mainthread-helper.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Dispatches the passed function for execution on the main thread
+ * @param func The function to execute on the main thread.
+ */
+export function dispatchToMainThread(func: Function);
+
+/**
+ * @returns Boolean value indicating whether the current thread is the main thread
+ */
+export function isMainThread(): boolean

tns-core-modules/utils/mainthread-helper.ios.ts

@@ -0,0 +1,7 @@
+export function dispatchToMainThread(func: () => void) {
+    NSOperationQueue.mainQueue.addOperationWithBlock(func);
+}
+
+export function isMainThread(): Boolean {
+    return NSThread.isMainThread;
+}

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

@@ -1,4 +1,7 @@
 import * as types from "./types";
+import { dispatchToMainThread, isMainThread } from "./mainthread-helper"
+
+export * from "./mainthread-helper"
 
 export const RESOURCE_PREFIX = "res://";
 export const FILE_PREFIX = "file:///";
@@ -154,3 +157,18 @@ export function hasDuplicates(arr: Array<any>): boolean {
 export function eliminateDuplicates(arr: Array<any>): Array<any> {
     return Array.from(new Set(arr));
 }
+
+export function executeOnMainThread(func: Function) {
+    if (isMainThread()) {
+        return func();
+    } else {
+        dispatchToMainThread(func);
+    }
+}
+
+export function mainThreadify(func: Function): (...args: any[]) => void {
+    return function () {
+        const argsToPass = arguments;
+        executeOnMainThread(() => func.apply(this, argsToPass));
+    }
+}

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

@@ -4,6 +4,8 @@
 
 import { dip, px } from "../ui/core/view";
 
+export * from "./mainthread-helper"
+
 export const RESOURCE_PREFIX: string;
 export const FILE_PREFIX: string;
 
@@ -269,6 +271,22 @@ export function GC();
  */
 export function releaseNativeObject(object: any /*java.lang.Object | NSObject*/);
 
+/**
+ * Checks if the current thread is the main thread. Directly calls the passed function
+ * if it is, or dispatches it to the main thread otherwise.
+ * @param func The function to execute on the main thread.
+ */
+export function executeOnMainThread(func: Function);
+
+/**
+ * Returns a function wrapper which executes the supplied function on the main thread.
+ * The wrapper behaves like the original function and passes all of its arguments BUT
+ * discards its return value.
+ * @param func The function to execute on the main thread
+ * @returns The wrapper function which schedules execution to the main thread
+ */
+export function mainThreadify(func: Function): (...args: any[]) => void
+
 /**
  * Returns true if the specified path points to a resource or local file.
  * @param path The path.