| Index: ui/accessibility/extensions/caretbrowsing/options.html
|
| diff --git a/ui/accessibility/extensions/caretbrowsing/options.html b/ui/accessibility/extensions/caretbrowsing/options.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..6a463b8075c3d9938449cf38939abb0c8bec53a0
|
| --- /dev/null
|
| +++ b/ui/accessibility/extensions/caretbrowsing/options.html
|
| @@ -0,0 +1,218 @@
|
| +<html>
|
| +<head>
|
| + <title>Caret Browsing Options</title>
|
| + <style>
|
| + body {
|
| + font-family: Lucida Grande, sans-serif, arial, helvetica;
|
| + width: 920px;
|
| + margin-left: auto;
|
| + margin-right: auto;
|
| + }
|
| + .banner {
|
| + width: 100%;
|
| + float: left;
|
| + }
|
| + .banner_left {
|
| + padding: 8px;
|
| + float: left;
|
| + }
|
| + .banner_right {
|
| + padding: 8px;
|
| + }
|
| + .body_wrapper {
|
| + width: 100%;
|
| + float: left;
|
| + }
|
| + .body_left {
|
| + border: 0;
|
| + padding: 0;
|
| + margin: 0;
|
| + width: 50%;
|
| + float: left;
|
| + }
|
| + .body_right {
|
| + border: 0;
|
| + padding: 0;
|
| + margin: 0;
|
| + width: 46%;
|
| + float: left;
|
| + }
|
| + .body_inner {
|
| + padding: 0 32px;
|
| + }
|
| + body.mac .nonmac {
|
| + display: none;
|
| + }
|
| + body.nonmac .mac {
|
| + display: none;
|
| + }
|
| + body.cros .noncros {
|
| + display: none;
|
| + }
|
| + body.noncros .cros {
|
| + display: none;
|
| + }
|
| + .key {
|
| + border: 1px solid #666;
|
| + color: #444;
|
| + padding: 0.2em 0.8em;
|
| + margin: 0 0.3em;
|
| + background: #eee;
|
| + }
|
| + p {
|
| + line-height: 1.6em;
|
| + }
|
| + fieldset {
|
| + margin-bottom: 1em;
|
| + }
|
| + fieldset div {
|
| + margin: 0.6em 0;
|
| + }
|
| + p.cros img {
|
| + vertical-align: middle;
|
| + }
|
| + </style>
|
| + <link href="caretbrowsing.css" rel="stylesheet" type="text/css">
|
| + <script src="accessibility_utils.js"></script>
|
| + <script src="traverse_util.js"></script>
|
| + <script src="caretbrowsing.js"></script>
|
| + <script src="options.js"></script>
|
| +</head>
|
| +<body caretbrowsing="on">
|
| +
|
| +<div class="banner">
|
| + <div class="banner_left">
|
| + <img src="caret_128.png" class="logo" alt="">
|
| + </div>
|
| + <div class="banner_right">
|
| + <h1 i18n-content="appName">Caret Browsing</h1>
|
| + <p i18n-content="subheading1">
|
| + This extension gives you a movable cursor in the web page,
|
| + allowing you to select text with the keyboard.
|
| + </p>
|
| + <p i18n-content="subheading2">
|
| + Try it out now - Caret Browsing is always enabled on this page!
|
| + </p>
|
| + </div>
|
| +</div>
|
| +
|
| +<div class="body_wrapper">
|
| + <div class="body_left">
|
| + <div class="body_inner">
|
| + <h2 i18n-content="keyboardCommands">Keyboard Commands</h2>
|
| +
|
| + <p class="noncros" i18n-content="enableDisableNonCros">
|
| + Press <span class="key">F7</span> to turn on Caret Browsing.
|
| + Press it again to turn it off.
|
| + </p>
|
| + <p class="cros" i18n-content="enableDisableCros">
|
| + Press <span class="key">Alt</span> + <img src="increase_brightness.png"> (the Increase Brightness key, or F7) to turn on Caret Browsing.
|
| + Press it again to turn it off.
|
| + </p>
|
| +
|
| + <div i18n-content="navHelp">
|
| + <p>
|
| + Use arrow keys to move throughout the document.
|
| + </p>
|
| +
|
| + <p>
|
| + Click anywhere to move the cursor to that location.
|
| + </p>
|
| +
|
| + <p>
|
| + Press <span class="key">Shift</span> + arrows to select text.
|
| + </p>
|
| + </div>
|
| +
|
| + <p class="nonmac" i18n-content="moveByWordsNonMac">
|
| + Hold down <span class="key">Control</span> to move by words.
|
| + </p>
|
| + <p class="mac" i18n-content="moveByWordsMac">
|
| + Hold down <span class="key">Option</span> to move by words.
|
| + </p>
|
| +
|
| + <div i18n-content="focusHelp">
|
| + <p>
|
| + When you reach a link or control, it is automatically focused.
|
| + Press <span class="key">Enter</span> to click a link or button.
|
| + </p>
|
| +
|
| + <p>
|
| + When a focused control (like a text box or a list box) is capturing
|
| + arrow keys, press <span class="key">Esc</span> followed by the
|
| + left or right arrow to continue Caret Browsing.
|
| + </p>
|
| +
|
| + <p>
|
| + Alternatively, press <span class="key">Tab</span> to move to the
|
| + next focusable control.
|
| + </p>
|
| + </div>
|
| + </div>
|
| + </div>
|
| + <div class="body_right">
|
| + <div class="body_inner">
|
| + <h2>Visual Feedback</h2>
|
| +
|
| + <fieldset>
|
| + <legend i18n-content="whenEnabled">
|
| + When Caret Browsing is enabled:
|
| + </legend>
|
| +
|
| + <div>
|
| + <input type="radio" id="onenable_anim" name="onenable" value="anim">
|
| + <label for="onenable_anim" i18n-content="animation">
|
| + Highlight the cursor position with an animation.
|
| + </label>
|
| + </div>
|
| +
|
| + <div>
|
| + <input type="radio" id="onenable_flash" name="onenable" value="flash">
|
| + <label for="onenable_flash" i18n-content="flash">
|
| + Highlight the cursor position with a quick flash.
|
| + </label>
|
| + </div>
|
| +
|
| + <div>
|
| + <input type="radio" id="onenable_nothing" name="onenable" value="none">
|
| + <label for="onenable_nothing" i18n-content="noFeedback">
|
| + No feedback, just show the cursor.
|
| + </label>
|
| + </div>
|
| +
|
| + </fieldset>
|
| +
|
| + <fieldset>
|
| + <legend i18n-content="jump">
|
| + When the caret jumps by a large distance:
|
| + </legend>
|
| +
|
| + <div>
|
| + <input type="radio" id="onjump_anim" name="onjump" value="anim">
|
| + <label for="onjump_anim" i18n-content="animation">
|
| + Highlight the cursor position with an animation.
|
| + </label>
|
| + </div>
|
| +
|
| + <div>
|
| + <input type="radio" id="onjump_flash" name="onjump" value="flash">
|
| + <label for="onjump_flash" i18n-content="flash">
|
| + Highlight the cursor position with a quick flash.
|
| + </label>
|
| + </div>
|
| +
|
| + <div>
|
| + <input type="radio" id="onjump_nothing" name="onjump" value="none">
|
| + <label for="onjump_nothing" i18n-content="noFeedback">
|
| + No feedback, just move the cursor.
|
| + </label>
|
| + </div>
|
| +
|
| + </fieldset>
|
| +
|
| + </div>
|
| + </div>
|
| +</div>
|
| +
|
| +</body>
|
| +</html>
|
|
|