Chromium Code Reviews| 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> |