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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 23434003: UI refresh of Advanced Font Settings Extension (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: nits & minus image assets Created 7 years, 3 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>Advanced Font Settings</title> 5 <title>Advanced Font Settings</title>
6 <script src="js/cr.js"></script> 6 <script src="js/cr.js"></script>
7 <script src="js/cr/event_target.js"></script> 7 <script src="js/cr/ui.js"></script>
8 <script src="js/cr/ui.js"></script> 8 <script src="js/cr/ui/overlay.js"></script>
9 <script src="js/cr/ui/overlay.js"></script> 9 <script src="slider.js"></script>
10 <script src="js/cr/ui/array_data_model.js"></script> 10 <script src="pending_changes.js"></script>
11 <script src="js/cr/ui/list_item.js"></script> 11 <script src="options.js"></script>
12 <script src="js/cr/ui/list_selection_controller.js"></script> 12 <link rel="stylesheet" href="css/chrome_shared.css">
13 <script src="js/cr/ui/list_selection_model.js"></script> 13 <link rel="stylesheet" href="css/overlay.css">
14 <script src="js/cr/ui/list_single_selection_model.js"></script> 14 <link rel="stylesheet" href="css/widgets.css">
15 <script src="js/event_tracker.js"></script> 15 <link rel="stylesheet" href="css/uber_shared.css">
16 <script src="js/cr/ui/touch_handler.js"></script> 16 <link rel="stylesheet" href="slider.css">
17 <script src="js/cr/ui/list.js"></script> 17 <style>
18 <script src="js/util.js"></script> 18 body.uber-frame {
19 <script src="options.js"></script> 19 -webkit-margin-start: 18px;
20 <link rel="stylesheet" href="css/chrome_shared.css"> 20 -webkit-margin-end: 30px;
21 <link rel="stylesheet" href="css/overlay.css"> 21 }
22 <link rel="stylesheet" href="css/widgets.css"> 22
23 <link rel="stylesheet" href="css/uber_shared.css"> 23 body.uber-frame section {
24 <link rel="stylesheet" href="css/list.css"> 24 max-width: 650px;
25 <style> 25 }
26 body.uber-frame { 26
27 font-family: sans-serif; 27 body.uber-frame section:last-of-type {
28 -webkit-margin-start: 30px; 28 margin-top: 28px;
29 -webkit-margin-end: 30px; 29 }
30 font-size: 14px; 30
31 } 31 body.uber-frame header {
32 32 -webkit-padding-start: 18px;
33 body.uber-frame section { 33 left: 0;
34 max-width: none; 34 right: 0;
35 } 35 }
36 36
37 body.uber-frame footer { 37 body.uber-frame header > h1 {
38 max-width: none; 38 padding-bottom: 16px;
39 min-width: 0; 39 }
40 border-top: 1px solid #DDD; 40
41 } 41 h1 {
42 42 font-size: 16px;
43 .font-input-div { 43 }
44 -webkit-margin-end: 1em; 44
45 width: 16em; 45 .script-header {
46 } 46 -webkit-margin-before: 12px;
47 47 }
48 .preview-box { 48
49 background-color: white; 49 h3 {
50 margin-top: 10px; 50 -webkit-margin-after: 11px;
51 padding: 15px; 51 font-size: 14px;
52 text-align: center; 52 }
53 } 53
54 54 section {
55 .bordered { 55 font-size: 12px;
56 border: 1px solid #CCC; 56 }
57 } 57
58 58 .bordered {
59 input[type=range] { 59 border: 1px solid #D9D9D9;
60 width: 14em; 60 border-radius: 2px;
61 } 61 }
62 62
63 #right-pane { 63 .smaller {
64 -webkit-margin-start: 1em; 64 font-size: smaller;
65 overflow-x: auto; 65 }
66 -webkit-box-flex: 1; 66
67 } 67 .font-settings-div {
68 68 -webkit-margin-end: 5px;
69 .font-setting-group { 69 width: 180px;
70 display: -webkit-box; 70 }
71 -webkit-box-orient: horizontal; 71
72 margin: 2em; 72 .font-settings-div:first-of-type {
73 } 73 width: 138px;
74 74 }
75 .font-setting { 75
76 display: -webkit-box; 76 .font-settings-div > :first-child {
77 -webkit-box-orient: vertical; 77 -webkit-margin-after: 10px;
78 -webkit-box-flex: 1; 78 }
79 -webkit-margin-start: 1em; 79
80 } 80 .font-settings-div > * {
81 81 -webkit-margin-after: 14px;
82 .font-family-and-size { 82 }
83 display: -webkit-box; 83
84 -webkit-box-orient: horizontal; 84 .font-settings-row {
85 } 85 display: -webkit-flex;
86 86 width: 800px;
87 .font-setting-label { 87 }
88 font-weight: bold; 88
89 width: 6em; 89 .sample-text-div {
90 text-align: end; 90 display: -webkit-flex;
91 } 91 white-space: nowrap;
92 92 width: 100%;
93 .font-size-slider { 93 overflow: hidden;
94 -webkit-margin-end: 1em; 94 }
95 } 95
96 96 .sample-text-span {
97 .overlay { 97 margin-top: auto;
98 z-index: 100; 98 margin-bottom: auto;
99 } 99 margin-left: 20px;
100 </style> 100 }
101
102 #overlay-container {
103 z-index: 100;
104 }
105
106 #standardFontSample {
107 font-family: standard;
108 }
109
110 #serifFontSample {
111 font-family: serif;
112 }
113
114 #sansSerifFontSample {
115 font-family: sans-serif;
116 }
117
118 #fixedFontSample {
119 font-family: monospace;
120 }
121
122 #minFontSample {
123 font-family: standard;
124 }
125
126 select {
127 width: 100%;
128 }
129
130 #footer > button {
131 -webkit-padding-start: 9px;
132 -webkit-padding-end: 9px;
133 }
134
135 #footer > #apply-settings {
136 -webkit-padding-start: 17px;
137 -webkit-padding-end: 17px;
138 }
139
140 #apply-settings:enabled {
141 background-color: #4f7dd6;
142 background-image: none;
143 border-color: #2a4aac;
144 box-shadow: none;
145 color: #fbfafb;
146 text-shadow: none;
147 }
148
149 .slider-legend {
150 position: relative;
151 /* This offset is needed to get the legend to align with the slider. */
152 top: -7px;
153 }
154
155 .slider-container {
156 display: inline-block;
157 position: relative;
158 top: 1px;
159 height: 24px;
160 width: 88px;
161 }
162 </style>
101 </head> 163 </head>
102 <body class="uber-frame" style="background-color: #f2f2f2"> 164 <body class="uber-frame">
103 <div id="overlay-container" class="overlay transparent" hidden> 165 <div id="overlay-container" class="overlay" hidden>
104 <div id="reset-overlay" class="page"> 166 <div id="reset-overlay" class="page">
105 <div class="close-button"></div> 167 <div class="close-button"></div>
106 <div id="reset-this-script-overlay-dialog" hidden> 168 <div id="reset-this-script-overlay-dialog" hidden>
107 <h1>Reset</h1> 169 <h1>Reset</h1>
108 <div id="reset-this-script-overlay-dialog-content" class="content-area"> 170 <div id="reset-this-script-overlay-dialog-content" class="content-area">
109 </div> 171 </div>
110 <div class="action-area"> 172 <div class="action-area">
111 <div class="button-strip"> 173 <div class="button-strip">
112 <button id="reset-this-script-cancel">Cancel</button> 174 <button id="reset-this-script-cancel">Cancel</button>
113 <button id="reset-this-script-ok">Reset</button> 175 <button id="reset-this-script-ok">Reset</button>
114 </div> 176 </div>
115 </div> 177 </div>
116 </div> 178 </div>
117 <div id="reset-all-scripts-overlay-dialog" hidden> 179 <div id="reset-all-scripts-overlay-dialog" hidden>
118 <h1>Reset</h1> 180 <h1>Reset</h1>
119 <div class="content-area"> 181 <div class="content-area">
120 Are you sure you want to reset all settings? 182 Are you sure you want to reset all settings?
121 </div> 183 </div>
122 <div class="action-area"> 184 <div class="action-area">
123 <div class="button-strip"> 185 <div class="button-strip">
124 <button id="reset-all-cancel">Cancel</button> 186 <button id="reset-all-cancel">Cancel</button>
125 <button id="reset-all-ok">Reset</button> 187 <button id="reset-all-ok">Reset</button>
126 </div>
127 </div> 188 </div>
128 </div> 189 </div>
129 </div> 190 </div>
130 </div> 191 </div>
131 <div style="display: -webkit-box; -webkit-box-orient: vertical;"> 192 </div>
132 <h1>Advanced font settings</h1> 193 <div class="page">
133 <div style="-webkit-box-flex: 1; display: -webkit-box; overflow: auto"> 194 <header style="-webkit-transform: translateX(0px);">
134 <div style="width: 20em; -webkit-box; -webkit-box-orient: vertical"> 195 <h1>Advanced Font Settings</h1>
135 <h4>Script</h4> 196 </header>
136 <div class="bordered" style="-webkit-box-flex: 1;"> 197 <section>
137 <list id="scriptList" style="background-color: white"></list> 198 <h3 class="script-header">Script</h3>
138 </div> 199 <div class="font-settings-row">
139 </div> 200 <select style="width: 200px" id="scriptList"></select>
140 <div id="right-pane"> 201 </div>
141 <div class="font-setting-group"> 202 </section>
142 <div class="font-setting-label">Standard</div> 203 <section>
143 <div class="font-setting"> 204 <h3>Proportional fonts</h3>
144 <div class="font-family-and-size"> 205 <div class="font-settings-row">
145 <div class="font-input-div"> 206 <div class="font-settings-div">
146 <select id="standardFontList"></select> 207 <div id="defaultFontSizeLabel"></div>
147 </div> 208 <div style="width: 100%; -webkit-margin-after: 0">
148 <div class="font-size-slider"> 209 <span class="slider-legend smaller">Aa</span>
149 <div> 210 <div id="defaultFontSizeSliderContainer" class="slider-container"></di v>
150 <span style="float: left">Tiny</span> 211 <span class="slider-legend">Aa</span>
151 <span style="float: right">Huge</span> 212 </div>
152 </div> 213 </div>
153 <input type="range" id="defaultFontSizeRange" min="0" max="36"> 214 <div class="font-settings-div">
154 </div> 215 <div>Standard</div>
155 <input type="number" id="defaultFontSizeRocker" min="0" max="36"> 216 <div><select id="standardFontList"></select></div>
156 </div> 217 </div>
157 <div id="standardFontSample" class="preview-box bordered" 218 <div class="font-settings-div">
158 style="font-family: standard;"> 219 <div>Serif</div>
159 </div> 220 <div><select id="serifFontList"></select></div>
160 </div> 221 </div>
161 </div> 222 <div class="font-settings-div">
162 <div class="font-setting-group"> 223 <div>Sans-Serif</div>
163 <div class="font-setting-label">Serif</div> 224 <div><select id="sansSerifFontList"></select></div>
164 <div class="font-setting"> 225 </div>
165 <div class="font-family-and-size"> 226 </div>
166 <div class="font-input-div"> 227 <div class="bordered" style="position: relative; left: 0; right: 0; height: 160px; width: 702px;">
167 <select id="serifFontList"></select> 228 <div class="sample-text-div" style="height: 33%">
168 </div> 229 <span id='standardFontSample' class="sample-text-span">
169 </div> 230 The quick brown fox jumps over the lazy dog.
170 <div id="serifFontSample" class="preview-box bordered" 231 </span>
171 style="font-family: serif;"> 232 </div>
172 </div> 233 <div class="sample-text-div" style="height: 33%">
173 </div> 234 <span id="serifFontSample" class="sample-text-span">
174 </div> 235 The quick brown fox jumps over the lazy dog.
175 <div class="font-setting-group"> 236 </span>
176 <div class="font-setting-label">Sans-Serif</div> 237 </div>
177 <div class="font-setting"> 238 <div class="sample-text-div" style="height: 33%">
178 <div class="font-family-and-size"> 239 <span id="sansSerifFontSample" class="sample-text-span">
179 <div class="font-input-div"> 240 The quick brown fox jumps over the lazy dog.
180 <select id="sansSerifFontList"></select> 241 </span>
181 </div> 242 </div>
182 </div> 243 </div>
183 <div id="sansSerifFontSample" class="preview-box bordered" 244 </section>
184 style="font-family: sans-serif;"> 245 <section>
185 </div> 246 <h3>Fixed-width fonts</h3>
186 </div> 247 <div class="font-settings-row">
187 </div> 248 <div class="font-settings-div">
188 <div class="font-setting-group"> 249 <div id="fixedFontSizeLabel"></div>
189 <div class="font-setting-label">Fixed</div> 250 <div style="width: 100%; -webkit-margin-after: 0">
190 <div class="font-setting"> 251 <span class="slider-legend smaller">Aa</span>
191 <div class="font-family-and-size"> 252 <div id="defaultFixedFontSizeSliderContainer" class="slider-container" ></div>
192 <div class="font-input-div"> 253 <span class="slider-legend">Aa</span>
193 <select id="fixedFontList"></select> 254 </div>
194 </div> 255 </div>
195 <div class="font-size-slider"> 256 <div class="font-settings-div">
196 <div> 257 <div>Fixed</div>
197 <span style="float: left">Tiny</span> 258 <div><select id="fixedFontList"></select></div>
198 <span style="float: right">Huge</span> 259 </div>
199 </div> 260 </div>
200 <input type="range" id="defaultFixedFontSizeRange" 261 <div class="bordered" style="position: relative; overflow: hidden; left: 0; right: 0; height: 58px; width: 702px;">
201 min="0" max="36"> 262 <div class="sample-text-div" style="height: 100%">
202 </div> 263 <span id="fixedFontSample" class="sample-text-span">
203 <input type="number" id="defaultFixedFontSizeRocker" 264 The quick brown fox jumps over the lazy dog.
204 min="0" max="36"> 265 </span>
205 </div> 266 </div>
206 <div id="fixedFontSample" class="preview-box bordered" 267 </div>
207 style="font-family: monospace;"> 268 </section>
208 </div> 269 <section>
209 </div> 270 <h3>Minimum font size</h3>
210 </div> 271 <div class="font-settings-row">
211 <div class="font-setting-group"> 272 <div class="font-settings-div">
212 <div class="font-setting-label"></div> 273 <div id="minFontSizeLabel" style="-webkit-margin-after: 8px"></div>
213 <div class="font-setting"> 274 <div style="width: 100%; -webkit-margin-after: 12px">
214 <div class="font-family-and-size"> 275 <span class="slider-legend smaller">Aa</span>
215 <div class="font-input-div">Minimum font size</div> 276 <div id="minFontSizeSliderContainer" class="slider-container"></div>
216 <div class="font-size-slider"> 277 <span class="slider-legend">Aa</span>
217 <div> 278 </div>
218 <span style="float: left">No minimum</span> 279 </div>
219 <span style="float: right">Huge</span> 280 </div>
220 </div> 281 <div class="bordered" style="position: relative; overflow: hidden; left: 0; right: 0; height: 58px; width: 702px;">
221 <input type="range" id="minFontSizeRange" min="0" max="36"> 282 <div class="sample-text-div" style="height: 100%">
222 </div> 283 <span id="minFontSample" class="sample-text-span">
223 <input type="number" id="minFontSizeRocker" min="0" max="36"> 284 The quick brown fox jumps over the lazy dog.
224 </div> 285 </span>
225 <div id="minFontSample" class="preview-box bordered" 286 </div>
226 style="font-family: standard"> 287 </div>
227 </div> 288 </section>
228 </div> 289 <section id="footer">
229 </div> 290 <button id="apply-settings">
230 </div> 291 Apply settings
231 </div> 292 </button>
232 <footer> 293 <button id="reset-this-script-button">
233 <section> 294 Reset settings for this script
234 <button id="reset-this-script-button" style="font-size: smaller;"> 295 </button>
235 Reset settings for this script 296 <button id="reset-all-button">
236 </button> 297 Reset all settings
237 <button id="reset-all-button" style="font-size: smaller;"> 298 </button>
238 Reset all settings 299 </section>
239 </button> 300 </div>
240 </section>
241 </footer>
242 </div>
243 </body> 301 </body>
244 </html> 302 </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