Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Bug 830644 - [Camera][Hidpi] Support high resolution devices

  • Loading branch information...
commit f778cbca2f61ff549c03bfa9b17159ae78e3f553 1 parent bf0089f
Rex KM Lee authored March 20, 2013

Showing 38 changed files with 103 additions and 95 deletions. Show diff stats Hide diff stats

  1. 1  apps/camera/index.html
  2. 86  apps/camera/style/VideoPlayer.css
  3. 64  apps/camera/style/camera.css
  4. 47  apps/camera/style/filmstrip.css
  5. BIN  apps/camera/style/icons/60/Camera@2x.png
  6. BIN  apps/camera/style/icons/Camera@2x.png
  7. BIN  apps/camera/style/images/actionicon_cancel.png
  8. BIN  apps/camera/style/images/actionicon_cancel@2x.png
  9. BIN  apps/camera/style/images/camera@2x.png
  10. BIN  apps/camera/style/images/delete.png
  11. BIN  apps/camera/style/images/delete@2x.png
  12. BIN  apps/camera/style/images/flash_auto@2x.png
  13. BIN  apps/camera/style/images/flash_off@2x.png
  14. BIN  apps/camera/style/images/flash_on@2x.png
  15. BIN  apps/camera/style/images/flash_torch@2x.png
  16. BIN  apps/camera/style/images/grid@2x.png
  17. BIN  apps/camera/style/images/hud_button_underlay.png
  18. BIN  apps/camera/style/images/hud_button_underlay@2x.png
  19. BIN  apps/camera/style/images/hud_button_underlay_focus@2x.png
  20. BIN  apps/camera/style/images/play_overlay.png
  21. BIN  apps/camera/style/images/play_overlay@2x.png
  22. BIN  apps/camera/style/images/share.png
  23. BIN  apps/camera/style/images/share@2x.png
  24. BIN  apps/camera/style/images/stop.png
  25. BIN  apps/camera/style/images/stop@2x.png
  26. BIN  apps/camera/style/images/toggle_back@2x.png
  27. BIN  apps/camera/style/images/toggle_front@2x.png
  28. BIN  apps/camera/style/images/video.png
  29. BIN  apps/camera/style/images/video@2x.png
  30. BIN  apps/camera/style/images/video_pause_button.png
  31. BIN  apps/camera/style/images/video_pause_button@2x.png
  32. BIN  apps/camera/style/images/video_play_button.png
  33. BIN  apps/camera/style/images/video_play_button@2x.png
  34. BIN  apps/camera/style/images/video_play_focus.png
  35. BIN  apps/camera/style/images/video_play_focus@2x.png
  36. BIN  apps/camera/style/images/video_play_normal.png
  37. BIN  apps/camera/style/images/video_play_normal@2.png
  38. BIN  apps/camera/style/images/video_play_normal@2x.png
1  apps/camera/index.html
@@ -7,6 +7,7 @@
7 7
     <link rel="resource" type="application/l10n" href="locales/locales.ini" />
8 8
     <link rel="resource" type="application/l10n" href="/shared/locales/date.ini" />
9 9
     <link type="text/css" rel="stylesheet" href="style/camera.css"/>
  10
+    <link type="text/css" rel="stylesheet" href="shared/style/responsive.css"/>
10 11
 
11 12
     <script defer src="/shared/js/l10n.js"></script>
12 13
     <!-- The following scripts are lazy loaded but left here to ensure
86  apps/camera/style/VideoPlayer.css
@@ -9,28 +9,28 @@
9 9
 /* video player controls */
10 10
 .videoPlayerControls {
11 11
   position: absolute;
12  
-  left: 0px;
13  
-  right: 0px;
14  
-  top: 0px;
15  
-  bottom: 0px;
  12
+  left: 0;
  13
+  right: 0;
  14
+  top: 0;
  15
+  bottom: 0;
16 16
   margin: 0;
17 17
   padding: 0;
18 18
 }
19 19
 
20 20
 .videoPlayerPlayButton {
21 21
   position: absolute;
22  
-  width: 106px;
23  
-  height: 106px;
24  
-  left: calc(50% - 53px);
25  
-  top: calc(50% - 53px);
26  
-  background: url("images/video_play_button.png") center no-repeat,
27  
-              url("images/video_play_normal.png") center no-repeat;
  22
+  width: 10.6rem;
  23
+  height: 10.6rem;
  24
+  left: calc(50% - 5.3rem);
  25
+  top: calc(50% - 5.3rem);
  26
+  background: url("images/video_play_button.png")no-repeat center center / 10.6rem,
  27
+              url("images/video_play_normal.png")no-repeat center center / 10.6rem;
28 28
   border-width: 0;
29 29
 }
30 30
 
31 31
 .videoPlayerPlayButton:active {
32  
-  background: url("images/video_play_button.png") center no-repeat,
33  
-              url("images/video_play_focus.png") center no-repeat
  32
+  background: url("images/video_play_button.png")no-repeat center center / 10.6rem,
  33
+              url("images/video_play_focus.png")no-repeat center center / 10.6rem
34 34
 }
35 35
 
36 36
 .videoPlayerPlayButton.hidden {
@@ -39,10 +39,10 @@
39 39
 
40 40
 .videoPlayerFooter {
41 41
   position: absolute;
42  
-  left: 0px;
43  
-  right: 0px;
44  
-  bottom: 0px;
45  
-  height: 50px;
  42
+  left: 0;
  43
+  right: 0;
  44
+  bottom: 0;
  45
+  height: 5rem;
46 46
   margin: 0;
47 47
   padding: 0;
48 48
   background-color: rgba(0, 0, 0, 0.3);
@@ -60,21 +60,21 @@
60 60
 
61 61
 .videoPlayerPauseButton {
62 62
   position: absolute;
63  
-  width: 100px;
64  
-  height: 100px;
  63
+  width: 10rem;
  64
+  height: 10rem;
65 65
   padding: 0;
66 66
   margin: 0;
67  
-  background: url("images/video_pause_button.png") center no-repeat,
  67
+  background: url("images/video_pause_button.png") no-repeat center center / 9.6rem,
68 68
               rgba(0,0,0,.5);
69  
-  border-radius: 53px;
70  
-  border: solid #ccc 3px;
71  
-  top: -25px;
72  
-  left: 10px;
  69
+  border-radius: 5.3rem;
  70
+  border: solid #ccc 0.3rem;
  71
+  top: -2.5rem;
  72
+  left: 1rem;
73 73
 }
74 74
 
75 75
 .videoPlayerPauseButton:active {
76  
-  background: url("images/video_pause_button.png") center no-repeat,
77  
-              url("images/video_play_focus.png") center no-repeat
  76
+  background: url("images/video_pause_button.png") no-repeat center center / 9.6rem,
  77
+              url("images/video_play_focus.png") no-repeat center center / 10.6rem
78 78
 }
79 79
 
80 80
 button::-moz-focus-inner {
@@ -85,36 +85,36 @@ button::-moz-focus-inner {
85 85
 /* time slider */
86 86
 .videoPlayerSlider {
87 87
   position: absolute;
88  
-  left: 110px;
89  
-  top: 0px;
90  
-  right: 0px;
  88
+  left: 11rem;
  89
+  top: 0;
  90
+  right: 0;
91 91
   height: 100%;
92 92
 }
93 93
 
94 94
 .videoPlayerSlider > span {
95 95
   display: block;
96  
-  width: 45px;
  96
+  width: 4.5rem;
97 97
   position: absolute;
98 98
   color: white;
99 99
   height: 100%;
100  
-  line-height: 50px;
  100
+  line-height: 5rem;
101 101
   text-align: center;
102  
-  font-size: 15px;
  102
+  font-size: 1.5rem;
103 103
 }
104 104
 
105 105
 .videoPlayerElapsedText {
106  
-  left: 10px;
  106
+  left: 1rem;
107 107
 }
108 108
 
109 109
 .videoPlayerDurationText {
110  
-  right: 10px;
  110
+  right: 1rem;
111 111
 }
112 112
 
113 113
 .videoPlayerProgress {
114 114
   position: absolute;
115  
-  top: 0px;
116  
-  left: 70px;
117  
-  right: 70px;
  115
+  top: 0;
  116
+  left: 7rem;
  117
+  right: 7rem;
118 118
   height: 100%;
119 119
 }
120 120
 
@@ -124,11 +124,11 @@ button::-moz-focus-inner {
124 124
 }
125 125
 
126 126
 .videoPlayerElapsedBar, .videoPlayerBackgroundBar {
127  
-  height: 4px;
  127
+  height: 0.4rem;
128 128
   width: 0%;
129 129
   top: 50%;
130  
-  margin-top: -2px;
131  
-  border-radius: 6px;
  130
+  margin-top: -0.2rem;
  131
+  border-radius: 0.6rem;
132 132
 }
133 133
 
134 134
 .videoPlayerElapsedBar {
@@ -142,11 +142,11 @@ button::-moz-focus-inner {
142 142
 
143 143
 .videoPlayerPlayHead {
144 144
   display: block;
145  
-  height: 20px;
146  
-  width: 25px;
147  
-  border-radius: 25px;
  145
+  height: 2rem;
  146
+  width: 2.5rem;
  147
+  border-radius: 2.5rem;
148 148
   background-color: white;
149 149
   top: 50%;
150  
-  margin: -10px 0 0 -12px;
  150
+  margin: -1rem 0 0 -1.2rem;
151 151
 }
152 152
 
64  apps/camera/style/camera.css
@@ -19,7 +19,7 @@ html, body {
19 19
   bottom: 0;
20 20
   right: 0;
21 21
   left: 0;
22  
-  height: 45px;
  22
+  height: 4.5rem;
23 23
   z-index: 50;
24 24
   background-color: rgba(0, 0, 0, 0.8);
25 25
   overflow: hidden;
@@ -30,7 +30,7 @@ html, body {
30 30
 }
31 31
 
32 32
 #switch-button, #misc-button {
33  
-  height: 45px;
  33
+  height: 4.5rem;
34 34
   width: 33%;
35 35
 }
36 36
 
@@ -43,14 +43,15 @@ html, body {
43 43
   pointer-events: none;
44 44
   background-position: center center;
45 45
   background-repeat: no-repeat;
  46
+  background-size: 3rem;
46 47
   display: block;
47 48
   position: absolute;
48 49
   top: 50%;
49 50
   left: 50%;
50  
-  margin-left: -15px;
51  
-  margin-top: -15px;
52  
-  width: 30px;
53  
-  height: 30px;
  51
+  margin-left: -1.5rem;
  52
+  margin-top: -1.5rem;
  53
+  width: 3rem;
  54
+  height: 3rem;
54 55
 }
55 56
 
56 57
 #switch-button {
@@ -110,16 +111,17 @@ html, body {
110 111
 
111 112
 #capture-button {
112 113
   background-color: #03a2b4;
113  
-  border-radius: 100px;
  114
+  border-radius: 10rem;
114 115
   left: 33%;
115  
-  height: 100px;
  116
+  height: 10rem;
116 117
   width: 33%;
117  
-  top: -28px;
  118
+  top: -2.8rem;
118 119
 }
119 120
 
120 121
 #video-timer {
121 122
   display: none;
122 123
   color: white;
  124
+  font-size: 1.8rem;
123 125
 }
124 126
 
125 127
 /* Specific to when we are capturing video */
@@ -160,27 +162,27 @@ html, body {
160 162
   position: absolute;
161 163
   z-index: 100;
162 164
   display: none;
163  
-  width: 50px;
164  
-  height: 50px;
165  
-  border-radius: 50px;
  165
+  width: 5rem;
  166
+  height: 5rem;
  167
+  border-radius: 5rem;
166 168
   top: 50%;
167 169
   left: 50%;
168  
-  margin-top: -30px;
169  
-  margin-left: -30px;
  170
+  margin-top: -3rem;
  171
+  margin-left: -3rem;
170 172
 }
171 173
 
172 174
 #focus-ring[data-state=focused] {
173  
-  border: 4px solid rgba(0, 255, 0, 0.3);
  175
+  border: 0.4rem solid rgba(0, 255, 0, 0.3);
174 176
   display: block;
175 177
 }
176 178
 
177 179
 #focus-ring[data-state=focusing] {
178  
-  border: 4px solid rgba(0, 0, 0, 0.8);
  180
+  border: 0.4rem solid rgba(0, 0, 0, 0.8);
179 181
   display: block;
180 182
 }
181 183
 
182 184
 #focus-ring[data-state=fail] {
183  
-  border: 4px solid rgba(255, 0, 0, 0.3);
  185
+  border: 0.4rem solid rgba(255, 0, 0, 0.3);
184 186
   display: block;
185 187
 }
186 188
 
@@ -227,19 +229,19 @@ html, body {
227 229
   /* Using font-size: 0; we avoid the unwanted visual space (about 3px)
228 230
   created by white-spaces and break lines in the code betewen inline-block elements */
229 231
   color: #fff;
230  
-  padding: 110px 25px 0px 25px;
  232
+  padding: 11rem 2.5rem 0 2.5rem;
231 233
 }
232 234
 
233 235
 #overlay-title {
234 236
   font-weight: normal;
235 237
   font-size: 1.9rem;
236 238
   color: #fff;
237  
-  margin: 0 5px -10px 5px;
  239
+  margin: 0 0.5rem -1rem 0.5rem;
238 240
 }
239 241
 
240 242
 #overlay-text {
241  
-  padding: 10px 5px 0 5px;
242  
-  border-top: 1px solid #686868;
  243
+  padding: 1rem 0.5rem 0 0.5rem;
  244
+  border-top: 0.1rem solid #686868;
243 245
   font-weight: 300;
244 246
   font-size: 2.5rem;
245 247
   color: #ebebeb;
@@ -251,8 +253,8 @@ html, body {
251 253
 
252 254
 #hud {
253 255
   position: absolute;
254  
-  top: 20px;
255  
-  height: 75px;
  256
+  top: 2rem;
  257
+  height: 7.5rem;
256 258
   left: 0;
257 259
   right: 0;
258 260
   z-index: 50;
@@ -261,12 +263,13 @@ html, body {
261 263
 #hud a {
262 264
   position: absolute;
263 265
   z-index: 50;
264  
-  height: 75px;
265  
-  width: 75px;
  266
+  height: 7.5rem;
  267
+  width: 7.5rem;
266 268
   border: 0;
267 269
   background-position: center center;
268 270
   background-repeat: no-repeat;
269 271
   background-image: url(images/hud_button_underlay.png);
  272
+  background-size: 4.5rem;
270 273
 }
271 274
 
272 275
 #hud a:after {
@@ -274,11 +277,12 @@ html, body {
274 277
   display: block;
275 278
   position: relative;
276 279
   z-index: 60;
277  
-  height: 75px;
278  
-  width: 75px;
  280
+  height: 7.5rem;
  281
+  width: 7.5rem;
279 282
   background: transparent;
280 283
   background-position: center center;
281 284
   background-repeat: no-repeat;
  285
+  background-size: 3rem;
282 286
 }
283 287
 
284 288
 #hud a:active {
@@ -286,11 +290,11 @@ html, body {
286 290
 }
287 291
 
288 292
 #toggle-camera {
289  
-  right: 20px;
  293
+  right: 2rem;
290 294
 }
291 295
 
292 296
 #toggle-flash {
293  
-  left: 20px;
  297
+  left: 2rem;
294 298
 }
295 299
 
296 300
 #toggle-camera[data-mode=back]:after {
@@ -314,7 +318,7 @@ html, body {
314 318
 }
315 319
 
316 320
 #filmstrip.hidden {
317  
-  transform: translateY(-50px);
  321
+  transform: translateY(-5rem);
318 322
 }
319 323
 
320 324
 #preview.offscreen {
47  apps/camera/style/filmstrip.css
@@ -4,7 +4,7 @@
4 4
   z-index: 100;
5 5
   left: 0;
6 6
   right: 0;
7  
-  height: 50px;
  7
+  height: 5rem;
8 8
   /*
9 9
    * the background must be solid for preview mode because otherwise some
10 10
    * of the frozen viewfinder shows through. If it really need to be translucent
@@ -15,17 +15,17 @@
15 15
 
16 16
 img.thumbnail {
17 17
   position: relative;
18  
-  width: 46px;
19  
-  height: 46px;
20  
-  border: 2px solid white;
21  
-  margin-right: 4px;
  18
+  width: 4.6rem;
  19
+  height: 4.6rem;
  20
+  border: 0.2rem solid white;
  21
+  margin-right: 0.4rem;
22 22
   float: left; /* XXX: do we need this? */
23 23
   -moz-user-select: none;
24 24
   transition: 0.2s ease-in-out;
25 25
 }
26 26
 
27 27
 img.thumbnail.previewed {  /* if the thumbnail is being previewed */
28  
-  border: 2px solid #0ac;
  28
+  border: 0.2rem solid #0ac;
29 29
 }
30 30
 
31 31
 /*
@@ -46,8 +46,8 @@ img.thumbnail.previewed {  /* if the thumbnail is being previewed */
46 46
   position: absolute;
47 47
   left: 0;
48 48
   width: 100%;
49  
-  top: 50px;
50  
-  bottom: 0px;
  49
+  top: 5rem;
  50
+  bottom: 0;
51 51
   padding: 0;
52 52
   margin: 0;
53 53
   border-width: 0;
@@ -63,9 +63,9 @@ img.thumbnail.previewed {  /* if the thumbnail is being previewed */
63 63
   left: 0;
64 64
   top: 0;
65 65
   width: 100%;
66  
-  bottom: 40px;
67  
-  padding: 0px;
68  
-  margin: 0px;
  66
+  bottom: 4rem;
  67
+  padding: 0;
  68
+  margin: 0;
69 69
   overflow: hidden;
70 70
   -moz-user-select: none;
71 71
 }
@@ -76,13 +76,13 @@ img.thumbnail.previewed {  /* if the thumbnail is being previewed */
76 76
 }
77 77
 
78 78
 #media-frame > img {
79  
-  top: 0px;  /* javascript modifies this position with a transform */
80  
-  left: 0px;
  79
+  top: 0;  /* javascript modifies this position with a transform */
  80
+  left: 0;
81 81
   position: absolute;
82  
-  border-width: 0px;
83  
-  padding: 0px;
84  
-  margin: 0px;
85  
-  transform-origin: 0px 0px;
  82
+  border-width: 0;
  83
+  padding: 0;
  84
+  margin: 0;
  85
+  transform-origin: 0 0;
86 86
   pointer-events: none;
87 87
   -moz-user-select: none;
88 88
 }
@@ -96,20 +96,20 @@ img.thumbnail.previewed {  /* if the thumbnail is being previewed */
96 96
  */
97 97
 #media-frame > img.swapping {
98 98
   opacity: 0.8;
99  
-  outline: dashed #0ac 4px;
100  
-  outline-offset: -4px;
  99
+  outline: dashed #0ac 0.4rem;
  100
+  outline-offset: -0.4rem;
101 101
 }
102 102
 
103 103
 #media-frame > video {
104  
-  transform-origin: 0px 0px;
  104
+  transform-origin: 0 0;
105 105
 }
106 106
 
107 107
 #preview-controls {
108 108
   position: absolute;
109 109
   left: 0;
110 110
   right: 0;
111  
-  bottom: 0px;
112  
-  height: 40px;
  111
+  bottom: 0;
  112
+  height: 4rem;
113 113
   background-color: rgba(0, 0, 0, 0.8);
114 114
   z-index: 100; /* above the dynamically inserted frame elements */
115 115
 }
@@ -138,6 +138,7 @@ a.button.hidden {
138 138
  width: 33%;
139 139
  height: 100%;
140 140
  background-image: url(images/camera.png);
  141
+ background-size: 3rem;
141 142
 }
142 143
 
143 144
 #share-button {
@@ -146,6 +147,7 @@ a.button.hidden {
146 147
  width: 33%;
147 148
  height: 100%;
148 149
  background-image: url(images/share.png);
  150
+ background-size: 3rem;
149 151
 }
150 152
 
151 153
 #delete-button {
@@ -154,6 +156,7 @@ a.button.hidden {
154 156
  width: 33%;
155 157
  height: 100%;
156 158
  background-image: url(images/delete.png);
  159
+ background-size: 3rem;
157 160
 }
158 161
 
159 162
 /*
BIN  apps/camera/style/icons/60/Camera@2x.png
BIN  apps/camera/style/icons/Camera@2x.png
BIN  apps/camera/style/images/actionicon_cancel.png
BIN  apps/camera/style/images/actionicon_cancel@2x.png
BIN  apps/camera/style/images/camera@2x.png
BIN  apps/camera/style/images/delete.png
BIN  apps/camera/style/images/delete@2x.png
BIN  apps/camera/style/images/flash_auto@2x.png
BIN  apps/camera/style/images/flash_off@2x.png
BIN  apps/camera/style/images/flash_on@2x.png
BIN  apps/camera/style/images/flash_torch@2x.png
BIN  apps/camera/style/images/grid@2x.png
BIN  apps/camera/style/images/hud_button_underlay.png
BIN  apps/camera/style/images/hud_button_underlay@2x.png
BIN  apps/camera/style/images/hud_button_underlay_focus@2x.png
BIN  apps/camera/style/images/play_overlay.png
BIN  apps/camera/style/images/play_overlay@2x.png
BIN  apps/camera/style/images/share.png
BIN  apps/camera/style/images/share@2x.png
BIN  apps/camera/style/images/stop.png
BIN  apps/camera/style/images/stop@2x.png
BIN  apps/camera/style/images/toggle_back@2x.png
BIN  apps/camera/style/images/toggle_front@2x.png
BIN  apps/camera/style/images/video.png
BIN  apps/camera/style/images/video@2x.png
BIN  apps/camera/style/images/video_pause_button.png
BIN  apps/camera/style/images/video_pause_button@2x.png
BIN  apps/camera/style/images/video_play_button.png
BIN  apps/camera/style/images/video_play_button@2x.png
BIN  apps/camera/style/images/video_play_focus.png
BIN  apps/camera/style/images/video_play_focus@2x.png
BIN  apps/camera/style/images/video_play_normal.png
BIN  apps/camera/style/images/video_play_normal@2.png
BIN  apps/camera/style/images/video_play_normal@2x.png

0 notes on commit f778cbc

Please sign in to comment.
Something went wrong with that request. Please try again.