OLD | NEW |
| (Empty) |
1 <html> | |
2 <head> | |
3 <title>Caret Browsing Options</title> | |
4 <style> | |
5 body { | |
6 font-family: Lucida Grande, sans-serif, arial, helvetica; | |
7 width: 920px; | |
8 margin-left: auto; | |
9 margin-right: auto; | |
10 } | |
11 .banner { | |
12 width: 100%; | |
13 float: left; | |
14 } | |
15 .banner_left { | |
16 padding: 8px; | |
17 float: left; | |
18 } | |
19 .banner_right { | |
20 padding: 8px; | |
21 } | |
22 .body_wrapper { | |
23 width: 100%; | |
24 float: left; | |
25 } | |
26 .body_left { | |
27 border: 0; | |
28 padding: 0; | |
29 margin: 0; | |
30 width: 50%; | |
31 float: left; | |
32 } | |
33 .body_right { | |
34 border: 0; | |
35 padding: 0; | |
36 margin: 0; | |
37 width: 46%; | |
38 float: left; | |
39 } | |
40 .body_inner { | |
41 padding: 0 32px; | |
42 } | |
43 body.mac .nonmac { | |
44 display: none; | |
45 } | |
46 body.nonmac .mac { | |
47 display: none; | |
48 } | |
49 body.cros .noncros { | |
50 display: none; | |
51 } | |
52 body.noncros .cros { | |
53 display: none; | |
54 } | |
55 .key { | |
56 border: 1px solid #666; | |
57 color: #444; | |
58 padding: 0.2em 0.8em; | |
59 margin: 0 0.3em; | |
60 background: #eee; | |
61 } | |
62 p { | |
63 line-height: 1.6em; | |
64 } | |
65 fieldset { | |
66 margin-bottom: 1em; | |
67 } | |
68 fieldset div { | |
69 margin: 0.6em 0; | |
70 } | |
71 p.cros img { | |
72 vertical-align: middle; | |
73 } | |
74 </style> | |
75 <link href="caretbrowsing.css" rel="stylesheet" type="text/css"> | |
76 <script src="accessibility_utils.js"></script> | |
77 <script src="traverse_util.js"></script> | |
78 <script src="caretbrowsing.js"></script> | |
79 <script src="options.js"></script> | |
80 </head> | |
81 <body caretbrowsing="on"> | |
82 | |
83 <div class="banner"> | |
84 <div class="banner_left"> | |
85 <img src="caret_128.png" class="logo" alt=""> | |
86 </div> | |
87 <div class="banner_right"> | |
88 <h1 i18n-content="appName">Caret Browsing</h1> | |
89 <p i18n-content="subheading1"> | |
90 This extension gives you a movable cursor in the web page, | |
91 allowing you to select text with the keyboard. | |
92 </p> | |
93 <p i18n-content="subheading2"> | |
94 Try it out now - Caret Browsing is always enabled on this page! | |
95 </p> | |
96 </div> | |
97 </div> | |
98 | |
99 <div class="body_wrapper"> | |
100 <div class="body_left"> | |
101 <div class="body_inner"> | |
102 <h2 i18n-content="keyboardCommands">Keyboard Commands</h2> | |
103 | |
104 <p class="noncros" i18n-content="enableDisableNonCros"> | |
105 Press <span class="key">F7</span> to turn on Caret Browsing. | |
106 Press it again to turn it off. | |
107 </p> | |
108 <p class="cros" i18n-content="enableDisableCros"> | |
109 Press <span class="key">Alt</span> + <img src="increase_brightness.png">
(the Increase Brightness key, or F7) to turn on Caret Browsing. | |
110 Press it again to turn it off. | |
111 </p> | |
112 | |
113 <div i18n-content="navHelp"> | |
114 <p> | |
115 Use arrow keys to move throughout the document. | |
116 </p> | |
117 | |
118 <p> | |
119 Click anywhere to move the cursor to that location. | |
120 </p> | |
121 | |
122 <p> | |
123 Press <span class="key">Shift</span> + arrows to select text. | |
124 </p> | |
125 </div> | |
126 | |
127 <p class="nonmac" i18n-content="moveByWordsNonMac"> | |
128 Hold down <span class="key">Control</span> to move by words. | |
129 </p> | |
130 <p class="mac" i18n-content="moveByWordsMac"> | |
131 Hold down <span class="key">Option</span> to move by words. | |
132 </p> | |
133 | |
134 <div i18n-content="focusHelp"> | |
135 <p> | |
136 When you reach a link or control, it is automatically focused. | |
137 Press <span class="key">Enter</span> to click a link or button. | |
138 </p> | |
139 | |
140 <p> | |
141 When a focused control (like a text box or a list box) is capturing | |
142 arrow keys, press <span class="key">Esc</span> followed by the | |
143 left or right arrow to continue Caret Browsing. | |
144 </p> | |
145 | |
146 <p> | |
147 Alternatively, press <span class="key">Tab</span> to move to the | |
148 next focusable control. | |
149 </p> | |
150 </div> | |
151 </div> | |
152 </div> | |
153 <div class="body_right"> | |
154 <div class="body_inner"> | |
155 <h2>Visual Feedback</h2> | |
156 | |
157 <fieldset> | |
158 <legend i18n-content="whenEnabled"> | |
159 When Caret Browsing is enabled: | |
160 </legend> | |
161 | |
162 <div> | |
163 <input type="radio" id="onenable_anim" name="onenable" value="anim"> | |
164 <label for="onenable_anim" i18n-content="animation"> | |
165 Highlight the cursor position with an animation. | |
166 </label> | |
167 </div> | |
168 | |
169 <div> | |
170 <input type="radio" id="onenable_flash" name="onenable" value="flash"> | |
171 <label for="onenable_flash" i18n-content="flash"> | |
172 Highlight the cursor position with a quick flash. | |
173 </label> | |
174 </div> | |
175 | |
176 <div> | |
177 <input type="radio" id="onenable_nothing" name="onenable" value="none"> | |
178 <label for="onenable_nothing" i18n-content="noFeedback"> | |
179 No feedback, just show the cursor. | |
180 </label> | |
181 </div> | |
182 | |
183 </fieldset> | |
184 | |
185 <fieldset> | |
186 <legend i18n-content="jump"> | |
187 When the caret jumps by a large distance: | |
188 </legend> | |
189 | |
190 <div> | |
191 <input type="radio" id="onjump_anim" name="onjump" value="anim"> | |
192 <label for="onjump_anim" i18n-content="animation"> | |
193 Highlight the cursor position with an animation. | |
194 </label> | |
195 </div> | |
196 | |
197 <div> | |
198 <input type="radio" id="onjump_flash" name="onjump" value="flash"> | |
199 <label for="onjump_flash" i18n-content="flash"> | |
200 Highlight the cursor position with a quick flash. | |
201 </label> | |
202 </div> | |
203 | |
204 <div> | |
205 <input type="radio" id="onjump_nothing" name="onjump" value="none"> | |
206 <label for="onjump_nothing" i18n-content="noFeedback"> | |
207 No feedback, just move the cursor. | |
208 </label> | |
209 </div> | |
210 | |
211 </fieldset> | |
212 | |
213 </div> | |
214 </div> | |
215 </div> | |
216 | |
217 </body> | |
218 </html> | |
OLD | NEW |