Merge pull request #9007 from basiclines/hidpi-support-ftu

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

apps/communications/ftu/css/style.css

@@ -70,7 +70,7 @@ html, body {
 }
 
 [role=navigation] button {
-  width: calc((100% - 1rem) / 2);
+  width: calc((100% / 2) - 0.5rem);
   float: left;
   margin-right: 1rem;
   position: relative;
@@ -88,12 +88,12 @@ html, body {
   left: 0;
   position: absolute;
   pointer-events: none;
-  background: url(images/prev.png) no-repeat center center;
+  background: url(images/prev.png) no-repeat center center / 1.1rem;
 }
 
 [role=navigation] button.recommend span {
   left: calc(100% - 3rem);
-  background: url(images/next.png) no-repeat center center;
+  background-image: url(images/next.png);
 }
 
 [role=navigation] #wifi-join-button {
@@ -200,7 +200,8 @@ html, body {
   z-index: 3000;
   transition: all 1s ease;
   background-image: url(/shared/resources/branding/powered.png);
-  background-size: 100% auto;
+  background-size: cover;
+  background-position: center top;
 }
 
 #splash-screen.show {
@@ -336,7 +337,7 @@ html, body {
 
 #wifi #no-result-container {
   position: absolute;
-  background: url('images/wifi_icon.png') no-repeat fixed center;
+  background: url('images/wifi_icon.png') no-repeat fixed center / 23.6rem;
   height: 100%;
   width: 100%;
 }
@@ -361,7 +362,8 @@ html, body {
 aside.wifi-icon {
   background-repeat: no-repeat;
   background-position: 0 center;
-  width: 3rem;
+  background-size: 16rem;
+  width: 3.2rem;
 }
 aside.wifi-signal       { background-image: url(images/wifi_disconnected_sprite.png);}
 aside.connected         { background-image: url(images/wifi_connected_sprite.png);}
@@ -482,6 +484,7 @@ aside.connecting {
   height: calc(100% - 6rem);
   padding: 0 3rem;
   width: calc(100% - 6rem);
+  background-size: 17.6rem;
 }
 
 #finish-screen [role=navigation],#tutorialFinish [role=navigation] {
@@ -492,6 +495,10 @@ aside.connecting {
   text-align: center;
 }
 
+#step1Img, #step2Img, #step3Img, #step4Img, #step5Img {
+  width: 28.9rem;
+}
+
 /*
   Date and time
 */
@@ -504,6 +511,7 @@ aside.connecting {
 #time_zone_overlay {
   background-position: bottom;
   background-repeat: no-repeat;
+  background-size: 100%;
   position: relative;
   position: absolute;
   z-index: 10;
@@ -558,6 +566,7 @@ aside.connecting {
   background-image: url('images/timezone/map.png') ;
   background-position: bottom;
   background-repeat: no-repeat;
+  background-size: 100%;
   position: relative;
   height: 21.5rem;
   width: 100%;
@@ -691,7 +700,7 @@ aside.connecting {
 
 
 #fb_after_import1 {
-  background: url('images/import_fb.png') center left no-repeat;
+  background: url('images/import_fb.png') no-repeat center left /3rem;
 }
 
 #statusMsg.ftu {
@@ -720,10 +729,15 @@ aside.connecting {
   font-size: 1.35rem;
   line-height: 1.8rem;
 }
+
 #welcome_browser #browser_logo_horizontal {
   margin: 1rem 0;
 }
 
+#welcome_browser #browser_logo_horizontal img{
+  max-width: 100%;
+}
+
 #welcome_browser label {
   position: absolute;
   margin: -1.5rem 0 0 -1.5rem;
@@ -977,7 +991,7 @@ i.hack-first-child {
 }
 
 [data-type="list"].pack-value-selector li label:not([for]) input:checked + span {
-  background: url("images/checked.png") no-repeat right center;
+  background: url("images/checked.png") no-repeat right center / 100%;
 }
 
 [data-type="list"].pack-value-selector li label:not([for]) input + span + p {
@@ -1067,3 +1081,4 @@ i.hack-first-child {
   width: calc(100% / 5);
   background: #FFFFFF;
 }
+

apps/communications/ftu/index.html

@@ -22,6 +22,8 @@
   <link rel="stylesheet" type="text/css" href="/ftu/css/style.css">
   <link rel="stylesheet" type="text/css" href="/ftu/css/fb_extensions.css">
   <link rel="stylesheet" type="text/css" href="/facebook/style/curtain_frame.css">
+  <!-- HIDPI support -->
+  <link rel="stylesheet" type="text/css" href="/shared/style/responsive.css" >
 
   <title>Welcome to Browser OS</title>
 

shared/style/responsive.css

@@ -50,4 +50,3 @@
   html { font-size: 105%!important; }
 }
 
-