CSS updates to Win 10 FRE for new assets.

These changes address new assets which are being uploaded to the static content server, specifically: - positioning of text relative is different relative to new assets - removing use of -webkit-image-set and defaulting to 2x until grit bug can be resolved BUG=667308 CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation Review-Url: https://codereview.chromium.org/2639083002 Cr-Commit-Position: refs/heads/master@{#446390}
Denger-Network · Jan 26, 2017 · ad0e014 · ad0e014
1 parent 84c9557
commit ad0e014
Show file tree

Hide file tree

Showing 10 changed files with 119 additions and 69 deletions.
diff --git a/chrome/browser/browser_resources.grd b/chrome/browser/browser_resources.grd
@@ -633,6 +633,12 @@
       <if expr="is_win">
         <include name="IDR_NACL_BROKER_MANIFEST" file="../../components/nacl/broker/nacl_broker_manifest.json" type="BINDATA" />
       </if>
+      <if expr="is_win">
+        <include name="IDR_WELCOME_WIN10_DEFAULT_LARGE_WEBP" file="resources\welcome\win10\default-large.webp" type="BINDATA" />
+        <include name="IDR_WELCOME_WIN10_DEFAULT_SMALL_WEBP" file="resources\welcome\win10\default-small.webp" type="BINDATA" />
+        <include name="IDR_WELCOME_WIN10_PIN_LARGE_WEBP" file="resources\welcome\win10\pin-large.webp" type="BINDATA" />
+        <include name="IDR_WELCOME_WIN10_PIN_SMALL_WEBP" file="resources\welcome\win10\pin-small.webp" type="BINDATA" />
+      </if>
     </includes>
   </release>
 </grit>
diff --git a/chrome/browser/resources/welcome/win10/default-large.webp b/chrome/browser/resources/welcome/win10/default-large.webp
diff --git a/chrome/browser/resources/welcome/win10/default-small.webp b/chrome/browser/resources/welcome/win10/default-small.webp
diff --git a/chrome/browser/resources/welcome/win10/inline.css b/chrome/browser/resources/welcome/win10/inline.css
@@ -170,70 +170,81 @@ strong {
   width: 64vw;
 }
 
-#screenshot-image--default {
-  background: -webkit-image-set(
-    url(https://www.gstatic.com/chrome/login/win10/default-small.webp) 1x,
-    url(https://www.gstatic.com/chrome/login/win10/default-small@2x.webp) 2x);
+#default-image {
+  background: url(chrome://welcome-win10/default.webp);
   background-repeat: no-repeat;
   background-size: cover;
 }
 
-#screenshot-image--taskbar {
-  background: -webkit-image-set(
-    url(https://www.gstatic.com/chrome/login/win10/pin-small.webp) 1x,
-    url(https://www.gstatic.com/chrome/login/win10/pin-small@2x.webp) 2x);
+#taskbar-image {
+  background: url(chrome://welcome-win10/pin.webp);
   background-repeat: no-repeat;
   background-size: cover;
 }
 
-.screenshot-html-overlay {
+.screenshot-overlay {
   box-sizing: border-box;
-  font-size: 6px;
   line-height: 0;
   position: absolute;
 }
 
-#screenshot-html-overlay--browser {
-  left: 54.8%;
-  top: 53%;
+#browser-overlay {
+  left: 41%;
+  top: 81%;
 }
 
-#screenshot-html-overlay--edge {
-  left: 65%;
-  top: 63.5%;
+#edge-overlay {
+  left: 49%;
+  top: 88%;
 }
 
-#screenshot-html-overlay--taskbar {
+#taskbar-overlay {
   left: 31%;
   top: 73%;
 }
 
-#screenshot-html-overlay--taskbar div {
+#taskbar-overlay div {
   color: #ccc;
   font-family: Tahoma, Verdana, Segoe, sans-serif;
   font-weight: 500;
 }
 
-#screenshot-html-overlay--icon {
-  background-image: url(/logo-small.png);
+#icon-overlay {
+  background-image: url(chrome://welcome-win10/logo-small.png);
   background-size: cover;
   height: 8%;
   left: 46%;
   top: 90%;
   width: 6%;
 }
 
-/* This value is precisely set so that the text over the screenshot starts
+/* These values are precisely set so that the text over the screenshot starts
  * scaling at the same time the image starts scaling too. */
-@media (min-width: 312px) {
-  .screenshot-html-overlay {
+@media (max-width: 626px) {
+  #browser-overlay {
+    font-size: 1.28vw;
+  }
+
+  #edge-overlay {
+    font-size: 1.44vw;
+  }
+
+  #taskbar-overlay {
     font-size: 1.95vw;
   }
 }
 
-/* Font-size used when the screenshot exactly reaches its max size. */
+/* Font-sizes used when the screenshot exactly reaches its max size. */
 @media (min-width: 626px) {
-  .screenshot-html-overlay {
+  #browser-overlay {
+    font-size: 8px;
+  }
+
+  #edge-overlay {
+    font-size: 9px;
+  }
+
+  #taskbar-overlay {
     font-size: 12.2px;
   }
 }
diff --git a/chrome/browser/resources/welcome/win10/inline.html b/chrome/browser/resources/welcome/win10/inline.html
@@ -38,13 +38,11 @@
             </li>
             <li>
               <div>$i18nRaw{clickEdgeText}</div>
-              <div class="screenshot-image" id="screenshot-image--default">
-                <div class="screenshot-html-overlay"
-                    id="screenshot-html-overlay--browser">
+              <div class="screenshot-image" id="default-image">
+                <div class="screenshot-overlay" id="browser-overlay">
                   <div>$i18n{webBrowserLabel}</div>
                 </div>
-                <div class="screenshot-html-overlay"
-                    id="screenshot-html-overlay--edge">
+                <div class="screenshot-overlay" id="edge-overlay">
                   <div>$i18n{microsoftEdgeLabel}</div>
                 </div>
               </div>
@@ -63,13 +61,11 @@
               <li>$i18nRaw{rightClickText}</li>
               <li>
                 <div>$i18nRaw{pinInstructionText}</div>
-                <div class="screenshot-image" id="screenshot-image--taskbar">
-                  <div class="screenshot-html-overlay"
-                      id="screenshot-html-overlay--taskbar">
+                <div class="screenshot-image" id="taskbar-image">
+                  <div class="screenshot-overlay" id="taskbar-overlay">
                     <div>$i18n{pinToTaskbarLabel}</div>
                   </div>
-                  <div class="screenshot-html-overlay"
-                      id="screenshot-html-overlay--icon">
+                  <div class="screenshot-overlay" id="icon-overlay">
                   </div>
                 </div>
               </li>

diff --git a/chrome/browser/resources/welcome/win10/pin-large.webp b/chrome/browser/resources/welcome/win10/pin-large.webp
diff --git a/chrome/browser/resources/welcome/win10/pin-small.webp b/chrome/browser/resources/welcome/win10/pin-small.webp
diff --git a/chrome/browser/resources/welcome/win10/sectioned.css b/chrome/browser/resources/welcome/win10/sectioned.css
@@ -192,74 +192,101 @@ strong {
   opacity: 0;
 }
 
-#screenshot-image--default {
-  background: -webkit-image-set(
-    url(https://www.gstatic.com/chrome/login/win10/default-large.webp) 1x,
-    url(https://www.gstatic.com/chrome/login/win10/default-large@2x.webp) 2x);
+#default-image {
+  background: url(chrome://welcome-win10/default.webp);
   background-repeat: no-repeat;
   background-size: cover;
 }
 
-#screenshot-image--taskbar {
-  background: -webkit-image-set(
-    url(https://www.gstatic.com/chrome/login/win10/pin-large.webp) 1x,
-    url(https://www.gstatic.com/chrome/login/win10/pin-large@2x.webp) 2x);
+#taskbar-image {
+  background: url(chrome://welcome-win10/pin.webp);
   background-repeat: no-repeat;
   background-size: cover;
 }
 
-.screenshot-html-overlay {
+.screenshot-overlay {
   box-sizing: border-box;
-  font-size: 7px;
   line-height: 0;
   position: absolute;
 }
 
-#screenshot-html-overlay--browser {
-  left: 35.8%;
-  top: 75.8%;
+#browser-overlay {
+  left: 42.5%;
+  top: 76%;
 }
 
-#screenshot-html-overlay--edge {
-  left: 41.5%;
-  top: 82.4%;
+#edge-overlay {
+  left: 50%;
+  top: 84%;
 }
 
-#screenshot-html-overlay--taskbar {
+#taskbar-overlay {
   left: 62.2%;
   top: 81.5%;
 }
 
-#screenshot-html-overlay--taskbar div {
+#taskbar-overlay div {
   color: #ccc;
   font-family: Tahoma, Verdana, Segoe, sans-serif;
   font-weight: 500;
 }
 
-#screenshot-html-overlay--icon {
-  background-image: url(/logo-small.png);
+#icon-overlay {
+  background-image: url(chrome://welcome-win10/logo-small.png);
   background-size: cover;
   height: 5.8%;
   left: 70.60%;
   top: 93.1%;
   width: 3.5%;
 }
 
-/* This value is precisely set so that the text over the screenshot starts
+
+/* These values are precisely set so that the text over the screenshot starts
  * scaling at the same time the image starts scaling too. */
 @media (min-width: 520px) {
-  .screenshot-html-overlay {
+  #browser-overlay {
+    font-size: 1.8vw;
+  }
+
+  #edge-overlay {
+    font-size: 2.05vw;
+  }
+
+  #taskbar-overlay {
     font-size: 1.35vw;
   }
 }
 
-/* Font-size used when the screenshot exactly reaches its max size. */
+/* Font-sizes used when the screenshot exactly reaches its max size. */
 @media (min-width: 780px) {
-  .screenshot-html-overlay {
+  #browser-overlay {
+    font-size: 14px;
+  }
+
+  #edge-overlay {
+    font-size: 16px;
+  }
+
+  #taskbar-overlay {
     font-size: 10.5px;
   }
 }
 
+/* Font-sizes used when the screenshot exactly reaches its min size. */
+@media(max-width: 520px) {
+  #browser-overlay {
+    font-size: 9px;
+  }
+
+  #edge-overlay {
+    font-size: 10.5px;
+  }
+
+  #taskbar-overlay {
+    font-size: 7px;
+  }
+}
+
 @media (min-width: 1280px) {
   body {
     flex-direction: row;

diff --git a/chrome/browser/resources/welcome/win10/sectioned.html b/chrome/browser/resources/welcome/win10/sectioned.html
@@ -62,23 +62,23 @@
     </div>
     <div class="bg">
       <div class="screenshots">
-        <div class="screenshot-image" id="screenshot-image--default">
-          <div class="screenshot-html-overlay"
-              id="screenshot-html-overlay--browser">
+        <div class="screenshot-image" id="default-image">
+          <div class="screenshot-overlay"
+              id="browser-overlay">
             <div>$i18n{webBrowserLabel}</div>
           </div>
-          <div class="screenshot-html-overlay"
-              id="screenshot-html-overlay--edge">
+          <div class="screenshot-overlay"
+              id="edge-overlay">
             <div>$i18n{microsoftEdgeLabel}</div>
           </div>
         </div>
-        <div class="screenshot-image hidden" id="screenshot-image--taskbar">
-          <div class="screenshot-html-overlay"
-              id="screenshot-html-overlay--taskbar">
+        <div class="screenshot-image hidden" id="taskbar-image">
+          <div class="screenshot-overlay"
+              id="taskbar-overlay">
             <div>$i18n{pinToTaskbarLabel}</div>
           </div>
-          <div class="screenshot-html-overlay"
-              id="screenshot-html-overlay--icon">
+          <div class="screenshot-overlay"
+              id="icon-overlay">
           </div>
         </div>
       </div>

diff --git a/chrome/browser/ui/webui/welcome_win10_ui.cc b/chrome/browser/ui/webui/welcome_win10_ui.cc
@@ -91,6 +91,8 @@ WelcomeWin10UI::WelcomeWin10UI(content::WebUI* web_ui, const GURL& url)
     : content::WebUIController(web_ui) {
   static const char kCssFilePath[] = "welcome.css";
   static const char kJsFilePath[] = "welcome.js";
+  static const char kDefaultFilePath[] = "default.webp";
+  static const char kPinFilePath[] = "pin.webp";
 
   Profile* profile = Profile::FromWebUI(web_ui);
 
@@ -112,10 +114,18 @@ WelcomeWin10UI::WelcomeWin10UI(content::WebUI* web_ui, const GURL& url)
   if (is_inline_style) {
     html_source->AddResourcePath(kCssFilePath, IDR_WELCOME_WIN10_INLINE_CSS);
     html_source->AddResourcePath(kJsFilePath, IDR_WELCOME_WIN10_INLINE_JS);
+    html_source->AddResourcePath(kDefaultFilePath,
+                                 IDR_WELCOME_WIN10_DEFAULT_SMALL_WEBP);
+    html_source->AddResourcePath(kPinFilePath,
+                                 IDR_WELCOME_WIN10_PIN_SMALL_WEBP);
     html_source->SetDefaultResource(IDR_WELCOME_WIN10_INLINE_HTML);
   } else {
     html_source->AddResourcePath(kCssFilePath, IDR_WELCOME_WIN10_SECTIONED_CSS);
     html_source->AddResourcePath(kJsFilePath, IDR_WELCOME_WIN10_SECTIONED_JS);
+    html_source->AddResourcePath(kDefaultFilePath,
+                                 IDR_WELCOME_WIN10_DEFAULT_LARGE_WEBP);
+    html_source->AddResourcePath(kPinFilePath,
+                                 IDR_WELCOME_WIN10_PIN_LARGE_WEBP);
     html_source->SetDefaultResource(IDR_WELCOME_WIN10_SECTIONED_HTML);
   }