fix: Require core modules used for inspector lazily (#4977)

apps/app/ui-tests-app/app.ts

@@ -1,4 +1,6 @@
-import * as application from "tns-core-modules/application";
+console.log("####### ------ APP MODULES START ")
+
+import * as application from "tns-core-modules/application";
 import * as trace from "tns-core-modules/trace";
 trace.enable();
 trace.setCategories(trace.categories.concat(

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

@@ -1,8 +1,20 @@
-import { unsetValue } from "../ui/core/properties";
-import { ViewBase } from "../ui/core/view-base";
-import { topmost } from "../ui/frame";
 import { getNodeById } from "./dom-node";
 
+// Needed for typings only
+import { ViewBase } from "../ui/core/view-base";
+
+// Use lazy requires for core modules
+const frameTopmost = () => { return require("../ui/frame").topmost(); };
+
+let unsetValue;
+function unsetViewValue(view, name) {
+    if (!unsetValue) {
+        unsetValue = require("../ui/core/properties").unsetValue;
+    }
+    
+    view[name] = unsetValue;
+}
+
 function getViewById(nodeId: number): ViewBase {
     const node = getNodeById(nodeId);
     let view;
@@ -14,13 +26,17 @@ function getViewById(nodeId: number): ViewBase {
 }
 
 export function getDocument() {
-    const topMostFrame = topmost();
-    topMostFrame.ensureDomNode();
+    const topMostFrame = frameTopmost();
+    try {
+        topMostFrame.ensureDomNode();
         
+    } catch (e) {
+        console.log("ERROR in getDocument(): " + e);
+    }
     return topMostFrame.domNode.toObject();
 }
 
-export function getComputedStylesForNode(nodeId): Array<{ name: string, value: string}> {
+export function getComputedStylesForNode(nodeId): Array<{ name: string, value: string }> {
     const view = getViewById(nodeId);
     if (view) {
         return view.domNode.getComputedProperties();
@@ -60,7 +76,7 @@ export function setAttributeAsText(nodeId, text, name) {
 
                 // if attr name is being replaced with another
                 if (name !== attrName && hasOriginalAttribute) {
-                    view[name] = unsetValue;
+                    unsetViewValue(view, name);
                     view[attrName] = attrValue;
                 } else {
                     view[hasOriginalAttribute ? name : attrName] = attrValue;
@@ -68,7 +84,7 @@ export function setAttributeAsText(nodeId, text, name) {
             }
         } else {
             // delete attribute
-            view[name] = unsetValue;
+            unsetViewValue(view, name);
         }
 
         view.domNode.loadAttributes();

tns-core-modules/debugger/dom-node.ts

@@ -1,10 +1,9 @@
-import { getSetProperties, getComputedCssValues } from "../ui/core/properties";
-import { PercentLength } from "../ui/styling/style-properties";
-import { ViewBase } from "../ui/core/view";
-import { Color } from "../color";
 import { CSSComputedStyleProperty } from "./css-agent";
 import { InspectorEvents } from "./devtools-elements";
 
+// Needed for typings only
+import { ViewBase } from "../ui/core/view";
+
 const registeredDomNodes = {};
 const ELEMENT_NODE_TYPE = 1;
 const ROOT_NODE_TYPE = 9;
@@ -36,12 +35,19 @@ const propertyBlacklist = [
     "nativeView"
 ];
 
-let inspectorFrontendInstance: any;
+function lazy<T>(action: () => T): () => T {
+    let _value: T;
+    return () => _value || (_value = action());
+}
+const percentLengthToStringLazy = lazy<(length) => string>(() => require("../ui/styling/style-properties").PercentLength.convertToString);
+const getSetPropertiesLazy = lazy<(view: ViewBase) => [string, any][]>(() => require("../ui/core/properties").getSetProperties);
+const getComputedCssValuesLazy = lazy<(view: ViewBase) => [string, any][]>(() => require("../ui/core/properties").getComputedCssValues);
 
 export function registerInspectorEvents(inspector: InspectorEvents) {
     inspectorFrontendInstance = inspector;
 }
 
+let inspectorFrontendInstance: any;
 function notifyInspector(callback: (inspector: InspectorEvents) => void) {
     if (inspectorFrontendInstance) {
         callback(inspectorFrontendInstance);
@@ -51,10 +57,8 @@ function notifyInspector(callback: (inspector: InspectorEvents) => void) {
 function valueToString(value: any): string {
     if (typeof value === "undefined" || value === null) {
         return "";
-    } else if (value instanceof Color) {
-        return value.toString();
     } else if (typeof value === "object" && value.unit) {
-        return PercentLength.convertToString(value);
+        return percentLengthToStringLazy()(value);
     } else {
         return value + "";
     }
@@ -112,7 +116,7 @@ export class DOMNode {
 
     public loadAttributes() {
         this.attributes = [];
-        getSetProperties(this.viewRef.get())
+        getSetPropertiesLazy()(this.viewRef.get())
             .filter(propertyFilter)
             .forEach(pair => this.attributes.push(pair[0], pair[1] + ""));
 
@@ -182,7 +186,7 @@ export class DOMNode {
             return [];
         }
 
-        const result = getComputedCssValues(view)
+        const result = getComputedCssValuesLazy()(view)
             .filter(pair => pair[0][0] !== "_")
             .map((pair) => {
                 return {

tns-core-modules/inspector_modules.ios.ts

@@ -1,4 +1,6 @@
+console.log("Loading inspector modules...");
 require("./globals/decorators");
 require("./debugger/webinspector-network");
 require("./debugger/webinspector-dom");
 require("./debugger/webinspector-css");
+console.log("Finished loading inspector modules.");