--- a/org.symbian.tools.wrttools.previewer/preview/css/style.css	Thu Jul 01 17:05:34 2010 -0700
+++ b/org.symbian.tools.wrttools.previewer/preview/css/style.css	Fri Jul 02 11:34:35 2010 -0700
@@ -1,4 +1,5 @@
 @charset "utf-8";
+
 /**
  * Copyright (c) 2009-2010 Symbian Foundation and/or its subsidiary(-ies).
  * All rights reserved.
@@ -11,16 +12,35 @@
  * Symbian Foundation - initial contribution.
  * Contributors:
  */
+.tabs-bottom {
+	position: relative;
+}
 
-.tabs-bottom { position: relative; } 
-.tabs-bottom .ui-tabs-panel { height: 200px; overflow: auto; } 
-.tabs-bottom .ui-tabs-nav { position: absolute !important; left: 0; bottom: 0; right:0; padding: 0 0.2em 0.2em 0; } 
-.tabs-bottom .ui-tabs-nav li { margin-top: -2px !important; margin-bottom: 1px !important; border-top: none; border-bottom-width: 1px; }
-.ui-tabs-selected { margin-top: -3px !important; }
+.tabs-bottom .ui-tabs-panel {
+	height: 200px;
+	overflow: auto;
+}
+
+.tabs-bottom .ui-tabs-nav {
+	position: absolute !important;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	padding: 0 0.2em 0.2em 0;
+}
 
+.tabs-bottom .ui-tabs-nav li {
+	margin-top: -2px !important;
+	margin-bottom: 1px !important;
+	border-top: none;
+	border-bottom-width: 1px;
+}
 
-body {
-/*	background-image: url(../images/Gradient0Background_2.png);*/
+.ui-tabs-selected {
+	margin-top: -3px !important;
+}
+
+body { /*	background-image: url(../images/Gradient0Background_2.png);*/
 	background-repeat: repeat-x;
 	background-color: AppWorkspace;
 	margin: 0px;
@@ -29,19 +49,22 @@
 	overflow: hidden;
 	font-size: 11px;
 }
-.hide{
-	display:none;
+
+.hide {
+	display: none;
 }
-.shortcut{
-	display:none;
+
+.shortcut {
+	display: none;
 	font-weight: bold;
 	color: gray;
 }
-.show{
-	display:block;
+
+.show {
+	display: block;
 }
 
-code{
+code {
 	background-color: #ffffa6;
 	color: #000000;
 	padding: 3px;
@@ -50,21 +73,22 @@
 	margin: 3px 0px;
 }
 
-#DisplaySFKWrapper{
+#DisplaySFKWrapper {
 	overflow: hidden;
 }
+
 #DisplayArea {
 	margin-right: auto;
 	margin-left: auto;
 	overflow: hidden;
-
 }
 
-#WidgetArea{
+#WidgetArea {
 	position: relative;
 	z-index: 99;
 }
-#WidgetArea iframe{
+
+#WidgetArea iframe {
 	width: 100%;
 	height: 100%;
 	border: 0px;
@@ -72,16 +96,17 @@
 	margin-top: auto;
 }
 
-#WidgetArea.hs_portrait{
+#WidgetArea.hs_portrait {
 	background-image: url(../images/device/360x640/hs-portrait.gif);
 	background-repeat: no-repeat;
 }
 
-#WidgetArea.hs_landscape{
+#WidgetArea.hs_landscape {
 	background-image: url(../images/device/360x640/hs-landscape.gif);
 	background-repeat: no-repeat;
 }
-#WidgetArea.hs_portrait iframe{
+
+#WidgetArea.hs_portrait iframe {
 	width: 306px;
 	height: 76px;
 	margin-left: 26px;
@@ -89,7 +114,7 @@
 	overflow: hidden !important;
 }
 
-#WidgetArea.hs_landscape iframe{
+#WidgetArea.hs_landscape iframe {
 	width: 306px;
 	height: 76px;
 	margin-left: 322px !important;
@@ -97,8 +122,7 @@
 	overflow: hidden !important;
 }
 
-#iframeMask
-{
+#iframeMask {
 	width: 328px;
 	height: 100px;
 	position: absolute;
@@ -109,24 +133,22 @@
 	background-position: top left;
 }
 
-#iframeMask:hover
-{
+#iframeMask:hover {
 	background-repeat: no-repeat;
 	background-position: bottom left;
 }
 
-
-#WidgetArea.hs_portrait #iframeMask{
+#WidgetArea.hs_portrait #iframeMask {
 	margin-left: 16px !important;
 	margin-top: 310px !important;
 }
-#WidgetArea.hs_landscape #iframeMask{
+
+#WidgetArea.hs_landscape #iframeMask {
 	margin-left: 312px !important;
 	margin-top: 140px !important;
 }
 
-
-#SoftKeys{
+#SoftKeys {
 	height: 50px;
 	width: 240px;
 	margin-right: auto;
@@ -134,9 +156,10 @@
 	margin-top: 10px;
 }
 
-div.clear{
+div.clear {
 	clear: both;
 }
+
 #DeviceDisplayLayout {
 	background-repeat: no-repeat;
 	background-position: center center;
@@ -158,24 +181,23 @@
 	height: 408px;
 }
 
-#SoftKeysArea{
+#SoftKeysArea {
 	z-index: 101;
 	position: relative;
-/*	background-image: url(../images/device/menuKeys-bg.png);
+	/*	background-image: url(../images/device/menuKeys-bg.png);
 	background-repeat: no-repeat;
 	background-position: center top;
 */
 	background-color: #666666;
 }
 
-#SoftKeysArea ul{
+#SoftKeysArea ul {
 	list-style: none;
 	margin: 0px;
 	padding: 0px;
-	
 }
 
-#SoftKeysArea ul li{
+#SoftKeysArea ul li {
 	margin: 0px;
 	font-weight: bold;
 	font-size: 15px;
@@ -183,23 +205,22 @@
 	padding: 5px;
 }
 
-
-#SoftKeysArea ul li a{
+#SoftKeysArea ul li a {
 	color: #FFFFFF;
 	text-decoration: none;
 	display: block;
 }
 
-li#RskLabel{
+li#RskLabel {
 	text-align: right;
 }
 
-#MenuItemsArea{
+#MenuItemsArea {
 	z-index: 100;
 	display: none;
-}	
+}
 
-#MenuItemsArea ul{
+#MenuItemsArea ul {
 	margin: 0px;
 	padding: 5px;
 	list-style-position: inside;
@@ -208,93 +229,98 @@
 	background-color: #CCCCCC;
 }
 
-#MenuItemsArea ul li{
+#MenuItemsArea ul li {
 	font-size: 13px;
 	font-weight: bold;
 }
 
-#MenuItemsArea li.active{
+#MenuItemsArea li.active {
 	background-color: #75ea00;
 }
 
-#MenuItemsArea a{
+#MenuItemsArea a {
 	color: #000;
 	text-decoration: none;
 	display: block;
 	padding: 5px;
 	height: 14px;
 }
-#MenuItemsArea a:hover{
+
+#MenuItemsArea a:hover {
 	background-color: #75ea00;
 }
 
-#MenuItemsArea a.subMenuItem{
+#MenuItemsArea a.subMenuItem {
 	background-image: url(../images/sub-menu-arrow.png);
 	background-repeat: no-repeat;
 	background-position: right 0px;
 }
 
-#MenuItemsArea a.subMenuItem:hover{
+#MenuItemsArea a.subMenuItem:hover {
 	background-position: right -20px;
 }
-#MenuItemsArea a.subMenuItem:active{
+
+#MenuItemsArea a.subMenuItem:active {
 	background-position: right -40px;
 }
 
-#MenuItemsArea li.active a.subMenuItem{
+#MenuItemsArea li.active a.subMenuItem {
 	background-position: right -20px;
 }
-div#IconArea{
+
+div#IconArea {
 	display: none;
 	font-size: 0.9em;
 	font-weight: bold;
 	background-repeat: no-repeat;
 }
 
-div#IconArea.portrait240x320{
-	background-image: url(../images/statusBar_240x320_bkup.png);
-}
-div#IconArea.landscape240x320{
-	background-image: url(../images/statusBar_320x240_bkup.png);
-}
-
-div#IconArea.portrait320x240{
-	background-image: url(../images/statusBar_320x240_bkup.png);
-}
-div#IconArea.landscape320x240{
+div#IconArea.portrait240x320 {
 	background-image: url(../images/statusBar_240x320_bkup.png);
 }
 
-div#IconArea.portrait360x640{
+div#IconArea.landscape240x320 {
+	background-image: url(../images/statusBar_320x240_bkup.png);
+}
+
+div#IconArea.portrait320x240 {
+	background-image: url(../images/statusBar_320x240_bkup.png);
+}
+
+div#IconArea.landscape320x240 {
+	background-image: url(../images/statusBar_240x320_bkup.png);
+}
+
+div#IconArea.portrait360x640 {
 	background-image: url(../images/statusBar_360x640_bkup.png);
 }
-div#IconArea.landscape360x640{
+
+div#IconArea.landscape360x640 {
 	background-image: url(../images/statusBar_640x360_bkup.png);
 }
 
-div#IconArea.landscape800x352{
+div#IconArea.landscape800x352 {
 	background-image: url(../images/statusBar_800x352_bkup.png);
 }
 
-
-div.IconFile{
+div.IconFile {
 	margin-left: auto;
 	margin-right: auto;
 	text-align: center;
 	padding: 20px;
 }
 
-div.IconFile:hover{
+div.IconFile:hover {
 	background-image: url(../images/IconArea-hover.gif);
 	background-position: center center;
 	background-repeat: no-repeat;
 }
 
-div.IconFile p{
+div.IconFile p {
 	margin: 0px;
 }
 
-p.highlight span{
+p.highlight span {
 	background-color: #fbf7a2;
 	font-weight: normal;
 	font-size: 0.8em;
@@ -304,7 +330,7 @@
 /*
 	preferences CSS
 */
-div#TopToolbar{
+div#TopToolbar {
 	left: 30%;
 	right: 30%;
 	top: 0;
@@ -314,10 +340,10 @@
 	position: absolute;
 }
 
-div#InspectorBtn{
+div#InspectorBtn {
 	width: 75px;
 	height: 85px;
-	background-image: url(../images/inspector.png); 
+	background-image: url(../images/inspector.png);
 	position: absolute;
 	top: 10px;
 	left: 10px;
@@ -327,12 +353,12 @@
 	cursor: pointer;
 }
 
-div#InspectorBtn:hover{
+div#InspectorBtn:hover {
 	background-image: url(../images/inspector_hover.png);
 	background-position: left top;
 }
 
-div#loaderDiv{
+div#loaderDiv {
 	padding: 10px;
 	font-size: 1.1em;
 	position: absolute;
@@ -342,17 +368,17 @@
 	z-index: 202;
 }
 
-div#loaderDiv.green{
+div#loaderDiv.green {
 	background-color: #5abd2b;
 	color: #FFFFFF;
 }
 
-div#loaderDiv.yellow{
+div#loaderDiv.yellow {
 	background-color: #ffff00;
 	color: #000000;
 }
 
-div#orientationIcon{
+div#orientationIcon {
 	background-image: url(../images/normal-orientation-icon.gif);
 	background-repeat: no-repeat;
 	width: 191px;
@@ -363,16 +389,17 @@
 	top: 0px;
 	display: none;
 }
-div#orientationIcon:hover{
+
+div#orientationIcon:hover {
 	background-image: url(../images/active-orientation-icon.gif);
 }
 
-table{
+table {
 	border-top: 1px solid #808080;
 	border-left: 1px solid #808080;
 }
 
-table a.link{
+table a.link {
 	background-color: #20c41c;
 	color: #ffffff;
 	font-weight: bold;
@@ -382,13 +409,14 @@
 	font-size: 80%;
 }
 
-table th, table td{
+table th,table td {
 	padding: 6px 5px;
 	border-bottom: 1px solid #808080;
 	border-right: 1px solid #808080;
 	font-size: 0.9em;
 }
-table th{
+
+table th {
 	width: 150px;
 	text-align: left;
 	background-image: url(../images/th-bg-gradient.png);
@@ -396,17 +424,17 @@
 	background-position: left bottom;
 }
 
-#NotificationDiv p{
+#NotificationDiv p {
 	color: #ffffff;
 	font-size: 95%;
 	padding: 5px;
 }
 
-strong{
+strong {
 	color: #eee46c;
 }
 
-#BrowserNotificationBar{
+#BrowserNotificationBar {
 	z-index: 2000;
 	background-color: #f2eb8e;
 	border-bottom: 2px solid #f0d25e;
@@ -421,32 +449,33 @@
 	margin: 0px;
 	opacity: 0.9;
 }
-#BrowserNotificationBar a{
+
+#BrowserNotificationBar a {
 	height: 10px;
 	width: 10px;
 	float: right;
 	background-image: url(../images/BrowserNotificationBar-Toogle.gif);
 	background-position: 0px -10px;
-	margin : 4px 15px 0px 10px;
+	margin: 4px 15px 0px 10px;
 	cursor: hand;
 	overflow: hidden;
 }
+
 /*
 	Event Triggering CSS
 */
-
-h2{
+h2 {
 	font-size: 120%;
 	margin: 3px 0px;
 	padding: 0px;
 }
 
-#tabs-1, #tabs-2{
+#tabs-1,#tabs-2 {
 	height: 223px;
 	overflow: auto;
 }
 
-#connect-charger-icon, #dis-connect-charger-icon{
+#connect-charger-icon,#dis-connect-charger-icon {
 	background-repeat: no-repeat;
 	background-position: left top;
 	width: 165px;
@@ -454,19 +483,19 @@
 	margin: 5px auto;
 }
 
-#connect-charger-icon{
+#connect-charger-icon {
 	background-image: url(../images/connect-charger-icon.png);
 }
 
-#dis-connect-charger-icon{
+#dis-connect-charger-icon {
 	background-image: url(../images/dis-connect-charger-icon.png);
 }
 
-#connect-charger-icon:hover, #dis-connect-charger-icon:hover{
+#connect-charger-icon:hover,#dis-connect-charger-icon:hover {
 	background-position: left bottom;
 }
 
-div#event-battery, div#event-messaging, div#event-memory{
+div#event-battery,div#event-messaging,div#event-memory {
 	float: left;
 	width: 150px;
 	height: 50px;
@@ -476,35 +505,35 @@
 	border: 1px solid #6f6f6f;
 }
 
-div#event-battery.active:hover, div#event-messaging.active:hover, div#event-memory.active:hover{
-	background-position: 0px -50px; 
-/*  background-position: 0px -100px; */
+div#event-battery.active:hover,div#event-messaging.active:hover,div#event-memory.active:hover
+	{
+	background-position: 0px -50px;
+	/*  background-position: 0px -100px; */
 	border: 1px solid #75ea4f;
 }
 
-div#event-messaging.inactive, div#event-memory.inactive{
-	background-position: 0px -100px; 
-/*	background-position: 0px -50px;  */
+div#event-messaging.inactive,div#event-memory.inactive {
+	background-position: 0px -100px;
+	/*	background-position: 0px -50px;  */
 	border: 1px solid #676767;
 }
 
-
-div#event-battery{
-/*	background-image: url(../images/battery-icon.png); */
-/*  background-image: url(../images/battery_1.png); */
-    background-image: url(../images/battery-icon_bkup.png);
+div#event-battery {
+	/*	background-image: url(../images/battery-icon.png); */
+	/*  background-image: url(../images/battery_1.png); */
+	background-image: url(../images/battery-icon_bkup.png);
 }
 
-div#event-messaging{
-/* background-image: url(../images/messaging-icon.gif); */
-/* background-image: url(../images/messaging_1.png); */
-   background-image: url(../images/messaging-icon_bkup.png);
+div#event-messaging {
+	/* background-image: url(../images/messaging-icon.gif); */
+	/* background-image: url(../images/messaging_1.png); */
+	background-image: url(../images/messaging-icon_bkup.png);
 }
 
-div#event-memory{
-/* background-image: url(../images/memory-icon.png); */
-/* background-image: url(../images/memory_1.png); */
-   background-image: url(../images/memory-icon_bkup.png);
+div#event-memory {
+	/* background-image: url(../images/memory-icon.png); */
+	/* background-image: url(../images/memory_1.png); */
+	background-image: url(../images/memory-icon_bkup.png);
 }
 
 /*
@@ -520,30 +549,33 @@
 	background-image: url(../images/memory_2.png); 
 }
 */
-
-
-div.ui-panel{
-	height:30px;	
+div.ui-panel {
+	height: 30px;
 }
 
-a.ui-button, a.ui-button-fixed {
-	background:#555555 url(../script/jquery-ui/css/ui-darkness/images/555555_40x100_textures_02_glass_20.png) repeat-x scroll 0 50%;
-	border:1px solid #666666;
-	color:#EEEEEE;
-	cursor:pointer;
-	font-weight:bolder;
-	line-height:1.4em;
-	margin:0.5em 8px 0.5em 0;
-	padding:0.2em 0.6em 0.3em;
+a.ui-button,a.ui-button-fixed {
+	background: #555555
+		url(../script/jquery-ui/css/ui-darkness/images/555555_40x100_textures_02_glass_20.png)
+		repeat-x scroll 0 50%;
+	border: 1px solid #666666;
+	color: #EEEEEE;
+	cursor: pointer;
+	font-weight: bolder;
+	line-height: 1.4em;
+	margin: 0.5em 8px 0.5em 0;
+	padding: 0.2em 0.6em 0.3em;
 	text-decoration: none;
 }
-a.ui-button:hover, a.ui-button-fixed:hover {
-	background:#0078A3 url(../script/jquery-ui/css/ui-darkness/images/0078a3_40x100_textures_02_glass_40.png) repeat-x scroll 0 50%;
-	border:1px solid #4bd94b;
-	color:#FFFFFF;
+
+a.ui-button:hover,a.ui-button-fixed:hover {
+	background: #0078A3
+		url(../script/jquery-ui/css/ui-darkness/images/0078a3_40x100_textures_02_glass_40.png)
+		repeat-x scroll 0 50%;
+	border: 1px solid #4bd94b;
+	color: #FFFFFF;
 }
 
-a.ui-button-fixed{
+a.ui-button-fixed {
 	float: left;
 	padding: 0.4em 0.6em 0.8em;
 	text-align: center;
@@ -551,95 +583,103 @@
 	width: 120px !important;
 }
 
-div#slider-value-panel{
+div#slider-value-panel {
 	text-align: center;
 	margin-top: 10px;
 }
 
 span.readonly-field {
 	padding: 3px;
-	background:#0078A3 url(../script/jquery-ui/css/ui-darkness/images/0078a3_40x100_textures_02_glass_40.png) repeat-x scroll 0 50%;
-	border:1px solid #4bd94b;
-	color:#FFFFFF;
+	background: #0078A3
+		url(../script/jquery-ui/css/ui-darkness/images/0078a3_40x100_textures_02_glass_40.png)
+		repeat-x scroll 0 50%;
+	border: 1px solid #4bd94b;
+	color: #FFFFFF;
 	font-weight: bolder;
 	width: 30px
 }
 
+.Console {
+	height: 95%;
+	border: 2px solid #FAC82F;
+}
+
 /*
 	Console UI
 */
-#preview-ui-top{
-	overflow:auto;
+#preview-ui-top {
+	overflow: auto;
 }
 
-#preview-ui-bottom{
-	overflow:hidden;
+#preview-ui-bottom {
+	overflow: hidden;
 	display: none;
 }
-#preview-ui-bottom-header{
+
+#preview-ui-bottom-header {
 	background-color: #aeaeae;
 	background-image: url(../images/console-icon.png);
 	background-repeat: repeat-x;
 	background-position: 0px -28px;
 }
-span#Console-Toggle-Button{
+
+span#Console-Toggle-Button {
 	height: 9px;
 	width: 15px;
 	float: right;
 	background-repeat: no-repeat;
-	margin : 12px 8px 0px 0px;
+	margin: 12px 8px 0px 0px;
 	cursor: hand;
 }
 
-span#Console-Toggle-Button.open{
+span#Console-Toggle-Button.open {
 	background-position: 0px 0px;
 	background-image: url(../images/console-close-icon.png);
 }
 
-span#Console-Toggle-Button.open:hover{
+span#Console-Toggle-Button.open:hover {
 	background-position: 0px -9px;
 }
 
-span#Console-Toggle-Button.open:active{
+span#Console-Toggle-Button.open:active {
 	background-position: 0px -18px;
 }
 
-
-span#Console-Toggle-Button.close{
+span#Console-Toggle-Button.close {
 	background-position: 0px 0px;
 	background-image: url(../images/console-open-icon.png);
 }
 
-span#Console-Toggle-Button.close:hover{
+span#Console-Toggle-Button.close:hover {
 	background-position: 0px -9px;
 }
 
-span#Console-Toggle-Button.close:active{
+span#Console-Toggle-Button.close:active {
 	background-position: 0px -18px;
 }
 
-
-span#Console-Clear-Button{
+span#Console-Clear-Button {
 	height: 17px;
 	width: 39px;
 	float: right;
 	background-image: url(../images/console-clear-button.png);
 	background-repeat: no-repeat;
-	margin : 10px 10px 0px 0px;
+	margin: 0px 0px 0px 10px;
 	cursor: hand;
 }
-span#Console-Clear-Button:hover{
+
+span#Console-Clear-Button:hover {
 	background-position: -0px -17px;
 }
 
-#preview-ui-bottom-body{
-	overflow:auto;
-	background-color: white;
+#preview-ui-bottom-body {
+	overflow: auto;
+	background-color: #F2EDDE;
 	color: black;
-/*	display: none;*/
+	/*	display: none;*/
 }
 
-#preview-ui-bottom-body p{
+#preview-ui-bottom-body p {
 	font-family: "Courier New", Courier, monospace;
 	font-size: 11px;
 	padding: 2px 5px;
@@ -647,23 +687,29 @@
 	margin: 0px;
 }
 
-#preview-ui-bottom-body p.log{
-
+#preview-ui-bottom-body p.log {
+	
 }
 
-#preview-ui-bottom-body p.info{
+#preview-ui-bottom-body p#hint {
+	color: gray;
+}
+
+#preview-ui-bottom-body p.info {
 	background-image: url(../images/infoIcon.gif);
 	background-repeat: no-repeat;
 	background-position: 5px center;
 	padding-left: 26px;
 }
-#preview-ui-bottom-body p.warn{
+
+#preview-ui-bottom-body p.warn {
 	background: #00ffff url(../images/warningIcon.gif);
 	background-repeat: no-repeat;
 	background-position: 5px center;
 	padding-left: 26px;
 }
-#preview-ui-bottom-body p.error{
+
+#preview-ui-bottom-body p.error {
 	background: #ffffe0 url(../images/errorIcon.gif);
 	background-repeat: no-repeat;
 	background-position: 5px center;
@@ -671,8 +717,7 @@
 	color: #ff0000;
 }
 
-
-#preview-ui-bottom-header div{
+#preview-ui-bottom-header div {
 	float: left;
 	margin: 9px;
 	color: #ffffff;
@@ -681,8 +726,7 @@
 	font-family: "Arial";
 }
 
-
-span#wrt-help{
+span#wrt-help {
 	height: 28px;
 	width: 28px;
 	float: right;
@@ -690,36 +734,36 @@
 	background-image: url(../images/wrt-help-icon.gif);
 }
 
-span#wrt-help:hover{
+span#wrt-help:hover {
 	background-position: -28px 0px;
 }
 
 #camera {
-	position : relative;
+	position: relative;
 	top: 30%;
 	height: 100%;
 	text-align: center;
 	vertical-align: middle;
 }
-	
+
 #accel-data {
 	float: left;
-	margin-top: 15px;	
+	margin-top: 15px;
 }
 
 #phoneposition {
-	float:left
+	float: left
 }
 
 #accel-data div {
 	margin-top: 10px;
 }
-	
+
 #accel-sliders {
 	position: relative;
 	left: 0;
 	width: 100%;
-	top: 130px	
+	top: 130px
 }
 
 input.axis-entry {
@@ -739,7 +783,4 @@
 	background: url("../images/rotate-buttons.png") !important;
 	background-attachment: scroll !important;
 	background-position: 16px 0 !important;
-}
-
-
-
+}
\ No newline at end of file

--- a/org.symbian.tools.wrttools.previewer/preview/script/accelerometer.js	Thu Jul 01 17:05:34 2010 -0700
+++ b/org.symbian.tools.wrttools.previewer/preview/script/accelerometer.js	Fri Jul 02 11:34:35 2010 -0700
@@ -344,7 +344,7 @@
 		var xcoord = canvas.width / 2;
 		var ycoord = canvas.height / 2;
 
-		ctx.fillStyle = "yellow";
+		ctx.fillStyle = "#FAC82F";
 		ctx.strokeStyle = "black";
 		ctx.beginPath();
 		ctx.moveTo(xcoord + points[3].x, ycoord + points[3].y);

--- a/org.symbian.tools.wrttools.previewer/preview/script/layout.js	Thu Jul 01 17:05:34 2010 -0700
+++ b/org.symbian.tools.wrttools.previewer/preview/script/layout.js	Fri Jul 02 11:34:35 2010 -0700
@@ -34,7 +34,8 @@
 
 	// clear Log
 	$("#Console-Clear-Button").click(function() {
-		$("#preview-ui-bottom-body")[0].innerHTML = '';
+		$("#preview-ui-bottom-body > *").not("p#hint").remove();
+		$("p#hint").show();
 	});
 
 	$('#preview-ui-bottom').show();
@@ -42,6 +43,7 @@
 };
 
 EmulatorLayout.prototype.log = function(type, msg) {
+	$("p#hint").hide();
 	var p = document.createElement('p');
 	p.className = type;
 	p.innerHTML = msg;

--- a/org.symbian.tools.wrttools.previewer/preview/script/lib/console.js	Thu Jul 01 17:05:34 2010 -0700
+++ b/org.symbian.tools.wrttools.previewer/preview/script/lib/console.js	Fri Jul 02 11:34:35 2010 -0700
@@ -16,12 +16,13 @@
  */
 
 //	for console support
-if ((typeof window.parent.console == 'undefined') || ( (/AppleWebKit/i.test(navigator.userAgent)) && !(/Version/i.test(navigator.userAgent))) ){
 	window.console = {
 	
 			sprintf: function(args){
 				if (typeof args == 'undefined') {
 					return null;
+				} else if (typeof args == 'string') {
+					return args;
 				}
 				
 				if (args.length < 1) {
@@ -29,7 +30,7 @@
 				};
 				
 				if (typeof args[0] != 'string') {
-					return null;
+					return this.sprintf(String(args[0]));
 				}
 				
 				if (typeof RegExp == 'undefined') {
@@ -126,13 +127,12 @@
 				//	@todo
 			}
 		}
-	}
+	};
 	
 	//	enable the Console.
 	_BRIDGE_REF.nokia.layout._console_enabled = true;
 	_BRIDGE_REF.nokia.layout.render();
 
-}
 
 //	make TRUE console.js script loaded
 window.parent.NOKIA.scriptsLoaded.console = true;

--- a/org.symbian.tools.wrttools.previewer/preview/wrt_preview.html	Thu Jul 01 17:05:34 2010 -0700
+++ b/org.symbian.tools.wrttools.previewer/preview/wrt_preview.html	Fri Jul 02 11:34:35 2010 -0700
@@ -92,7 +92,9 @@
 		<div id="console" class="hide" style="height: 100%">
 			<span id="Console-Clear-Button"></span>
 			<div style="clear:left;"></div>
-			<div id="preview-ui-bottom-body" style="height: 100%"></div>
+			<div id="preview-ui-bottom-body" class="Console">
+				<p id="hint">Use window.console object log, debug, info, warn and error methods to output debug information. All methods can format strings if supplied arguments in printf format.</p>
+			</div>
 		</div>
 		<div id="event-acceleration" class="hide">
 			<table cellpadding='0' cellspacing='0' width="100%">

--- a/org.symbian.tools.wrttools/libraries/core/widget.js	Thu Jul 01 17:05:34 2010 -0700
+++ b/org.symbian.tools.wrttools/libraries/core/widget.js	Fri Jul 02 11:34:35 2010 -0700
@@ -13,6 +13,7 @@
 
 /**
  * Property widget
+ * 
  * @type Widget
  * @memberOf Window
  */
@@ -20,142 +21,172 @@
 
 /**
  * Property device
+ * 
  * @type Device
  * @memberOf Window
  */
 Window.prototype.device = new Device();
 
 /**
+ * Debugger console
+ */
+Window.prototype.console = new Console();
+
+/**
  * Property menu
+ * 
  * @type Menu
  * @memberOf Window
  */
 Window.prototype.menu = new Menu();
 
-function Widget() {};
+function Widget() {
+};
 Widget.prototype = new Object();
 Widget.prototype.widget = new Widget();
 
 /**
- * identifier is a read-only property of the widget object. 
- * It is the unique string identifier that identifies a widget 
- * after it has been installed into a device. The string returned 
- * is the value of the Identifier key defined in the widget 
- * property list file (info.plist).
+ * identifier is a read-only property of the widget object. It is the unique
+ * string identifier that identifies a widget after it has been installed into a
+ * device. The string returned is the value of the Identifier key defined in the
+ * widget property list file (info.plist).
  */
 Widget.prototype.identifier = "";
 
 /**
- * isrotationsupported is a read-only property that returns a 
- * Boolean value determining if the device supports landscape and 
- * portrait screen orientations. If the value is true, the 
- * device supports both landscape and portrait screen orientations.
+ * isrotationsupported is a read-only property that returns a Boolean value
+ * determining if the device supports landscape and portrait screen
+ * orientations. If the value is true, the device supports both landscape and
+ * portrait screen orientations.
  */
 Widget.prototype.isrotationsupported = new Boolean();
 
 /**
- * Allows the definition of a function to be called
- * when a Widget.is displayed
+ * Allows the definition of a function to be called when a Widget.is displayed
  */
 Widget.prototype.onshow = new Function();
 
 /**
- * Allows the definition of a function to be called
- * when a Widget.sent into the background (hidden)
+ * Allows the definition of a function to be called when a Widget.sent into the
+ * background (hidden)
  */
 Widget.prototype.onhide = new Function();
-	
+
 /**
  * Launches the browser with the specified url
- * @param {String} url
- *     openURL()
+ * 
+ * @param {String}
+ *            url openURL()
  * @return {Void}
  */
-Widget.prototype.openURL = function(url){};
-	
+Widget.prototype.openURL = function(url) {
+};
+
 /**
  * Returns previously stored preference associated with the specified key
- * @param {String} Key preference value to be fetch
- *     preferenceForKey()
+ * 
+ * @param {String}
+ *            Key preference value to be fetch preferenceForKey()
  * @return {String} Value
  */
-Widget.prototype.preferenceForKey = function(key) {return "";};
-	
-	
+Widget.prototype.preferenceForKey = function(key) {
+	return "";
+};
+
 /**
  * Stores the key associated with the specified preference
- * @param {String} Preference value to be stored
- * @param {String} Key Preference value associated to
- *     setPreferenceForKey()
+ * 
+ * @param {String}
+ *            Preference value to be stored
+ * @param {String}
+ *            Key Preference value associated to setPreferenceForKey()
  * @return {Void}
  */
-Widget.prototype.setPreferenceForKey = function(preference, key){};
-	
+Widget.prototype.setPreferenceForKey = function(preference, key) {
+};
+
 /**
  * Toggle between Tabbed navigation mode or Cursor mode
- * @param {Boolean} Value
- *     setNavigationEnabled()
+ * 
+ * @param {Boolean}
+ *            Value setNavigationEnabled()
  * @return {Void}
  */
-Widget.prototype.setNavigationEnabled = function(navigationMode) {};
+Widget.prototype.setNavigationEnabled = function(navigationMode) {
+};
 
 /**
  * Toggle between Tabbed navigation mode or Cursor mode
- * @param {Boolean} Value
- *     setNavigationType()
+ * 
+ * @param {Boolean}
+ *            Value setNavigationType()
  * @return {Void}
  */
-Widget.prototype.setNavigationType = function(navigationMode) {};
-	
+Widget.prototype.setNavigationType = function(navigationMode) {
+};
+
 /**
  * Open S0-Application identified by UID along with the specified params
- * @param {Integer} Uid hexadecimal value to a specified application
- * @param {String} Value
- *     openApplication()
+ * 
+ * @param {Integer}
+ *            Uid hexadecimal value to a specified application
+ * @param {String}
+ *            Value openApplication()
  * @return {Void}
  */
-Widget.prototype.openApplication = function(Uid, param) {};
-	
+Widget.prototype.openApplication = function(Uid, param) {
+};
+
 /**
  * Prepares the Widget.to do transition to specified transitionState
- * @param {String} Value Transition state
- *     prepareForTransition()
+ * 
+ * @param {String}
+ *            Value Transition state prepareForTransition()
  * @return {Void}
  */
-Widget.prototype.prepareForTransition = function(transitionMode){};
-	
+Widget.prototype.prepareForTransition = function(transitionMode) {
+};
+
 /**
- * Does the animation to make the transition between the specified transitionState
+ * Does the animation to make the transition between the specified
+ * transitionState
+ * 
  * @param {Void}
- *     performTransition()
+ *            performTransition()
  * @return {Void}
  */
-Widget.prototype.performTransition = function(){};
-	
+Widget.prototype.performTransition = function() {
+};
+
 /**
- * Set the preferred screen orientation to landscape.
- * The display will flip if the phone display orientation
- * is portrait and the phone supports landscape mode.
+ * Set the preferred screen orientation to landscape. The display will flip if
+ * the phone display orientation is portrait and the phone supports landscape
+ * mode.
+ * 
  * @param {Void}
- *     setDisplayLandscape()
+ *            setDisplayLandscape()
  * @return {Void}
  */
-Widget.prototype.setDisplayLandscape = function(){};
-	
+Widget.prototype.setDisplayLandscape = function() {
+};
+
 /**
- * Set the preferred screen orientation to portrait.
- * The display will flip if the phone display orientation
- * is landscape and the phone supports portrait mode.
+ * Set the preferred screen orientation to portrait. The display will flip if
+ * the phone display orientation is landscape and the phone supports portrait
+ * mode.
+ * 
  * @param {Void}
- *     setDisplayPortrait()
+ *            setDisplayPortrait()
  * @return {Void}
  */
-Widget.prototype.setDisplayPortrait = function(){};
+Widget.prototype.setDisplayPortrait = function() {
+};
 
 /**
  * device object. entry point to device service API (SAPI)
  */
-function Device() {}
+function Device() {
+}
 Device.prototype = new Object();
 Device.prototype.device = new Device();
 
@@ -163,10 +194,44 @@
  * device API public method
  * 
  * @method
- * @param {string} provider Name of service provider, eg, "Service.Calendar"
- * @param {string} Interface Name of interface, eg, "IDataSource"
- * @return {Object} service object  
+ * @param {string}
+ *            provider Name of service provider, eg, "Service.Calendar"
+ * @param {string}
+ *            Interface Name of interface, eg, "IDataSource"
+ * @return {Object} service object
  */
 Device.prototype.getServiceObject = function(provider, Interface) {
 	return new Object();
-};
\ No newline at end of file
+};
+
+/**
+ * console object is used to output debug information to the console
+ */
+function Console() {
+}
+
+/**
+ * Output tracing information. This method accepts arguments similar to printf.
+ */
+Console.prototype.log = function() {
+}
+/**
+ * Output error information. This method accepts arguments similar to printf.
+ */
+Console.prototype.error = function() {
+}
+/**
+ * Output warning information. This method accepts arguments similar to printf.
+ */
+Console.prototype.warn = function() {
+}
+/**
+ * Output information. This method accepts arguments similar to printf.
+ */
+Console.prototype.info = function() {
+}
+/**
+ * Output debug information. This method accepts arguments similar to printf.
+ */
+Console.prototype.debug = function() {
+}
\ No newline at end of file