Bug 1618051 - Proper hi res logo for search only newtab r=Mardak
authorScott <scott.downe@gmail.com>
Fri, 17 Apr 2020 17:45:58 +0000
changeset 524650 d5d6e42855cb4f0c159369a65619ac7f1a8ba51f
parent 524649 001a5750e2769b09916868de1762b81c29b3c8c5
child 524651 def5136392242e98b4b58b42d6b444d78a04bffc
push id113314
push usersdowne@getpocket.com
push dateFri, 17 Apr 2020 18:04:36 +0000
treeherderautoland@d5d6e42855cb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMardak
bugs1618051
milestone77.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1618051 - Proper hi res logo for search only newtab r=Mardak Differential Revision: https://phabricator.services.mozilla.com/D65347
browser/components/newtab/content-src/components/Search/_Search.scss
browser/components/newtab/css/activity-stream-linux.css
browser/components/newtab/css/activity-stream-mac.css
browser/components/newtab/css/activity-stream-windows.css
browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
--- a/browser/components/newtab/content-src/components/Search/_Search.scss
+++ b/browser/components/newtab/content-src/components/Search/_Search.scss
@@ -17,18 +17,21 @@
     $wordmark-size: 172px;
 
     align-items: center;
     display: flex;
     justify-content: center;
     margin-bottom: 49px;
 
     .logo {
-      background: url('chrome://branding/content/icon128.png') no-repeat center center;
+      background: url('chrome://branding/content/about-logo.png') no-repeat center;
       background-size: $logo-size;
+      @media (min-resolution: 2x) {
+        background-image: url('chrome://branding/content/about-logo@2x.png');
+      }
       display: inline-block;
       height: $logo-size;
       width: $logo-size;
     }
 
     .wordmark {
       background: url('chrome://branding/content/firefox-wordmark.svg') no-repeat center center;
       background-size: $wordmark-size;
--- a/browser/components/newtab/css/activity-stream-linux.css
+++ b/browser/components/newtab/css/activity-stream-linux.css
@@ -1027,21 +1027,24 @@ main {
   .only-search .search-wrapper {
     padding: 0 0 64px; }
   .search-wrapper .logo-and-wordmark {
     align-items: center;
     display: flex;
     justify-content: center;
     margin-bottom: 49px; }
     .search-wrapper .logo-and-wordmark .logo {
-      background: url("chrome://branding/content/icon128.png") no-repeat center center;
+      background: url("chrome://branding/content/about-logo.png") no-repeat center;
       background-size: 96px;
       display: inline-block;
       height: 96px;
       width: 96px; }
+      @media (min-resolution: 2x) {
+        .search-wrapper .logo-and-wordmark .logo {
+          background-image: url("chrome://branding/content/about-logo@2x.png"); } }
     .search-wrapper .logo-and-wordmark .wordmark {
       background: url("chrome://branding/content/firefox-wordmark.svg") no-repeat center center;
       background-size: 172px;
       -moz-context-properties: fill;
       display: inline-block;
       fill: var(--newtab-search-wordmark-color);
       height: 96px;
       margin-inline-start: 15px;
--- a/browser/components/newtab/css/activity-stream-mac.css
+++ b/browser/components/newtab/css/activity-stream-mac.css
@@ -1030,21 +1030,24 @@ main {
   .only-search .search-wrapper {
     padding: 0 0 64px; }
   .search-wrapper .logo-and-wordmark {
     align-items: center;
     display: flex;
     justify-content: center;
     margin-bottom: 49px; }
     .search-wrapper .logo-and-wordmark .logo {
-      background: url("chrome://branding/content/icon128.png") no-repeat center center;
+      background: url("chrome://branding/content/about-logo.png") no-repeat center;
       background-size: 96px;
       display: inline-block;
       height: 96px;
       width: 96px; }
+      @media (min-resolution: 2x) {
+        .search-wrapper .logo-and-wordmark .logo {
+          background-image: url("chrome://branding/content/about-logo@2x.png"); } }
     .search-wrapper .logo-and-wordmark .wordmark {
       background: url("chrome://branding/content/firefox-wordmark.svg") no-repeat center center;
       background-size: 172px;
       -moz-context-properties: fill;
       display: inline-block;
       fill: var(--newtab-search-wordmark-color);
       height: 96px;
       margin-inline-start: 15px;
--- a/browser/components/newtab/css/activity-stream-windows.css
+++ b/browser/components/newtab/css/activity-stream-windows.css
@@ -1027,21 +1027,24 @@ main {
   .only-search .search-wrapper {
     padding: 0 0 64px; }
   .search-wrapper .logo-and-wordmark {
     align-items: center;
     display: flex;
     justify-content: center;
     margin-bottom: 49px; }
     .search-wrapper .logo-and-wordmark .logo {
-      background: url("chrome://branding/content/icon128.png") no-repeat center center;
+      background: url("chrome://branding/content/about-logo.png") no-repeat center;
       background-size: 96px;
       display: inline-block;
       height: 96px;
       width: 96px; }
+      @media (min-resolution: 2x) {
+        .search-wrapper .logo-and-wordmark .logo {
+          background-image: url("chrome://branding/content/about-logo@2x.png"); } }
     .search-wrapper .logo-and-wordmark .wordmark {
       background: url("chrome://branding/content/firefox-wordmark.svg") no-repeat center center;
       background-size: 172px;
       -moz-context-properties: fill;
       display: inline-block;
       fill: var(--newtab-search-wordmark-color);
       height: 96px;
       margin-inline-start: 15px;
--- a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
+++ b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
@@ -50,23 +50,29 @@ p {
 .logo-and-wordmark {
   align-items: center;
   display: flex;
   justify-content: center;
   margin-bottom: 50px;
 }
 
 .logo {
-  background: url("chrome://branding/content/icon128.png") no-repeat center center;
+  background: url("chrome://branding/content/about-logo.png") no-repeat center center;
   background-size: 96px;
   display: inline-block;
   height: 96px;
   width: 96px;
 }
 
+@media (min-resolution: 2x) {
+  .logo {
+    background-image: url('chrome://branding/content/about-logo@2x.png');
+  }
+}
+
 .wordmark {
   background: url("chrome://branding/content/firefox-wordmark.svg") no-repeat center center;
   background-size: 172px;
   -moz-context-properties: fill;
   display: inline-block;
   fill: #fff;
   height: 96px;
   margin-inline-start: 15px;