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 524633 d5d6e42855cb4f0c159369a65619ac7f1a8ba51f
parent 524632 001a5750e2769b09916868de1762b81c29b3c8c5
child 524634 def5136392242e98b4b58b42d6b444d78a04bffc
push id37324
push usershindli@mozilla.com
push dateFri, 17 Apr 2020 21:46:50 +0000
treeherdermozilla-central@853b0e791775 [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;