Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(5629)

Unified Diff: chrome/browser/resources/options.html

Issue 2781005: Option dialog DOM UI - ChromeOS System page. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src/
Patch Set: '' Created 10 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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>

Powered by Google App Engine
This is Rietveld 408576698