| 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 |