Index: chrome/browser/resources/options.html |
=================================================================== |
--- chrome/browser/resources/options.html (revision 0) |
+++ chrome/browser/resources/options.html (revision 0) |
@@ -0,0 +1,258 @@ |
+<!DOCTYPE HTML> |
+<html i18n-values="dir:textdirection;" id="t"> |
+<head> |
+<meta charset="utf-8"> |
+<title i18n-content="title"></title> |
+<link rel="icon" href="../../app/theme/history_favicon.png"> |
+<script src="shared/js/local_strings.js"></script> |
+<script> |
+/////////////////////////////////////////////////////////////////////////////// |
+// Globals: |
+ |
+function $(o) {return document.getElementById(o);} |
+ |
+// Extracts preference value out of reponse callback of fetchPrefs call. |
+function getPref(dict, name) { |
+ return eval('dict.'+name); |
arv (Not doing code reviews)
2010/06/17 22:53:18
Do not use eval
return dict[name];
zel
2010/06/18 02:07:05
dict[name] actually does not work. Something funny
|
+} |
+ |
+// Sets new value for preference. |
+function setBooleanPref(name, value) { |
+ chrome.send('setBooleanPref', [name, String(value)]); |
+} |
+ |
+function setIntegerPref(name, value) { |
+ chrome.send('setIntegerPref', [name, String(value)]); |
+} |
+ |
+function setStringPref(name, value) { |
+ chrome.send('setStringPref', [name, value]); |
+} |
+/////////////////////////////////////////////////////////////////////////////// |
+// Document Functions: |
+/** |
+ * Window onload handler, sets up the page. |
+ */ |
+function load() { |
+ localStrings = new LocalStrings(); |
+ loadSystemPrefs(); |
+ |
+ selectPage('system'); |
+ // TODO(zelidrag): preserve first that needs to be shown. |
+} |
+ |
+function selectPage(name) { |
+ var page = $(name+'Page'); |
arv (Not doing code reviews)
2010/06/17 22:53:18
ws around binops
zel
2010/06/18 02:07:05
Done.
|
+ var nav = $(name+'PageNav'); |
+ page.style.visibility = 'visible'; |
+ nav.class = 'navbar_item navbar_item_selected'; |
arv (Not doing code reviews)
2010/06/17 22:53:18
use dashes (-) for css class names and ids
zel
2010/06/18 02:07:05
Done.
|
+} |
+ |
+/////////////////////////////////////////////////////////////////////////////// |
+// System (ChromeOS) Functions: |
+ |
+var kTimeZone = 'settings.datetime.timezone'; |
arv (Not doing code reviews)
2010/06/17 22:53:18
No k in the name. If you want const use const
con
|
+var kTapToClickEnabled = 'settings.touchpad.enable_tap_to_click'; |
+var kVertEdgeScrollEnabled = 'settings.touchpad.enable_vert_edge_scroll'; |
+var kTouchpadSpeedFactor = 'settings.touchpad.speed_factor'; |
+var kTouchpadSensitivity = 'settings.touchpad.sensitivity'; |
+var kAccessibilityEnabled = 'settings.accessibility'; |
+ |
+/** |
+ * Loads ChromeOS System preferences. |
+ */ |
+function loadSystemPrefs() { |
+ chrome.send("fetchPrefs", ['systemPrefsFetched', '', |
arv (Not doing code reviews)
2010/06/17 22:53:18
Use single quotes in JS for consistence.
zel
2010/06/18 02:07:05
Done.
|
+ kTimeZone, |
+ kTapToClickEnabled, |
+ kVertEdgeScrollEnabled, |
+ kTouchpadSpeedFactor, |
+ kTouchpadSensitivity, |
+ kAccessibilityEnabled]); |
+} |
+ |
+function setupTimezones(selectedValue) { |
+ timezoneSel = $('timezoneSel'); |
arv (Not doing code reviews)
2010/06/17 22:53:18
missing var
zel
2010/06/18 02:07:05
Done.
|
+ for (key in templateData.timezoneMap) { |
+ var selected = key == selectedValue; |
+ timezoneSel.options[timezoneSel.options.length] = |
+ new Option(templateData.timezoneMap[key], key, false, selected); |
arv (Not doing code reviews)
2010/06/17 22:53:18
or
timezoneSel.appendChild(new Option(...));
zel
2010/06/18 02:07:05
Done.
|
+ } |
+} |
+ |
+function systemPrefsFetched(context, dict) { |
+ $('tapToClickChk').checked = getPref(dict, kTapToClickEnabled); |
+ $('vertScrollChk').checked = getPref(dict, kVertEdgeScrollEnabled); |
+ $('sensitivityRng').value = getPref(dict, kTouchpadSensitivity); |
+ $('speedRng').value = getPref(dict, kTouchpadSpeedFactor); |
+ $('accesibilityChk').checked = getPref(dict, kAccessibilityEnabled); |
+ setupTimezones(getPref(dict, kTimeZone)); |
+} |
+ |
+function selectChanged(control) { |
+ if (control.id == 'timezoneSel') { |
+ setStringPref(kTimeZone, control.options[control.selectedIndex].value); |
+ } |
+} |
+ |
+function checkboxChanged(control) { |
+ if (control.id == 'tapToClickChk') { |
arv (Not doing code reviews)
2010/06/17 22:53:18
Use a switch
zel
2010/06/18 02:07:05
Done.
|
+ setBooleanPref(kTapToClickEnabled, control.checked); |
+ } else if (control.id == 'vertScrollChk') { |
+ setBooleanPref(kVertEdgeScrollEnabled, control.checked); |
+ } else if (control.id == 'vertScrollChk') { |
+ setBooleanPref(kTapToClickEnabled, control.checked); |
+ } else if (control.id == 'accesibilityChk') { |
+ setBooleanPref(kAccessibilityEnabled, control.checked); |
+ } |
+} |
+ |
+function rangeChanged(control) { |
+ if (control.id == 'sensitivityRng') { |
+ setIntegerPref(kTouchpadSensitivity, control.value); |
+ } else if (control.id == 'speedRng') { |
+ setIntegerPref(kTouchpadSpeedFactor, control.value); |
+ } |
+} |
+ |
+function buttonClicked(control) { |
+ if (conrol.id == 'languageBtn') { |
+ // TODO: Open ChromeOS language settings page. |
+ } |
+} |
+ |
+ |
+</script> |
+<link rel="stylesheet" href="dom_ui.css"> |
+<!-- TODO(zelidrag) just a temp style placeholder until redesign --> |
+<style> |
+.navbar_container { |
arv (Not doing code reviews)
2010/06/17 22:53:18
Put an empty line between each rule
zel
2010/06/18 02:07:05
Done.
|
+ border: 1px solid black; |
+ background-color: #dfdfdf; |
+ cursor:pointer; |
arv (Not doing code reviews)
2010/06/17 22:53:18
ws after :
zel
2010/06/18 02:07:05
Done.
|
+ font-weight: bold; |
+ float:left; |
arv (Not doing code reviews)
2010/06/17 22:53:18
rtl?
zel
2010/06/18 02:07:05
Not sure I get this one.
|
+ height: 400px; |
+ padding: 10px; |
+ position:relative; |
+ width: 200px; |
+} |
+.navbar_item, .navbar_item2 { |
+ margin: 5px; |
+ padding: 5px; |
+} |
+.navbar_item_selected { |
+ background-color: #000000; |
+} |
+.navbar_item_normal { |
+ background-color: #dfdfdf; |
+} |
+#mainview { |
+ border: 1px solid black; |
+ float:left; |
+ height: 400px; |
+ width: 600px; |
+ padding: 10px; |
+ position:relative; |
+} |
+.section { |
+ margin-top: 10px; |
+} |
+.option { |
+ margin-top: 5px; |
+} |
+.section_title { |
+ font-weight: bold; |
+} |
+.option_control_table { |
+ padding-left:10px; |
+} |
+.navbar2 { |
+ visibility: hidden; |
+} |
+.page { |
+ visibility: hidden; |
+} |
+</style> |
+</head> |
+<body onload="load();" i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"> |
arv (Not doing code reviews)
2010/06/17 22:53:18
Long line
zel
2010/06/18 02:07:05
Done.
|
+<div class="header"> |
+</div> |
+<div class="main"> |
+ <div class="navbar_container"> |
+ <ul class="navbar"> |
+ <li class="navbar_item navbar_item_normal" id="systemPageNav" i18n-values=".innerText:systemPage"></li> |
arv (Not doing code reviews)
2010/06/17 22:53:18
Use i18n-content="systemPage"
arv (Not doing code reviews)
2010/06/17 22:53:18
Use dashes for word seperators
s/systemPageNav/sy
zel
2010/06/18 02:07:05
Done.
zel
2010/06/18 02:07:05
Done.
|
+ <li class="navbar_item navbar_item_normal" id="internetPageNav" i18n-values=".innerText:internetPage"></li> |
+ <li class="navbar_item navbar_item_normal" id="basicsPageNav" i18n-values=".innerText:basicsPage"></li> |
+ <li class="navbar_item navbar_item_normal" id="personalStuffPageNav" i18n-values=".innerText:personalStuffPage"></li> |
+ <li class="navbar_item navbar_item_normal" id="underHoodPageNav" i18n-values=".innerText:underHoodPage"></li> |
+ </ul> |
+ <hr/> |
+ <ul class="navbar2"> |
+ </ul> |
+ </div> |
+ <div id="mainview"> |
+ <div class="page" id="systemPage"> |
+ <div class="section"> |
+ <div class="section_title" i18n-values=".innerText:datetime_title"></div> |
+ <div class="option"> |
+ <table class="option_control_table"> |
+ <tr> |
+ <td class="option_name" i18n-values=".innerText:timezone"></td> |
+ <td class="option_value"> |
+ <select id="timezoneSel" class="control timezone_dropdown" onchange="selectChanged(this)"></select> |
+ </td> |
+ </tr> |
+ </table> |
+ </div> |
+ </div> |
+ <div class="section"> |
+ <div class="section_title" i18n-values=".innerText:touchpad"></div> |
+ <div class="option"> |
+ <table class="option_control_table"> |
+ <tr> |
+ <td class="option_name" i18n-values=".innerText:sensitivity"></td> |
+ <td class="option_value"> |
+ <input id="sensitivityRng" type="range" min="1" max="10" class="touchSlider" style="-webkit-appearance:slider-horizontal;" onchange="rangeChanged(this)"> |
arv (Not doing code reviews)
2010/06/17 22:53:18
move css to the style element
I don't see why you
zel
2010/06/18 02:07:05
Done.
|
+ </td> |
+ </tr> |
+ <tr> |
+ <td class="option_name" i18n-values=".innerText:speed_factor"></td> |
+ <td class="option_value"> |
+ <input id="speedRng" type="range" min="1" max="10" class="touchSlider" style="-webkit-appearance:slider-horizontal;" onchange="rangeChanged(this)"> |
+ </td> |
+ </tr> |
+ <tr> |
+ <td class="option_name" colspan="2"><input id="tapToClickChk" type="checkbox" onchange="checkboxChanged(this)"/><span i18n-values=".innerText:enable_tap_to_click"></span></td> |
+ </tr> |
+ <tr> |
+ <td class="option_name" colspan="2"><input id="vertScrollChk" type="checkbox" onchange="checkboxChanged(this)"/><span i18n-values=".innerText:enable_vert_edge_scroll"></span></td> |
+ </tr> |
+ </table> |
+ </div> |
+ </div> |
+ <div class="section"> |
+ <div class="section_title" i18n-values=".innerText:language"></div> |
+ <div class="option"> |
+ <table class="option_control_table"> |
+ <tr> |
+ <td class="option_name"><button id="languageBtn" onclick="buttonClicked" i18n-values=".innerText:language_customize"></button></td> |
+ </tr> |
+ </table> |
+ </div> |
+ </div> |
+ <div class="section"> |
+ <div class="section_title" i18n-values=".innerText:accessibility_title"></div> |
+ <div class="option"> |
+ <table class="option_control_table"> |
+ <tr> |
+ <td class="option_name"><input id="accesibilityChk" onchange="checkboxChanged(this)" type="checkbox"/><span i18n-values=".innerText:accessibility"></span></td> |
+ </tr> |
+ </table> |
+ </div> |
+ </div> |
+ </div> |
+ </div> |
+</div> |
+</body> |
+</html> |