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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/common/extensions/docs/examples/api/fontSettings/options.html

Issue 11227018: Font Settings API: UI overhaul of example extension. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: update version and description string Created 8 years, 2 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 unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « chrome/common/extensions/docs/examples/api/fontSettings/manifest.json ('k') | chrome/common/extensions/docs/examples/api/fontSettings/options.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!doctype html> 1 <!doctype html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <title>Font Settings Sample Extension</title> 5 <title>Advanced Font Settings</title>
6 <script src="js/cr.js"></script>
7 <script src="js/cr/event_target.js"></script>
8 <script src="js/cr/ui.js"></script>
9 <script src="js/cr/ui/overlay.js"></script>
10 <script src="js/cr/ui/array_data_model.js"></script>
11 <script src="js/cr/ui/list_item.js"></script>
12 <script src="js/cr/ui/list_selection_controller.js"></script>
13 <script src="js/cr/ui/list_selection_model.js"></script>
14 <script src="js/cr/ui/list_single_selection_model.js"></script>
15 <script src="js/event_tracker.js"></script>
16 <script src="js/cr/ui/touch_handler.js"></script>
17 <script src="js/cr/ui/list.js"></script>
18 <script src="js/util.js"></script>
6 <script src="options.js"></script> 19 <script src="options.js"></script>
7 <link rel="stylesheet" href="css/chrome_shared.css"> 20 <link rel="stylesheet" href="css/chrome_shared.css">
21 <link rel="stylesheet" href="css/overlay.css">
8 <link rel="stylesheet" href="css/widgets.css"> 22 <link rel="stylesheet" href="css/widgets.css">
9 <link rel="stylesheet" href="css/uber_shared.css"> 23 <link rel="stylesheet" href="css/uber_shared.css">
24 <link rel="stylesheet" href="css/list.css">
10 <style> 25 <style>
11 body.uber-frame { 26 body.uber-frame {
12 font-family: sans-serif; 27 font-family: sans-serif;
13 -webkit-margin-start: 30px; 28 -webkit-margin-start: 30px;
29 -webkit-margin-end: 30px;
14 font-size: 14px; 30 font-size: 14px;
15 } 31 }
16 32
17 body.uber-frame section { 33 body.uber-frame section {
18 max-width: none; 34 max-width: none;
19 } 35 }
20 36
21 .font-setting-container { 37 body.uber-frame footer {
38 max-width: none;
39 min-width: 0;
40 border-top: 1px solid #DDD;
41 }
42
43 .font-input-div {
44 -webkit-margin-end: 1em;
45 width: 16em;
46 }
47
48 .preview-box {
49 background-color: white;
50 margin-top: 10px;
51 padding: 15px;
52 text-align: center;
53 }
54
55 .bordered {
56 border: 1px solid #CCC;
57 }
58
59 input[type=range] {
60 width: 14em;
61 }
62
63 #right-pane {
64 -webkit-margin-start: 1em;
65 overflow-x: auto;
66 -webkit-box-flex: 1;
67 }
68
69 .font-setting-group {
22 display: -webkit-box; 70 display: -webkit-box;
23 } 71 -webkit-box-orient: horizontal;
24 72 margin: 2em;
25 .font-input-div { 73 }
26 -webkit-margin-end: 3em; 74
27 min-width: 12em; 75 .font-setting {
76 display: -webkit-box;
77 -webkit-box-orient: vertical;
78 -webkit-box-flex: 1;
79 -webkit-margin-start: 1em;
80 }
81
82 .font-family-and-size {
83 display: -webkit-box;
84 -webkit-box-orient: horizontal;
85 }
86
87 .font-setting-label {
88 font-weight: bold;
89 width: 6em;
90 text-align: end;
91 }
92
93 .font-size-slider {
94 -webkit-margin-end: 1em;
95 }
96
97 .overlay {
98 z-index: 100;
28 } 99 }
29 </style> 100 </style>
30 </head> 101 </head>
31 <body class="uber-frame"> 102 <body class="uber-frame" style="background-color: #f2f2f2">
32 <div style="min-width: 600px;"> 103 <div id="overlay-container" class="overlay transparent" hidden>
33 <h1>Font Settings Sample Extension</h1> 104 <div id="reset-overlay" class="page">
34 <section> 105 <div class="close-button"></div>
35 <h3>Script</h3> 106 <div id="reset-this-script-overlay-dialog" hidden>
36 <div> 107 <h1>Reset</h1>
37 <select id="scriptList"> 108 <div id="reset-this-script-overlay-dialog-content" class="content-area">
38 <option value="Zyyy">Default</option> 109 </div>
39 <option value="Arab">Arabic</option> 110 <div class="action-area">
40 <option value="Armn">Armenian</option> 111 <div class="button-strip">
41 <option value="Beng">Bengali</option> 112 <button id="reset-this-script-cancel">Cancel</button>
42 <option value="Cher">Cherokee</option> 113 <button id="reset-this-script-ok">Reset</button>
43 <option value="Cyrl">Cyrillic</option> 114 </div>
44 <option value="Deva">Devanagari</option> 115 </div>
45 <option value="Ethi">Ethiopic</option> 116 </div>
46 <option value="Geor">Georgian</option> 117 <div id="reset-all-scripts-overlay-dialog" hidden>
47 <option value="Grek">Greek</option> 118 <h1>Reset</h1>
48 <option value="Gujr">Gujarati</option> 119 <div class="content-area">
49 <option value="Guru">Gurmukhi</option> 120 Are you sure you want to reset all settings?
50 <option value="Hebr">Hebrew</option> 121 </div>
51 <option value="Jpan">Japanese</option> 122 <div class="action-area">
52 <option value="Knda">Kannada</option> 123 <div class="button-strip">
53 <option value="Khmr">Khmer</option> 124 <button id="reset-all-cancel">Cancel</button>
54 <option value="Hang">Korean</option> 125 <button id="reset-all-ok">Reset</button>
55 <option value="Laoo">Lao</option> 126 </div>
56 <option value="Mlym">Malayalam</option> 127 </div>
57 <option value="Mong">Mongolian</option> 128 </div>
58 <option value="Mymr">Myanmar</option>
59 <option value="Orya">Oriya</option>
60 <option value="Hans">Simplified Chinese</option>
61 <option value="Sinh">Sinhala</option>
62 <option value="Taml">Tamil</option>
63 <option value="Telu">Telugu</option>
64 <option value="Thaa">Thaana</option>
65 <option value="Thai">Thai</option>
66 <option value="Tibt">Tibetan</option>
67 <option value="Hant">Traditional Chinese</option>
68 <option value="Cans">Unified Canadian Aboriginal Syllabics</option>
69 <option value="Yiii">Yi</option>
70 </select>
71 </div> 129 </div>
72 <div style="margin-left: 20px; overflow-x: auto;"> 130 </div>
131 <div style="display: -webkit-box; -webkit-box-orient: vertical;">
132 <h1>Advanced font settings</h1>
133 <div style="-webkit-box-flex: 1; display: -webkit-box; overflow: auto">
134 <div style="width: 20em; -webkit-box; -webkit-box-orient: vertical">
135 <h4>Script</h4>
136 <div class="bordered" style="-webkit-box-flex: 1;">
137 <list id="scriptList" style="background-color: white"></list>
138 </div>
139 </div>
140 <div id="right-pane">
141 <div class="font-setting-group">
142 <div class="font-setting-label">Standard</div>
143 <div class="font-setting">
144 <div class="font-family-and-size">
145 <div class="font-input-div">
146 <select id="standardFontList"></select>
147 </div>
148 <div class="font-size-slider">
149 <div>
150 <span style="float: left">Tiny</span>
151 <span style="float: right">Huge</span>
152 </div>
153 <input type="range" id="defaultFontSizeRange" min="0" max="36">
154 </div>
155 <input type="number" id="defaultFontSizeRocker" min="0" max="36">
156 </div>
157 <div id="standardFontSample" class="preview-box bordered"
158 style="font-family: standard;">
159 </div>
160 </div>
161 </div>
162 <div class="font-setting-group">
163 <div class="font-setting-label">Serif</div>
164 <div class="font-setting">
165 <div class="font-family-and-size">
166 <div class="font-input-div">
167 <select id="serifFontList"></select>
168 </div>
169 </div>
170 <div id="serifFontSample" class="preview-box bordered"
171 style="font-family: serif;">
172 </div>
173 </div>
174 </div>
175 <div class="font-setting-group">
176 <div class="font-setting-label">Sans-Serif</div>
177 <div class="font-setting">
178 <div class="font-family-and-size">
179 <div class="font-input-div">
180 <select id="sansSerifFontList"></select>
181 </div>
182 </div>
183 <div id="sansSerifFontSample" class="preview-box bordered"
184 style="font-family: sans-serif;">
185 </div>
186 </div>
187 </div>
188 <div class="font-setting-group">
189 <div class="font-setting-label">Fixed</div>
190 <div class="font-setting">
191 <div class="font-family-and-size">
192 <div class="font-input-div">
193 <select id="fixedFontList"></select>
194 </div>
195 <div class="font-size-slider">
196 <div>
197 <span style="float: left">Tiny</span>
198 <span style="float: right">Huge</span>
199 </div>
200 <input type="range" id="defaultFixedFontSizeRange"
201 min="0" max="36">
202 </div>
203 <input type="number" id="defaultFixedFontSizeRocker"
204 min="0" max="36">
205 </div>
206 <div id="fixedFontSample" class="preview-box bordered"
207 style="font-family: monospace;">
208 </div>
209 </div>
210 </div>
211 <div class="font-setting-group">
212 <div class="font-setting-label"></div>
213 <div class="font-setting">
214 <div class="font-family-and-size">
215 <div class="font-input-div">Minimum font size</div>
216 <div class="font-size-slider">
217 <div>
218 <span style="float: left">No minimum</span>
219 <span style="float: right">Huge</span>
220 </div>
221 <input type="range" id="minFontSizeRange" min="0" max="36">
222 </div>
223 <input type="number" id="minFontSizeRocker" min="0" max="36">
224 </div>
225 <div id="minFontSample" class="preview-box bordered"
226 style="font-family: standard">
227 </div>
228 </div>
229 </div>
230 </div>
231 </div>
232 <footer>
73 <section> 233 <section>
74 <h3>Standard</h3> 234 <button id="reset-this-script-button" style="font-size: smaller;">
75 <div class="font-setting-container"> 235 Reset settings for this script
76 <div class="font-input-div"> 236 </button>
77 <select id="standardFontList"></select> 237 <button id="reset-all-button" style="font-size: smaller;">
78 </div> 238 Reset all settings
79 <div id="standardFontSample" style="font-family: standard;"> 239 </button>
80 Lorem ipsum dolor sit amat.
81 </div>
82 </div>
83 </section> 240 </section>
84 <section> 241 </footer>
85 <h3>Serif</h3>
86 <div class="font-setting-container">
87 <div class="font-input-div">
88 <select id="serifFontList"></select>
89 </div>
90 <div id="serifFontSample" style="font-family: serif;">
91 Lorem ipsum dolor sit amat.
92 </div>
93 </div>
94 </section>
95 <section>
96 <h3>Sans-Serif</h3>
97 <div class="font-setting-container">
98 <div class="font-input-div">
99 <select id="sansSerifFontList"></select>
100 </div>
101 <div id="sansSerifFontSample" style="font-family: sans-serif;">
102 Lorem ipsum dolor sit amat.
103 </div>
104 </div>
105 </section>
106 <section>
107 <h3>Fixed</h3>
108 <div class="font-setting-container">
109 <div class="font-input-div">
110 <select id="fixedFontList"></select>
111 </div>
112 <div id="fixedFontSample" style="font-family: monospace;">
113 Lorem ipsum dolor sit amat.
114 </div>
115 </div>
116 </section>
117 </div>
118 </section>
119 <section>
120 <h3>Default Font Size</h3>
121 <div class="font-setting-container">
122 <div class="font-input-div">
123 <input type="number" id="defaultFontSize" min="0" max="99">
124 </div>
125 </div>
126 </section>
127 <section>
128 <h3>Default Fixed Font Size</h3>
129 <div class="font-setting-container">
130 <div class="font-input-div">
131 <input type="number" id="defaultFixedFontSize" min="0" max="99">
132 </div>
133 </div>
134 </section>
135 <section>
136 <h3>Minimum Font Size</h3>
137 <div class="font-setting-container">
138 <div class="font-input-div">
139 <input type="number" id="minFontSize" min="0" max="99">
140 </div>
141 <div id="minFontSample" style="font-family: standard">
142 Lorem ipsum dolor sit amat.
143 </div>
144 </div>
145 </section>
146 <section>
147 <h3>
148 <button id="clearButton">Clear All Settings</button>
149 </h3>
150 </section>
151 </div> 242 </div>
152 </div>
153 </body> 243 </body>
154 </html> 244 </html>
OLDNEW
« no previous file with comments | « chrome/common/extensions/docs/examples/api/fontSettings/manifest.json ('k') | chrome/common/extensions/docs/examples/api/fontSettings/options.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698