OLD | NEW |
1 # What is chrome://settings? | 1 # What is chrome://settings? |
2 | 2 |
3 Chrome (version 10 and above) uses WebUI settings by default for all platforms. | 3 Chrome (version 10 and above) uses WebUI settings by default for all platforms. |
4 Access it via the wrench menu ("Preferences" on Mac and Linux; "Options" on | 4 Access it via the wrench menu ("Preferences" on Mac and Linux; "Options" on |
5 Windows and ChromeOS), or by typing chrome://settings into the address bar. | 5 Windows and ChromeOS), or by typing chrome://settings into the address bar. |
6 | 6 |
7 One advantage of chrome://settings over platform-native dialogs is that it is | 7 One advantage of chrome://settings over platform-native dialogs is that it is |
8 shared by all platforms; therefore, it is easier to add new options UI and to | 8 shared by all platforms; therefore, it is easier to add new options UI and to |
9 keep all platforms in sync. | 9 keep all platforms in sync. |
10 | 10 |
(...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
71 | 71 |
72 Add the string to `chrome/app/generated_resources.grd` near related strings. No | 72 Add the string to `chrome/app/generated_resources.grd` near related strings. No |
73 trailing punctuation; sentence case. | 73 trailing punctuation; sentence case. |
74 | 74 |
75 ### 3. Changing WebUI Handler | 75 ### 3. Changing WebUI Handler |
76 | 76 |
77 For simple prefs, the UI is kept in sync with the value automagically (see | 77 For simple prefs, the UI is kept in sync with the value automagically (see |
78 `CoreOptionsHandler`). Find the handler most closely relevant to your pref. The | 78 `CoreOptionsHandler`). Find the handler most closely relevant to your pref. The |
79 only action we need take here is to make the page aware of the new string. | 79 only action we need take here is to make the page aware of the new string. |
80 Locate the method in the handler called `GetLocalizedStrings` and look at its | 80 Locate the method in the handler called `GetLocalizedStrings` and look at its |
81 body for examples of `SetString` usage. The first parameter is the javascript | 81 body for examples of `SetString` usage. The first parameter is the JavaScript |
82 name for the string. | 82 name for the string. |
83 | 83 |
84 ### 4. HTML/CSS/JS | 84 ### 4. HTML/CSS/JS |
85 | 85 |
86 An example of the form a checkbox should take in html: | 86 An example of the form a checkbox should take in html: |
87 | 87 |
88 ```html | 88 ```html |
89 <label class="checkbox"> | 89 <label class="checkbox"> |
90 <input id="clear-cookies-on-exit" | 90 <input id="clear-cookies-on-exit" |
91 pref="profile.clear_site_data_on_exit" type="checkbox"> | 91 pref="profile.clear_site_data_on_exit" type="checkbox"> |
92 <span i18n-content="clearCookiesOnExit"></span> | 92 <span i18n-content="clearCookiesOnExit"></span> |
93 </label> | 93 </label> |
94 ``` | 94 ``` |
95 | 95 |
96 Of note: | 96 Of note: |
97 | 97 |
98 * the `checkbox` class allows us to style all checkboxes the same via CSS | 98 * the `checkbox` class allows us to style all checkboxes the same via CSS |
99 * the class and ID are in dash-form * the i18n-content value is in camelCase | 99 * the class and ID are in dash-form * the i18n-content value is in camelCase |
100 * the pref attribute matches that which is defined in | 100 * the pref attribute matches that which is defined in |
101 `chrome/common/pref_names.cc` and allows the prefs framework to | 101 `chrome/common/pref_names.cc` and allows the prefs framework to |
102 automatically keep it in sync with the value in C++ | 102 automatically keep it in sync with the value in C++ |
103 * the `i18n-content` value matches the string we defined in the WebUI handler. | 103 * the `i18n-content` value matches the string we defined in the WebUI handler. |
104 The `textContent` of the `span` will automatically be set to the associated | 104 The `textContent` of the `span` will automatically be set to the associated |
105 text. | 105 text. |
106 | 106 |
107 In this example, no additional JS or CSS are needed. | 107 In this example, no additional JS or CSS are needed. |
OLD | NEW |