Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-23931] Windows: Allow an event to be logged to the console for inspection

GitHub Issuen/a
TypeImprovement
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2016-11-13T20:31:37.000+0000
Affected Version/sRelease 6.0.0
Fix Version/sRelease 6.1.0
ComponentsWindows
Labelsparity, qe-6.0.0
ReporterEwan Harris
AssigneeKota Iguchi
Created2016-09-20T11:15:34.000+0000
Updated2016-12-22T23:49:23.000+0000

Description

Description

On Windows, when trying to inspect an event that is returned to an event listener a user will be faced with one of the two following results. 
var win = Ti.UI.createWindow();
var label = Ti.UI.createLabel({
  backgroundColor:'darkgray',
  text: 'Your Test here',
});
win.add(label);
label.addEventListener('click', function(e) {
	console.log(e.source);
	console.log(JSON.stringify(e.source));
});
win.open();

[INFO] [object class TitaniumWindows::UI::Label]

[ERROR] :  Application Error: "Runtime Error: JSON.stringify cannot serialize cyclic structures."
However, when trying to log an event on iOS and Android the following is returned 
[INFO] :   {"wordWrap":true,"textAlign":"center","text":"Your Test here","ellipsize":2,"enabled":true,"visible":true,"touchEnabled":true,"backgroundColor":"darkgray","backgroundRepeat":false,"size":{"height":100,"width":360,"y":0,"x":0},"rect":{"height":100,"width":360,"y":229,"x":0},"keepScreenOn":false,"children":[],"width":"fill","height":100,"bubbleParent":true,"apiName":"Ti.UI.Label","_events":{"click":{}}}


[INFO] :   {"wordWrap":true,"textAlign":"center","text":"Your Test here","ellipsize":2,"enabled":true,"visible":true,"touchEnabled":true,"backgroundColor":"darkgray","backgroundRepeat":false,"size":{"height":100,"width":360,"y":0,"x":0},"rect":{"height":100,"width":360,"y":229,"x":0},"keepScreenOn":false,"children":[],"width":"fill","height":100,"bubbleParent":true,"apiName":"Ti.UI.Label","_events":{"click":{}}}

[INFO]  [object TiUILabel]

{"horizontalWrap":true,"visible":true,"height":100,"backgroundColor":"darkgray","width":"FILL","textAlign":"center","text":"Your Test here","touchEnabled":true}

Steps to reproduce

Add the code above to an exisiting app.js

Build using appc run -p windows -T wp-emulator

Actual result

When attempting to get information on the event returned from the event listener, either

When attempting to use JSON.stringify an application error will be thrown as the JSON contains cyclic structures

When logging just the event, the object type will be logged

Expected result

In parity with other platforms and to aid a developer I would expect to be able to log an event to the console to inspect the properties returned in the JSON payload.

Comments

  1. Kota Iguchi 2016-10-07

    For the cyclic structure, I can see that e.source.parent property could cause the issue because e.source.parent.children obviously contains e.source itself. I would rather be surprised that iOS and Android implementation doesn't dump entire properties but only few properties on JSON.stringify. It seems we have been using custom implementation for JSON.stringify for them, and we might want to emulate what iOS does on Windows to fix this issue. FYI When I JSON.stringify Ti.UI.Button instance on Windows, I got a lot more properties compared to the other platforms: 
       {
     "title": "This is a button",
     "color": "",
     "textAlign": 1,
     "image": null,
     "font": {
       "fontFamily": "",
       "fontSize": "",
       "fontStyle": -842150451,
       "fontWeight": -842150451,
       "textStyle": -842150451
     },
     "verticalAlign": 1,
     "titleid": "",
     "rect": {
       "x": 217,
       "y": 369,
       "width": 66,
       "height": 35
     },
     "left": "",
     "backgroundGradient": {
       "type": "GRADIENT_TYPE::Unknown",
       "backfillStart": false,
       "backfillEnd": false,
       "endRadius": 0,
       "startRadius": 0,
       "startPoint": {
         "x": 0,
         "y": 0
       },
       "endPoint": {
         "x": 0,
         "y": 0
       },
       "colors": []
     },
     "keepScreenOn": false,
     "bottom": "",
     "pullBackgroundColor": "",
     "children": [],
     "accessibilityLabel": "",
     "backgroundLeftCap": -6.2774385622041925e+66,
     "backgroundFocusedImage": "",
     "parent": null,
     "borderWidth": 0,
     "borderColor": "",
     "backgroundFocusedColor": "",
     "backgroundSelectedImage": "",
     "borderRadius": 0,
     "accessibilityValue": "",
     "backgroundColor": "",
     "horizontalWrap": true,
     "accessibilityHint": "",
     "viewShadowColor": "",
     "backgroundSelectedColor": "",
     "viewShadowRadius": -6.2774385622041925e+66,
     "size": {
       "x": 0,
       "y": 0,
       "width": 66,
       "height": 35
     },
     "width": "",
     "animatedCenter": {
       "x": 0,
       "y": 0
     },
     "anchorPoint": {
       "x": 0,
       "y": 0
     },
     "touchEnabled": true,
     "backgroundDisabledColor": "",
     "accessibilityHidden": false,
     "tintColor": "",
     "backgroundDisabledImage": "",
     "backgroundTopCap": -6.2774385622041925e+66,
     "transform": null,
     "right": "",
     "visible": true,
     "opacity": 1,
     "overrideCurrentAnimation": true,
     "softKeyboardOnFocus": 3452816845,
     "backgroundImage": "",
     "center": {
       "x": 0,
       "y": 0
     },
     "top": "",
     "height": "",
     "layout": "",
     "focusable": true,
     "clipMode": 3452816845,
     "backgroundRepeat": true,
     "zIndex": -842150451,
     "enabled": true,
     "viewShadowOffset": {
       "x": 0,
       "y": 0
     },
     "lifecycleContainer": null,
     "bubbleParent": true,
     "apiName": "Ti.UI.Button"
   }
  2. Kota Iguchi 2016-11-04

    https://github.com/appcelerator/titanium_mobile_windows/pull/891
  3. Kota Iguchi 2016-11-04

    So the actual issue here is that we were not able to JSON.stringify Ti.UI.Views. I noticed that Ti.UI.View and its subclasses has parent and children property, and they are enumerable. That makes it impossible to log them through JSON.stringify because of circular references. We can easily workaround it by configuring them non-enumerable.
  4. Samir Mohammed 2016-12-22

    Verified improvement with the code provided in the description. *Windows: console.log(JSON.stringify(e))*; now displays the following information: 
       [INFO] {"textAlign":1,"textid":"","verticalAlign":1,"ellipsize":false,"text":"Your Test here","color":"","wordWrap":true,"font":{"fontFamily":"","fontSize":"","fontStyle":0,"fontWeight":0,"textStyle":0},"attributedString":null,"rect":{"x":118,"y":271,"width":124,"height":27},"left":"","backgroundGradient":{"type":"GRADIENT_TYPE::Unknown","backfillStart":false,"backfillEnd":false,"endRadius":0,"startRadius":0,"startPoint":{"x":0,"y":0},"endPoint":{"x":0,"y":0},"colors":[]},"keepScreenOn":false,"bottom":"","pullBackgroundColor":"","accessibilityLabel":"","backgroundLeftCap":8e-323,"backgroundFocusedImage":"","borderWidth":0,"borderColor":"","backgroundFocusedColor":"","backgroundSelectedImage":"","borderRadius":0,"accessibilityValue":"","backgroundColor":"darkgray","horizontalWrap":true,"accessibilityHint":"","viewShadowColor":"","backgroundSelectedColor":"","viewShadowRadius":2.6631047824235e-311,"size":{"x":0,"y":0,"width":124,"height":27},"width":"","animatedCenter":{"x":0,"y":0},"anchorPoint":{"x":0,"y":0},"touchEnabled":true,"backgroundDisabledColor":"","accessibilityHidden":false,"tintColor":"","backgroundDisabledImage":"","backgroundTopCap":0,"transform":null,"right":"","visible":true,"opacity":1,"overrideCurrentAnimation":false,"softKeyboardOnFocus":59756584,"backgroundImage":"","center":{"x":0,"y":0},"top":"","height":"","layout":"","focusable":true,"clipMode":1932,"backgroundRepeat":true,"zIndex":0,"enabled":true,"viewShadowOffset":{"x":0,"y":0},"lifecycleContainer":null,"bubbleParent":true,"apiName":"Ti.UI.Label","constructor":{"textAlign":1,"textid":"","verticalAlign":1,"ellipsize":false,"text":"","color":"","wordWrap":true,"font":{"fontFamily":"","fontSize":"","fontStyle":0,"fontWeight":0,"textStyle":0},"attributedString":null,"keepScreenOn":false,"accessibilityLabel":"","accessibilityValue":"","accessibilityHint":"","accessibilityHidden":false,"softKeyboardOnFocus":0,"focusable":true,"clipMode":0,"lifecycleContainer":null,"bubbleParent":true,"apiName":"Ti.UI.Label"}}
    *Environment* 
       Nokia Lumia 640 LTE (RM-1073)
   version 1607
   OS Build: 10.0.14393.576
   Mobile Emulator 10.0.14393.0 WVGA 4 inch 512MB
    
   Operating System
   Name                        = Microsoft Windows 10 Pro
   Version                     = 10.0.14393
   Architecture                = 64bit
   
    CPUs                      = 4
    
   Memory                      = 17034395648
    
   Node.js
   Node.js Version             = 4.4.4
   npm Version                 = 2.11.3
    
   Titanium SDK
   SDK Version                 =6.1.0.v20161222061413
    Closing ticket.

JSON Source