refactor newtab: use tangled theme

chrome/browser/resources/new_tab_page/app.html

@@ -70,6 +70,17 @@
     z-index: 1;  /* Needed so it layers on top of OneGoogleBar. */
   }
 
+  #millixLogo {
+    -webkit-mask-image: url(./icons/millix.svg);
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-size: 100%;
+    background-color: white;
+    height: 75px;
+    width: 75px;
+    z-index: 1;
+    margin: 0 auto;
+  }
+
   ntp-realbox {
     margin-bottom: 16px;
   }
@@ -300,6 +311,7 @@
     </template>
   </dom-if>
   <div id="contentBottomSpacer"></div>
+  <a href="https://millix.org/"><div id="millixLogo"></div></a>
 </div>
 <dom-if if="[[lazyRender_]]" restamp>
   <template>

chrome/browser/resources/new_tab_page/app.js

@@ -20,7 +20,6 @@ import {loadTimeData} from 'tangled://resources/js/load_time_data.m.js';
 import {SkColor} from 'tangled://resources/mojo/skia/public/mojom/skcolor.mojom-webui.js';
 import {html, PolymerElement} from 'tangled://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
-import {BackgroundManager} from './background_manager.js';
 import {BrowserProxy} from './browser_proxy.js';
 import {BackgroundSelection, BackgroundSelectionType} from './customize_dialog_types.js';
 import {ModuleDescriptor} from './modules/module_descriptor.js';
@@ -278,8 +277,6 @@ class AppElement extends PolymerElement {
     this.callbackRouter_ = BrowserProxy.getInstance().callbackRouter;
     /** @private {newTabPage.mojom.PageHandlerRemote} */
     this.pageHandler_ = BrowserProxy.getInstance().handler;
-    /** @private {!BackgroundManager} */
-    this.backgroundManager_ = BackgroundManager.getInstance();
     /** @private {?number} */
     this.setThemeListenerId_ = null;
     /** @private {?number} */
@@ -326,24 +323,6 @@ class AppElement extends PolymerElement {
       }
     });
     this.eventTracker_.add(window, 'keydown', e => this.onWindowKeydown_(e));
-    if (this.shouldPrintPerformance_) {
-      // It is possible that the background image has already loaded by now.
-      // If it has, we request it to re-send the load time so that we can
-      // actually catch the load time.
-      this.backgroundManager_.getBackgroundImageLoadTime().then(
-          time => {
-            const duration = time - this.backgroundImageLoadStartEpoch_;
-            this.printPerformanceDatum_(
-                'background-image-load', this.backgroundImageLoadStart_,
-                duration);
-            this.printPerformanceDatum_(
-                'background-image-loaded',
-                this.backgroundImageLoadStart_ + duration);
-          },
-          () => {
-            console.error('Failed to capture background image load time');
-          });
-    }
     FocusOutlineManager.forDocument(document);
   }
 
@@ -623,15 +602,10 @@ class AppElement extends PolymerElement {
 
   /** @private */
   onShowBackgroundImageChange_() {
-    this.backgroundManager_.setShowBackgroundImage(this.showBackgroundImage_);
   }
 
   /** @private */
   onThemeChange_() {
-    if (this.theme_) {
-      this.backgroundManager_.setBackgroundColor(this.theme_.backgroundColor);
-    }
-    this.updateBackgroundImagePath_();
   }
 
   /** @private */
@@ -651,50 +625,6 @@ class AppElement extends PolymerElement {
    * @private
    */
   updateBackgroundImagePath_() {
-    // The |backgroundSelection_| is retained after the dialog commits the
-    // change to the theme. Since |backgroundSelection_| has precedence over
-    // the theme background, the |backgroundSelection_| needs to be reset when
-    // the theme is updated. This is only necessary when the dialog is closed.
-    // If the dialog is open, it will either commit the |backgroundSelection_|
-    // or reset |backgroundSelection_| on cancel.
-    //
-    // Update after background image path is updated so the image is not shown
-    // before the path is updated.
-    if (!this.showCustomizeDialog_ &&
-        this.backgroundSelection_.type !==
-            BackgroundSelectionType.NO_SELECTION) {
-      // Wait when local image is selected, then no background is previewed
-      // followed by selecting a new local image. This avoids a flicker. The
-      // iframe with the old image is shown briefly before it navigates to a new
-      // iframe location, then fetches and renders the new local image.
-      if (this.backgroundSelection_.type ===
-          BackgroundSelectionType.NO_BACKGROUND) {
-        setTimeout(() => {
-          this.backgroundSelection_ = {
-            type: BackgroundSelectionType.NO_SELECTION
-          };
-        }, 100);
-      } else {
-        this.backgroundSelection_ = {
-          type: BackgroundSelectionType.NO_SELECTION
-        };
-      }
-    }
-    /** @type {newTabPage.mojom.BackgroundImage|undefined} */
-    let backgroundImage;
-    switch (this.backgroundSelection_.type) {
-      case BackgroundSelectionType.NO_SELECTION:
-        backgroundImage = this.theme_ && this.theme_.backgroundImage;
-        break;
-      case BackgroundSelectionType.IMAGE:
-        backgroundImage = {
-          url: {url: this.backgroundSelection_.image.imageUrl.url}
-        };
-        break;
-    }
-    if (backgroundImage) {
-      this.backgroundManager_.setBackgroundImage(backgroundImage);
-    }
   }
 
   /**

chrome/browser/resources/new_tab_page/icons/BUILD.gn

@@ -30,6 +30,8 @@ generate_grd("build_grdp") {
     "shortcut_circles.svg",
     "twitter.svg",
     "upload.svg",
+    "background.jpg",
+    "millix.svg",
   ]
   input_files_base_dir = rebase_path(".", "//")
   resource_path_prefix = "icons"

chrome/browser/resources/new_tab_page/icons/millix.svg

+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 545.38 545.62"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M543.74,267.8V514.51a29.49,29.49,0,0,1-1.16,9,24.08,24.08,0,0,1-22.41,16.83H24.3a33.53,33.53,0,0,1-7.14-.65A23.94,23.94,0,0,1-1.63,516.77V20.47A31.78,31.78,0,0,1-.49,11.73a23.77,23.77,0,0,1,22.32-17H517.94a31.58,31.58,0,0,1,7.13.68,23.88,23.88,0,0,1,18.63,23v3.12ZM270.81,535.07h249c7.82-.3,13.43-4,16.94-11,1.56-3.11,1.72-6.43,1.72-9.81V18.46c-.38-7.73-4.1-13.24-11-16.7C524.36.19,521,0,517.66,0H21.57C14.36.52,9.1,4,5.66,10.36c-1.74,3.2-2,6.66-2,10.22v495.8c.32,7.93,4.11,13.57,11.22,17A20.42,20.42,0,0,0,24,535.07Z" transform="translate(1.63 5.28)"/><path class="cls-1" d="M387.89,166.32c-4.89,3.45-9.9,6.3-14,10.39q-29.08,28.81-58.08,57.61c-.28.28-.58.54-1.11,1l-25.95-26.26L416.17,48.83a1.62,1.62,0,0,1,.44,0,.28.28,0,0,1,.15.15q37.68,183.78,75.34,367.57a7.88,7.88,0,0,1,.13,1.19,2.68,2.68,0,0,1-.24.67h-57.2a10.73,10.73,0,0,1-7.27-2.57q-36.74-31-73.49-62.08c-10.39-8.8-20-18.41-29.62-28q-41.88-41.94-83.8-83.83-31.05-31-62.17-62c-3.44-3.41-7.32-6.39-11.06-9.62-1,2-35.31,165.6-36.21,172.47.9-.12,1.73-.17,2.54-.34a90.44,90.44,0,0,0,42.91-21.74c7.29-6.59,14.08-13.74,21-20.68q17.58-17.55,35.1-35.14c.45-.45.94-.85,1.19-1.08l26.49,26.26c-1.6,1.41-3.33,2.79-4.89,4.35-12.12,12.08-24.17,24.24-36.3,36.31-9.3,9.25-18.57,18.53-28.93,26.64-6,4.73-11.94,9.65-17.9,14.49l-54.16,44a10.64,10.64,0,0,1-7.2,2.63c-18.31-.09-36.62,0-54.93,0h-3.2l84-370.22c.83,1.06,1.37,1.72,1.89,2.39l84.18,109.9c9.68,12.63,19.45,25.19,29.08,37.86A238.53,238.53,0,0,0,273.81,223q33.94,33.75,67.72,67.67c9.56,9.56,19,19.22,28.82,28.53a91.28,91.28,0,0,0,44,23.15c.91.19,1.84.26,2.75.38C417.56,340.46,388.72,169.6,387.89,166.32Z" transform="translate(1.63 5.28)"/><path class="cls-1" d="M370.46,456.32h4.06c.1,1.06.19,2.05.29,3.11,7.88-5.63,13.66-5,19,1.94.31-.37.62-.69.87-1.05a11.34,11.34,0,0,1,12.56-4.23,10.22,10.22,0,0,1,7.7,9.87c.22,5.59.1,11.19.11,16.79a11.23,11.23,0,0,1-.14,1.3h-4.19c-.06-.73-.16-1.42-.16-2.11v-13a18.65,18.65,0,0,0-.41-3.8,6.71,6.71,0,0,0-6.46-5.44c-3.95-.24-6.75,1.22-7.89,4.47a17,17,0,0,0-.86,5.15c-.12,4.16,0,8.32,0,12.48,0,.69-.08,1.39-.14,2.22h-4.23c0-.9-.11-1.68-.11-2.46V469.33a21.51,21.51,0,0,0-.38-4,6.74,6.74,0,0,0-6.34-5.58c-4-.3-6.92,1.21-8.09,4.55a16.46,16.46,0,0,0-.81,4.92c-.11,4.24,0,8.48,0,12.72,0,.63,0,1.26-.09,2.08h-4C370,482.32,369.86,458.93,370.46,456.32Z" transform="translate(1.63 5.28)"/><path class="cls-1" d="M53.13,456.15H56a11.24,11.24,0,0,1,1.53.22v4.22a10.31,10.31,0,0,0,1.26-.94c3.69-3.9,8.24-4.75,13.19-3.38,5.13,1.42,7.95,5.14,9,10.21a16.88,16.88,0,0,1-.67,9.44,12.81,12.81,0,0,1-21.45,4.64c-.27-.28-.38-.71-.89-.91a62.58,62.58,0,0,0-.4,8.87v8.69H53.13Zm13.81,3.57a9.08,9.08,0,0,0-8.54,5.84,12.14,12.14,0,0,0-.39,8,9.37,9.37,0,0,0,18.11-.06,12.92,12.92,0,0,0,.13-6.39A9.11,9.11,0,0,0,66.94,459.72Z" transform="translate(1.63 5.28)"/><path class="cls-1" d="M116.81,456.32h4.69l6.31,22.9a60.65,60.65,0,0,0,2.54-7.76c.8-2.51,1.5-5,2.25-7.58s1.5-5,2.27-7.62h4.74l6.56,22.54h.46l6.18-22.48h4.53c-2.92,9.36-5.79,18.54-8.66,27.76h-4.75c-2.16-7.05-4.35-14.17-6.53-21.28h-.59c-2.16,7-4.31,14.09-6.53,21.36h-4.71C122.68,474.9,119.81,465.72,116.81,456.32Z" transform="translate(1.63 5.28)"/><path class="cls-1" d="M271.06,446.52V484h-4.35c-.06-1.4-.13-2.78-.2-4.31-.37.19-.62.24-.74.39-3.55,4.2-8.12,5.3-13.22,4s-8-5-9.23-10.07a17,17,0,0,1,.3-9,13,13,0,0,1,21.6-5.54c.32.31.66.6,1.32,1.21V446.52Zm-4.41,22.8a27,27,0,0,0-1.18-4.25,9,9,0,0,0-9.09-5.3,8.86,8.86,0,0,0-8.07,6.1,12,12,0,0,0,.37,9.31,8.59,8.59,0,0,0,7.41,5.28,8.93,8.93,0,0,0,8.67-4C266.08,474.56,266.51,472.39,266.65,469.32Z" transform="translate(1.63 5.28)"/><path class="cls-1" d="M297.33,484.07h-4c-.54-1.77-.75-33.43-.24-37.54h4.26c.22,2.24.06,4.6.09,7s0,4.57,0,7.32c.63-.57.93-.78,1.17-1.05,3.64-3.95,8.18-4.84,13.15-3.52,5.14,1.38,8,5.08,9.07,10.15a16.85,16.85,0,0,1-.79,9.9c-4,10-16.4,10.36-21.45,4.23a13.48,13.48,0,0,0-1-1C297.45,481.22,297.4,482.54,297.33,484.07Zm19.36-13.75c-.3-1.59-.42-2.88-.78-4.09a9,9,0,0,0-8.05-6.48,9.11,9.11,0,0,0-9.23,5.12,11.46,11.46,0,0,0,.08,10.61,8.72,8.72,0,0,0,8.59,5,8.6,8.6,0,0,0,8.1-5.36A30.63,30.63,0,0,0,316.69,470.32Z" transform="translate(1.63 5.28)"/><path class="cls-1" d="M187.49,471.85H165.37a8.13,8.13,0,0,0,5.94,8.39c4.12,1.13,8.72.08,10.75-4.58h4.87a11.65,11.65,0,0,1-7.25,7.91,14.89,14.89,0,0,1-9.88.35c-6.1-1.84-9.84-7.54-9.43-14.49a19.79,19.79,0,0,1,.82-4.71,12,12,0,0,1,8.72-8.4,15.42,15.42,0,0,1,8.52,0,12.34,12.34,0,0,1,9,10.94A40,40,0,0,1,187.49,471.85Zm-4.83-3.92c0-5.08-3.46-8.3-8.65-8.3-5,0-8.53,3.38-8.6,8.3Z" transform="translate(1.63 5.28)"/><path class="cls-1" d="M238.38,471.82H216.16c0,4.33,2.5,7.6,6.31,8.5,3.45.81,8,.52,10.52-4.68h4.67a13.74,13.74,0,0,1-.51,1.77c-2.2,4.81-7.07,7.5-13,7.12-8.45-.54-13.17-6.87-12.87-15.18a16.89,16.89,0,0,1,.89-4.93,12.05,12.05,0,0,1,10.58-8.51,18.31,18.31,0,0,1,6,.23,12.3,12.3,0,0,1,9.7,11.64C238.44,469,238.38,470.32,238.38,471.82Zm-22.19-3.91h17.25c.68-4.26-3.33-8.08-7.76-8.27C220.29,459.41,216.59,462.49,216.19,467.91Z" transform="translate(1.63 5.28)"/><path class="cls-1" d="M85.81,470c0-12,11.24-16.93,20.35-13,5.14,2.2,8.22,7.63,7.9,13.68-.6,11.32-10.37,15.52-18.43,13.34C89.45,482.32,85.81,477,85.81,470Zm4.73.05a14,14,0,0,0,.11,2.14c.55,4.66,3.85,8,8.22,8.22,5,.3,8.82-2.37,10-7a13,13,0,0,0,0-6.62c-1.19-4.7-5-7.4-10-7.05A9,9,0,0,0,90.58,468c0,.68,0,1.36-.08,2.12Z" transform="translate(1.63 5.28)"/><path class="cls-1" d="M330.25,497.07c.3-.81.55-1.54.83-2.25,1.24-3,2.43-6.08,3.75-9.07a4.54,4.54,0,0,0,0-3.88c-3.16-7.59-6.23-15.21-9.33-22.82-.32-.8-.63-1.61-1.05-2.69h5c1.39,3.56,2.82,7.19,4.23,10.83s2.82,7.27,4.47,10.94c3.2-7.19,5.77-14.58,8.74-21.86h4.69c-5.6,13.71-11.11,27.18-16.68,40.8Z" transform="translate(1.63 5.28)"/><path class="cls-1" d="M481.9,466.42c1.63-2.66,3.13-5.1,4.62-7.55,1.93-3.15,2.09-3.21,6.23-2.36-1.46,2.27-2.87,4.45-4.29,6.63l-4.4,6.82,9,14.2a33.94,33.94,0,0,1-4.28-.06,2.74,2.74,0,0,1-1.62-1.12c-1.53-2.24-3-4.56-4.41-6.85-.43-.66-.88-1.32-1.52-2.29-2.43,3.38-4.22,6.92-6.49,10.23h-4.69c3-4.81,6-9.26,8.93-13.86-2.94-4.61-5.81-9.1-9-14a35.57,35.57,0,0,1,4.38.06,2.76,2.76,0,0,1,1.59,1.21c1.52,2.25,2.95,4.56,4.42,6.84C480.81,464.93,481.31,465.56,481.9,466.42Z" transform="translate(1.63 5.28)"/><path class="cls-1" d="M198.39,484H194V456.32h4.25l.39,3.6c2.35-2.83,5-4.39,8.6-4.19v4.41c-.73.09-1.49.17-2.25.28-4,.56-6.17,2.68-6.41,6.76-.19,3.26-.11,6.54-.14,9.82C198.38,479.32,198.39,481.61,198.39,484Z" transform="translate(1.63 5.28)"/><path class="cls-1" d="M435.52,446.42h4c.48,1.83.68,32.69.24,37.54H435.5Z" transform="translate(1.63 5.28)"/><path class="cls-1" d="M452.09,484.06c-.58,0-1.2.1-1.81.1s-1.41-.07-2.27-.12V446.5h4C452.51,448.2,452.6,481.38,452.09,484.06Z" transform="translate(1.63 5.28)"/><path class="cls-1" d="M422.81,456.32h4.32V484h-4.32Z" transform="translate(1.63 5.28)"/><path class="cls-1" d="M465.05,456.32V484h-4.36V456.32Z" transform="translate(1.63 5.28)"/><path class="cls-1" d="M428,448.41a3,3,0,0,1-2.87,3.13h-.05a3.13,3.13,0,0,1-3.2-3.06v-.07a3.06,3.06,0,0,1,3-3.11h.17a3,3,0,0,1,2.92,3.08Z" transform="translate(1.63 5.28)"/><path class="cls-1" d="M463,451.54a3.12,3.12,0,0,1-3.17-3.07v-.09a3,3,0,0,1,3-3.08,3,3,0,0,1,3.13,2.86v.27a3,3,0,0,1-2.89,3.11Z" transform="translate(1.63 5.28)"/></svg>
\ No newline at end of file

chrome/browser/resources/new_tab_page/logo.html

@@ -14,8 +14,8 @@
 
   #logo {
     forced-color-adjust: none;
-    height: 92px;
-    width: 272px;
+    height: 283px;
+    width: 280px;
   }
 
   :host([single-colored]) #logo {

chrome/browser/resources/new_tab_page/most_visited.html

@@ -116,7 +116,7 @@
   .tile-title {
     align-items: center;
     border-radius: 12px;
-    color: var(--ntp-theme-text-color);
+    color: white;
     display: flex;
     height: var(--title-height);
     line-height: calc(var(--title-height) / 2);
@@ -127,7 +127,7 @@
 
   :host([use-title-pill]) .tile-title {
     background-color: white;
-    color: var(--google-grey-800);
+    color: var(--google-grey-400);
   }
 
   .tile-title span {

chrome/browser/resources/new_tab_page/new_tab_page.html

@@ -6,37 +6,17 @@
     <style>
       body {
         background: $i18n{backgroundColor};
+        background-image: url(./icons/background.jpg);
+        background-position: center;
         margin: 0;
       }
 
-      #oneGoogleBar {
-        height: 56px;
-      }
-
-      #backgroundImage {
-        border: none;
-        height: 100%;
-        pointer-events: none;
-        position: fixed;
-        top: 0;
-        visibility: hidden;
-        width: 100%;
-      }
-
-      [show-background-image] #backgroundImage {
-        visibility: visible;
-      }
     </style>
   </head>
   <body>
-    <div id="oneGoogleBar"></div>
-    <iframe id="backgroundImage"
-        src="chrome-untrusted://new-tab-page/custom_background_image?url=$i18nRaw{backgroundImageUrl}">
-    </iframe>
     <ntp-app></ntp-app>
     <script type="module" src="new_tab_page.js"></script>
     <link rel="stylesheet" href="tangled://resources/css/text_defaults_md.css">
     <link rel="stylesheet" href="shared_vars.css">
-    <div id="oneGoogleBarEndOfBody"></div>
   </body>
 </html>