<html>
<head>
<script type="text/javascript" class="GinebraCacheable">
function showObj(obj)
{
window.app.debug("---showObj " + obj + "---");
for(i in obj){
window.app.debug(" " + i + ": " + obj[i]);
}
window.app.debug("---showObj " + "done---");
}
</script>
<script type="text/javascript">
function showExplorerPage()
{
if(!window.views.WebView.currentPageIsSuperPage()) {
// Display the explorer superpage.
if(window.views.WebView.SpecialPage == undefined) {
// Doesn't exist, create it.
window.views.WebView.createSuperPage("SuperPage", true);
}
window.views.WebView.SuperPage.load("c:/data/Others/ginebra2/chrome/ChromeExplorer/Explorer.html");
//window.views.WebView.SuperPage.load("./chrome/ChromeExplorer/Explorer.html");
// Show it.
window.views.WebView.showSuperPage("SuperPage");
}
else {
// Show the normal web page.
window.views.WebView.showNormalPage();
}
}
var docTitle;
function onTitleChanged(title){
docTitle = title;
var titleWidth = chrome.width()/24;
if(title.length > titleWidth)
title=docTitle.substr(0,titleWidth) + "...";
document.getElementById("TitleText").innerHTML=title;
}
function onAspectChanged(aspect)
{
onTitleChanged(docTitle);
}
//function onProgress(p){
//document.getElementById("ProgressBar").style.width = p + "%";
//}
function onLoadFinished(ok){
window.app.debug("onLoadFinished: " + ok);
//window.snippets.NavSnippet.setVisible(false);
window.snippets.ProgressSnippet.setVisible(false);
document.getElementById("StopButton").innerHTML="<img src='Blank.png' class='GinebraCached' data-GinebraOnClick='Stop()'>";
//document.getElementById("ProgressBar").style.width= "0%";
anchorIcon();
}
function onLoadStarted() {
//Don't animate this transition since the animation will tend to stall when loading a slow page.
//This should be better when threaded rendering is available from WebKit
//window.snippets.NavSnippet.setVisible(true);
window.snippets.ProgressSnippet.setVisible(true);
document.getElementById("StopButton").innerHTML="<img src='Stop.png' class='GinebraCached' data-GinebraOnClick='Stop()'>";
//document.getElementById("ProgressBar").style.width= "0%";
}
function onUrlChanged(url) {
document.getElementById("urlBox").value=url;
}
function onSecureConnection(secure) {
if(secure)
document.getElementById("Icons").innerHTML="<img src='Key.png'>";
else
document.getElementById("Icons").innerHTML="<img src='Blank.png'>";
}
function onSymbianCR()
{
//alert("Symbian CR");
//if(document.getElementById("urlBox").hasFocus){
window.views.WebView.loadUrltoCurrentPage(document.getElementById("urlBox").value);
//}
}
var backEnabled = false;
function onBackEnabled(enabled)
{
backEnabled = enabled;
if(backEnabled)
window.snippets.BackSnippet.setEffect("Shadow");
else
window.snippets.BackSnippet.setEffect("Blur");
}
var forwardEnabled = false;
function onForwardEnabled(enabled)
{
forwardEnabled = enabled;
if(forwardEnabled)
window.snippets.ForwardSnippet.setEffect("Shadow");
else
window.snippets.ForwardSnippet.setEffect("Blur");
}
function anchorIcon(){
var pos = window.snippets.StatusBar.childGeometry("TitleCell");
window.snippets.IconSnippet.anchorTo("StatusBar", pos.x, pos.y + 10);
window.snippets.IconSnippet.setVisible("true");
}
function onContextMenu(x,y)
{
window.snippets.ContextMenu.toggleVisibility();
}
function onChromeComplete(){
window.views.WebView.titleChanged.connect(onTitleChanged);
//window.views.WebView.loadProgress.connect(onProgress);
window.views.WebView.loadStarted.connect(onLoadStarted);
window.views.WebView.loadFinished.connect(onLoadFinished);
window.views.WebView.urlChanged.connect(onUrlChanged);
window.views.WebView.secureConnection.connect(onSecureConnection);
window.views.WebView.backEnabled.connect(onBackEnabled);
window.views.WebView.forwardEnabled.connect(onForwardEnabled);
window.chrome.aspectChanged.connect(onAspectChanged);
//window.snippets.NavSnippet.setVisibilityAnimator("G_VISIBILITY_FADE_ANIMATOR");
window.snippets.NavSnippet.anchorToView("top");
window.snippets.ProgressSnippet.anchorTo("NavSnippet",5,22)
//window.snippets.ProgressSnippet.setOpacity(0.30);
//window.snippets.ButtonContainer.setEffect("Shadow");
window.snippets.ZoomSnippet.setEffect("Shadow");
window.snippets.BackSnippet.setEffect("Blur");
window.snippets.ForwardSnippet.setEffect("Blur");
window.snippets.HandSnippet.setEffect("Shadow");
window.snippets.HideSnippet.setEffect("Shadow");
window.chrome.symbianCarriageReturn.connect(onSymbianCR);
window.snippets.HandSnippet.contextMenuEvent.connect(onContextMenu);
window.snippets.ContextMenu.setEffect("Shadow");
//window.snippets.ScrollerSnippet.setEffect("Blur");
//window.chrome.chromeInitialized();
}
function onSubmitUrl(){
window.views.WebView.loadUrltoCurrentPage(document.getElementById("urlBox").value);
return false; //Disable default submit action
}
var statusBarOffset=0;
function toggleStatusBarOffset()
{
if(statusBarOffset==0)
statusBarOffset=20;
else
statusBarOffset=0;
window.snippets.StatusBar.setAnchorOffset(statusBarOffset);
}
window.chrome.chromeComplete.connect(onChromeComplete)
</script>
<style type="text/css">
/* Make chrome items appear to be non-selectable */
::selection {
background: transparent;
color: inherit;
}
</style>
</head>
<body leftmargin="0" topmargin="0" onload="window.app.debug('body onload')">
<div class="GinebraSnippet" id="StatusBar" data-GinebraVisible="true" data-GinebraAnchor="AnchorTop" style="width:100%; height: 42px; background: -webkit-gradient(linear, left top, left bottom, from(#977), to(#232), color-stop(0.1, #232), color-stop(0.9, #766)); color: White">
<table width="100%">
<tr>
<td align="left" valign="center">
<img id="ExplorerButton" src="Home.png" height="32px" width="32px" onClick="showExplorerPage()"/>
</td>
<td id="Icons" align="left" valign="center" style="width:100px">
<img src="Key.png">
</td>
<td id="IconCell" align="center" valign="center">
</td>
<td id="TitleCell" align="center" valign="center" style="color:White">
<span id="TitleText" style="font-size: 130%">
</span>
</td>
<td align="right" valign="center">
<!--img id="ExitButton" src="Exit.png" class="GinebraCached" data-GinebraOnClick="App.quit()"/-->
<img id="ExitButton" src="OnOff.png" onClick="window.app.quit()"/>
</td>
</tr>
</table>
</div>
<div class="GinebraSnippet" id="IconSnippet" data-GinebraVisible="false" data-GinebraNativeClass="GreenChromeSnippet" style="width:20px; height:20px">
</div>
<div class="GinebraSnippet" id="NavSnippet" data-GinebraVisible="true" style="width: 100%; height: 42px; background: -webkit-gradient(linear, left top, left bottom, from(#977), to(#232), color-stop(0.1, #232), color-stop(0.9, #766))">
<form onSubmit="return onSubmitUrl();">
<table style="width:100%">
<tr>
<td style="width:90%" valign="center">
<span style="position:relative;">
<input type="text"
class="Text"
id="urlBox"
name="textBox"
style="width:100%; height:32px; background-color: yellow; border-style:none"
value="http://www.google.com/"
onMouseUp="return false;"/>
</span>
</td>
<td id="GoButton">
<img src="Go.png" onClick="onSubmitUrl()">
</td>
<td id="StopButton">
<img src="Stop.png" class="GinebraCached" data-GinebraOnClick="Stop">
</td>
</tr>
</table>
</form>
</div>
<!--div class = "GinebraSnippet" id="ActionSnippet" data-GinebraVisible="true" data-GinebraAnchor="AnchorBottom" style="width: 100%; height: 42px; background: -webkit-gradient(linear, left top, left bottom, from(#977), to(#232), color-stop(0.1, #232), color-stop(0.9, #766))">
<table style="width:100%">
<tr>
<td style="width:15%" align="left" valign="center">
<img src="Home.png" id="HomeButton" onmousedown="views.WebView.toggleZoom()" onmouseup="views.WebView.stopZoom()">
</td>
<td style="width:35%" align="center" valign="center">
<img src="Back.png" class="GinebraCached" id="BackButton" data-GinebraOnClick="views.WebView.back()">
</td>
<td style="width:35%" align="center" valign="center">
<img src="Hand.png" class="GinebraCached" id="UrlButton" data-GinebraOnClick="snippets.NavSnippet.toggleVisibility();snippets.NavSnippet.grabFocus();">
</td>
<td style="width:15%" align="right" valign="center">
<img src="Minimize.png" class="GinebraCached" id="HideButton" data-GinebraOnClick="snippets.MaximizeSnippet.setOpacity(0.5);snippets.MaximizeSnippet.toggleVisibility();snippets.ActionSnippet.toggleVisibility(); snippets.StatusBar.toggleVisibility()">
</td>
</tr>
</table>
</div-->
<div class = "GinebraSnippet" id="MaximizeSnippet" data-GinebraVisible="false" data-GinebraHidesContent="true" data-GinebraAnchor="AnchorBottomRight" style="width: 42px; height: 42px; background-color: gray;">
<img src="Maximize.png" style="position:relative;top:4px;left:4px" id="HideButton" onclick="snippets.MaximizeSnippet.toggleVisibility();snippets.ButtonContainer.toggleVisibility(); snippets.StatusBar.toggleVisibility()">
</div>
<!--ProgressBar snippet is a native snippet that updates based on the content loading progress. Position on top of the URL entry bar -->
<div class = "GinebraSnippet" id="ProgressSnippet" data-GinebraVisible="true" data-GinebraHidesContent="true" data-GinebraNativeClass="ProgressSnippet" style="width:80%; height:10px; color:red; opacity:0.5">
</div>
<div class = "GinebraSnippet" id = "ScrollerSnippet" data-GinebraVisible = "true" data-GinebraAnchor = "AnchorCenter" data-GinebraNativeClass = "ScrollZoomWidget" style="width:40px; height:40px">
Snippet C
</div>
<div class="GinebraSnippet" id="ButtonContainer" data-GinebraVisible="false" data-GinebraHidesContent="true" data-GinebraAnchor="AnchorBottom" data-GinebraContainer="true" style="width:100%;height:50px">
<div class="GinebraSnippet" id="ZoomSnippet" data-GinebraVisible="true" style="width:45px; height: 45px; background-color:transparent">
<img src="ZoomButtonW.png" id="ZoomButton" onmousedown="views.WebView.toggleZoom();window.snippets.ZoomSnippet.setEffect('Glow')" onmouseup="views.WebView.stopZoom();window.snippets.ZoomSnippet.setEffect('Shadow')"/>
</div>
<div class="GinebraSnippet" id="BackSnippet" data-GinebraVisible="true" style="width:45px; height: 45px; background-color:transparent">
<img src="BackButtonW.png" class="GinebraCached" id="BackButton" data-GinebraOnClick="Back" onmousedown="if(backEnabled) window.snippets.BackSnippet.setEffect('Glow')" onmouseup="onBackEnabled(backEnabled)"/>
</div>
<div class="GinebraSnippet" id="ForwardSnippet" data-GinebraVisible="true" style="width:45px; height: 45px; background-color:transparent">
<img src="ForwardButtonW.png" class="GinebraCached" id="ForwardButton" data-GinebraOnClick="Forward" onmousedown="if(forwardEnabled) window.snippets.ForwardSnippet.setEffect('Glow')" onmouseup="onForwardEnabled(forwardEnabled)"/>
</div>
<div class="GinebraSnippet" id="HandSnippet" data-GinebraVisible="true" style="width:45px; height: 45px">
<!--img src="HandButton.png" class="GinebraCached" id="UrlButton" data-GinebraOnClick="snippets.NavSnippet.toggleVisibility();snippets.ProgressSnippet.toggleVisibility();snippets.NavSnippet.grabFocus();"/-->
<img src="HandButtonW.png" id="UrlButton" onmousedown="window.snippets.HandSnippet.setEffect('Glow'); window.chrome." onmouseup="window.snippets.HandSnippet.setEffect('Shadow');toggleStatusBarOffset();"/>
</div>
<div class="GinebraSnippet" id="HideSnippet" data-GinebraVisible="true" style="width:45px; height: 45px">
<!--img src="HideButton.png" class="GinebraCached" id="HideButton" data-GinebraOnClick="snippets.MaximizeSnippet.setOpacity(0.5);snippets.MaximizeSnippet.toggleVisibility();snippets.ButtonContainer.toggleVisibility(); snippets.StatusBar.toggleVisibility(); snippets.ProgressSnippet.moveBy(0,-42)"/-->
<img src="HideButtonW.png" id="HideButton" onClick="snippets.MaximizeSnippet.setOpacity(0.5);snippets.MaximizeSnippet.toggleVisibility();snippets.ButtonContainer.toggleVisibility(); snippets.StatusBar.toggleVisibility();"/>
</div>
</div>
<div class = "GinebraSnippet" id="TextEditor" data-GinebraVisible="true" data-GinebraHidesContent="true" data-GinebraAnchor="AnchorCenter" data-GinebraNativeClass="TextEditSnippet" style="width:80%; height:40px; color:slateblue; background-color:cornflowerblue; padding:5px; border:1px solid transparent;">
</div>
<div class="GinebraSnippet" id="ContextMenu" data-GinebraVisible="false" data-GinebraAnchor="AnchorCenter" style="background-color:CornflowerBlue;width:100px; height:200px">
A context menu.
</div>
</body>
</html>