Bug 1411419 - Update Tiles new tab page to match Photon Design System. r=dmose, a=ritu
authorUrsula Sarracini
Thu, 26 Oct 2017 17:41:16 -0400
changeset 435245 68fb8a30d5c4e3136cf2eaf951e22f6445aefb0c
parent 435244 f2f2a8d8b7d93d26c2157102fc99ff97fd1c0c65
child 435246 f7252be9b5e6fc81d71a0e25aef508be06c51cce
push id1567
push userjlorenzo@mozilla.com
push dateThu, 02 Nov 2017 12:36:05 +0000
treeherdermozilla-release@e512c14a0406 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdmose, ritu
bugs1411419
milestone57.0
Bug 1411419 - Update Tiles new tab page to match Photon Design System. r=dmose, a=ritu MozReview-Commit-ID: Ix1Ylv3L4No
browser/base/content/newtab/newTab.css
browser/themes/linux/newtab/newTab.css
browser/themes/osx/newtab/newTab.css
browser/themes/shared/jar.inc.mn
browser/themes/shared/newtab/controls.svg
browser/themes/shared/newtab/newTab.inc.css
browser/themes/shared/search/search-arrow-go.svg
browser/themes/shared/search/search-indicator-magnifying-glass.svg
browser/themes/windows/newtab/newTab.css
--- a/browser/base/content/newtab/newTab.css
+++ b/browser/base/content/newtab/newTab.css
@@ -8,17 +8,17 @@ html {
 }
 
 body {
   font: message-box;
   width: 100%;
   height: 100%;
   padding: 0;
   margin: 0;
-  background-color: #F9F9F9;
+  background-color: #F9F9FA;
   display: -moz-box;
   position: relative;
   -moz-box-flex: 1;
   -moz-user-focus: normal;
   -moz-box-orient: vertical;
 }
 
 input {
@@ -251,112 +251,69 @@ body.compact #newtab-search-container {
   display: -moz-box;
   position: relative;
   height: 36px;
   -moz-box-flex: 1;
   max-width: 600px; /* 2 * (290 cell width + 10 cell margin) */
 }
 
 #newtab-search-icon {
-  border: 1px transparent;
-  padding: 0;
-  margin: 0;
-  width: 36px;
-  height: 36px;
-  background: url("chrome://browser/skin/search-indicator-magnifying-glass.svg") center center no-repeat;
+  width: 35px;
+  height: 35px;
+  background: url("chrome://browser/skin/search-glass.svg") no-repeat 12px center/16px;
+  fill: rgba(12, 12, 13, 0.4);
+  -moz-context-properties: fill;
   position: absolute;
+  offset-inline-start: 0;
 }
 
 #newtab-search-text {
   -moz-box-flex: 1;
-  padding-top: 6px;
-  padding-bottom: 6px;
-  padding-inline-start: 34px;
-  padding-inline-end: 8px;
-  background: hsla(0,0%,100%,.9) padding-box;
-  border: 1px solid;
-  border-spacing: 0;
-  border-radius: 2px 0 0 2px;
-  border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
-  box-shadow: 0 1px 0 hsla(210,65%,9%,.02) inset,
-              0 0 2px hsla(210,65%,9%,.1) inset,
-              0 1px 0 hsla(0,0%,100%,.2);
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 3px;
+  box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1);
   color: inherit;
-  unicode-bidi: plaintext;
+  padding: 0;
+  padding-inline-end: 36px;
+  padding-inline-start: 35px;
+  width: 100%;
+  font-size: 15px;
 }
 
-#newtab-search-text:dir(rtl) {
-  border-radius: 0 2px 2px 0;
-}
-
-#newtab-search-text[aria-expanded="true"] {
-  border-radius: 2px 0 0 0;
-}
-
-#newtab-search-text[aria-expanded="true"]:dir(rtl) {
-  border-radius: 0 2px 0 0;
-}
-
-#newtab-search-text[keepfocus],
-#newtab-search-text:focus,
-#newtab-search-text[autofocus] {
-  border-color: hsla(206,100%,60%,.6) hsla(206,76%,52%,.6) hsla(204,100%,40%,.6);
+#newtab-search-text:active,
+#newtab-search-text:focus {
+  border-color: #0A84FF;
+  box-shadow: 0 0 0 2px #0A84FF;
 }
 
 #newtab-search-submit {
-  margin-inline-start: -1px;
+  offset-inline-end: 0;
   color: transparent;
-  background: url("chrome://browser/skin/search-arrow-go.svg") center center no-repeat, linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.1)) padding-box;
+  background: url("chrome://browser/skin/forward.svg") no-repeat center center;
   -moz-context-properties: fill;
-  fill: #616366;
-  padding: 0;
-  border: 1px solid;
-  border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2) transparent;
-  border-radius: 0 2px 2px 0;
-  box-shadow: 0 0 2px hsla(0,0%,100%,.5) inset,
-              0 1px 0 hsla(0,0%,100%,.2);
-  cursor: pointer;
-  transition-property: background-color, border-color, box-shadow;
-  transition-duration: 150ms;
-  width: 50px;
+  fill: rgba(12, 12, 13, 0.4);
+  position: absolute;
+  border: 0;
+  border-radius: 0 3px 3px 0;
+  background-size: 16px 16px;
+  height: 100%;
+  width: 36px;
 }
 
 #newtab-search-submit:dir(rtl) {
   transform: scaleX(-1);
 }
 
-#newtab-search-text:focus + #newtab-search-submit,
-#newtab-search-text + #newtab-search-submit:hover,
-#newtab-search-text[autofocus] + #newtab-search-submit {
-  border-color: #59b5fc #45a3e7 #3294d5;
+#newtab-search-submit:focus, #newtab-search-submit:hover {
+  background-color: rgba(12, 12, 13, 0.1);
+  cursor: pointer;
 }
 
-#newtab-search-text:focus + #newtab-search-submit,
-#newtab-search-text[keepfocus] + #newtab-search-submit,
-#newtab-search-text[autofocus] + #newtab-search-submit {
-  background-image: url("chrome://browser/skin/search-arrow-go.svg"), linear-gradient(#4cb1ff, #1793e5);
-  fill: white;
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
-              0 0 0 1px hsla(0,0%,100%,.1) inset,
-              0 1px 0 hsla(210,54%,20%,.03);
-}
-
-#newtab-search-text + #newtab-search-submit:hover {
-  background-image: url("chrome://browser/skin/search-arrow-go.svg"), linear-gradient(#4cb1ff, #1793e5);
-  fill: white;
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,
-              0 0 0 1px hsla(0,0%,100%,.1) inset,
-              0 1px 0 hsla(210,54%,20%,.03),
-              0 0 4px hsla(206,100%,20%,.2);
-}
-
-#newtab-search-text + #newtab-search-submit:hover:active {
-  box-shadow: 0 1px 1px hsla(211,79%,6%,.1) inset,
-              0 0 1px hsla(211,79%,6%,.2) inset;
-  transition-duration: 0ms;
+#newtab-search-submit:active {
+  background-color: rgba(12, 12, 13, 0.15);
 }
 
 /* CUSTOMIZE */
 #newtab-customize-overlay {
   opacity: 0;
   display: none;
   width: 100%;
   height: 100%;
@@ -545,9 +502,11 @@ body.compact #newtab-search-container {
   padding: 15px 15px 10px 15px;
   padding-inline-start: 40px;
   border-top: 1px solid threedshadow;
 }
 
 .contentSearchSuggestionTable {
   font: message-box;
   font-size: 16px;
+  border: 0;
+  transform: translateY(2px);
 }
--- a/browser/themes/linux/newtab/newTab.css
+++ b/browser/themes/linux/newtab/newTab.css
@@ -8,12 +8,8 @@
 .newtab-undo-button {
   color: rgb(221,72,20);
 }
 
 #newtab-undo-close-button {
   height: 16px;
   width: 16px;
 }
-
-.newtab-title {
-  font-family: sans-serif;
-}
--- a/browser/themes/osx/newtab/newTab.css
+++ b/browser/themes/osx/newtab/newTab.css
@@ -3,12 +3,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 %include ../../shared/newtab/newTab.inc.css
 
 
 .newtab-undo-button {
   color: rgb(20,79,174);
 }
-
-.newtab-title {
-  font-family: Lucida Grande;
-}
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -176,21 +176,19 @@
   skin/classic/browser/webIDE.svg                     (../shared/icons/webIDE.svg)
   skin/classic/browser/window.svg                     (../shared/icons/window.svg)
   skin/classic/browser/zoom-in.svg                    (../shared/icons/zoom-in.svg)
   skin/classic/browser/zoom-out.svg                   (../shared/icons/zoom-out.svg)
 
 
   skin/classic/browser/badge-add-engine.png                    (../shared/search/badge-add-engine.png)
   skin/classic/browser/badge-add-engine@2x.png                 (../shared/search/badge-add-engine@2x.png)
-  skin/classic/browser/search-arrow-go.svg                     (../shared/search/search-arrow-go.svg)
   skin/classic/browser/search-engine-placeholder.png           (../shared/search/search-engine-placeholder.png)
   skin/classic/browser/search-engine-placeholder@2x.png        (../shared/search/search-engine-placeholder@2x.png)
   skin/classic/browser/search-indicator-badge-add.svg          (../shared/search/search-indicator-badge-add.svg)
-  skin/classic/browser/search-indicator-magnifying-glass.svg   (../shared/search/search-indicator-magnifying-glass.svg)
 
   skin/classic/browser/tabbrowser/loading.svg                  (../shared/tabbrowser/loading.svg)
   skin/classic/browser/tabbrowser/loading-burst.svg            (../shared/tabbrowser/loading-burst.svg)
   skin/classic/browser/tabbrowser/crashed.svg                  (../shared/tabbrowser/crashed.svg)
   skin/classic/browser/tabbrowser/newtab.svg                   (../shared/tabbrowser/newtab.svg)
   skin/classic/browser/tabbrowser/indicator-tab-attention.svg  (../shared/tabbrowser/indicator-tab-attention.svg)
   skin/classic/browser/tabbrowser/pendingpaint.png             (../shared/tabbrowser/pendingpaint.png)
   skin/classic/browser/tabbrowser/tab-audio-playing.svg        (../shared/tabbrowser/tab-audio-playing.svg)
--- a/browser/themes/shared/newtab/controls.svg
+++ b/browser/themes/shared/newtab/controls.svg
@@ -1,85 +1,155 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="288" height="32" viewBox="0 0 288 32">
-  <defs>
-    <style>
-      /* Glyph Styles */
-      .glyphShape-style {
-        fill: #737373;
-      }
-      .glyphShape-style-pin {
-        fill: #b4b4b4;
-      }
-      .glyphShape-style-hover-gear {
-        fill: #4a90e2;
-      }
-      .glyphShape-style-hover-pin {
-        fill: #4a90e2;
-      }
-      .glyphShape-style-hover-delete {
-        fill: #ea0000;
-      }
-      .glyphShape-style-hover-active {
-        fill: #231f20;
-      }
-      /* Circle Background Styles */
-      .glyphShape-style-circle {
-        fill: #fff;
-      }
-      .glyphShape-style-circle-dropshadow {
-        fill: #000;
-        fill-opacity: .5;
-        filter: url(#filter-shadow-drop);
-      }
-    </style>
-    <filter id="filter-shadow-drop" x="-10%" y="-10%" width="120%" height="120%">
-      <feOffset in="SourceAlpha" dx="0" dy=".75" result="filter-shadow-drop-offset" />
-      <feGaussianBlur in="filter-shadow-drop-offset" stdDeviation="1" result="filter-shadow-drop-blur"/>
-    </filter>
-    <path id="glyphShape-gear" d="M28,16c0-1.7,0.9-3.1,2-3.3c-0.4-1.5-0.9-2.9-1.7-4.2c-0.9,0.7-2.6,0.3-3.8-0.9c-1.2-1.2-1.6-2.8-0.9-3.8 c-1.3-0.8-2.7-1.4-4.2-1.7c-0.2,1.1-1.6,2-3.3,2S13,3.1,12.8,2c-1.5,0.4-2.9,0.9-4.2,1.7c0.7,0.9,0.3,2.6-0.9,3.8 c-1.4,1.1-3,1.5-4,0.9C2.9,9.7,2.4,11.2,2,12.7c1.1,0.2,2,1.6,2,3.3s-0.9,3.1-2,3.3c0.4,1.5,0.9,2.9,1.7,4.2 c0.9-0.7,2.6-0.3,3.8,0.9c1.2,1.2,1.6,2.8,0.9,3.8c1.3,0.8,2.7,1.4,4.2,1.7c0.2-1.1,1.6-2,3.3-2s3.1,0.9,3.3,2 c1.5-0.4,2.9-0.9,4.2-1.7c-0.7-0.9-0.3-2.6,0.9-3.8c1.3-1.2,2.8-1.6,3.8-0.9c0.8-1.3,1.4-2.7,1.7-4.2C28.9,19.1,28,17.7,28,16z M16,24c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8S20.4,24,16,24z"/>
-    <circle id="glyphShape-circle" cx="16" cy="16" r="14"/>
-    <path id="glyphShape-pin" d="M19,15v-5h2V7H11v3h2v5l-3,2v2h5c0,4.5,0.4,8,1,8s1-3.5,1-8h5v-2L19,15z"/>
-    <polygon id="glyphShape-delete" points="23,11 21,9 16,14 11,9 9,11 14,16 9,21 11,23 16,18 21,23 23,21 18,16"/>
-  </defs>
-  <g id="icon-gear-default">
-    <use xlink:href="#glyphShape-gear" class="glyphShape-style"/>
-  </g>
-  <g id="icon-gear-default" transform="translate(32)">
-    <use xlink:href="#glyphShape-gear" class="glyphShape-style-hover-gear"/>
-  </g>
-  <g id="icon-pin-default" transform="translate(64)">
-    <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-dropshadow"/>
-    <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle"/>
-    <use xlink:href="#glyphShape-pin" class="glyphShape-style"/>
-  </g>
-  <g id="icon-pin-hover" transform="translate(96)">
-    <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-dropshadow"/>
-    <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle"/>
-    <use xlink:href="#glyphShape-pin" class="glyphShape-style-hover-pin"/>
-  </g>
-  <g id="icon-pin-hover-active" transform="translate(128)">
-    <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-dropshadow"/>
-    <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle"/>
-    <use xlink:href="#glyphShape-pin" class="glyphShape-style-hover-active"/>
-  </g>
-  <g id="icon-delete-default" transform="translate(160)">
-    <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-dropshadow"/>
-    <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle"/>
-    <use xlink:href="#glyphShape-delete" class="glyphShape-style"/>
-  </g>
-  <g id="icon-delete-hover" transform="translate(192)">
-    <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-dropshadow"/>
-    <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle"/>
-    <use xlink:href="#glyphShape-delete" class="glyphShape-style-hover-delete"/>
-  </g>
-  <g id="icon-delete-hover-active" transform="translate(224)">
-    <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle-dropshadow"/>
-    <use xlink:href="#glyphShape-circle" class="glyphShape-style-circle"/>
-    <use xlink:href="#glyphShape-delete" class="glyphShape-style-hover-active"/>
-  </g>
-  <g id="icon-pin-default" transform="translate(256)">
-    <use xlink:href="#glyphShape-pin" class="glyphShape-style-pin"/>
-  </g>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="288px" height="32px" viewBox="0 0 288 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>controls</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <circle id="path-1" cx="14" cy="14" r="14"></circle>
+        <filter x="-12.5%" y="-8.9%" width="125.0%" height="125.0%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.246631567 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <circle id="path-3" cx="14" cy="14" r="14"></circle>
+        <filter x="-12.5%" y="-8.9%" width="125.0%" height="125.0%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.246631567 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <circle id="path-5" cx="14" cy="14" r="14"></circle>
+        <filter x="-12.5%" y="-8.9%" width="125.0%" height="125.0%" filterUnits="objectBoundingBox" id="filter-6">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.246631567 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <circle id="path-7" cx="14" cy="14" r="14"></circle>
+        <filter x="-12.5%" y="-8.9%" width="125.0%" height="125.0%" filterUnits="objectBoundingBox" id="filter-8">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.246631567 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <circle id="path-9" cx="14" cy="14" r="14"></circle>
+        <filter x="-12.5%" y="-8.9%" width="125.0%" height="125.0%" filterUnits="objectBoundingBox" id="filter-10">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.246631567 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <circle id="path-11" cx="14" cy="14" r="14"></circle>
+        <filter x="-12.5%" y="-8.9%" width="125.0%" height="125.0%" filterUnits="objectBoundingBox" id="filter-12">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.246631567 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="controls" fill-rule="nonzero">
+            <g transform="translate(2.000000, 2.000000)">
+                <g id="icon-gear-default" fill-opacity="context-fill-opacity" fill="context-fill">
+                    <g id="glyphShape-gear-link">
+                        <path d="M24.5,12.5 L21.35,12.5 C21.1565841,11.5610207 20.7837667,10.6681942 20.252,9.8705 L22.487,7.6355 C23.0554583,7.04693167 23.0473286,6.11137283 22.4687279,5.53277214 C21.8901272,4.95417144 20.9545683,4.94604169 20.366,5.5145 L18.131,7.7495 C17.3329502,7.21706084 16.4395982,6.8437273 15.5,6.65 L15.5,3.5 C15.5,2.67157288 14.8284271,2 14,2 C13.1715729,2 12.5,2.67157288 12.5,3.5 L12.5,6.65 C11.5610318,6.84345197 10.668212,7.21626662 9.8705,7.748 L7.6355,5.513 C7.04938781,4.92730204 6.09944799,4.92763783 5.51375002,5.51375002 C4.92805204,6.0998622 4.92838782,7.04980202 5.5145,7.6355 L7.7495,9.8705 C7.21720441,10.6680797 6.84387483,11.5609129 6.65,12.5 L3.5,12.5 C2.67157289,12.5 2.00000004,13.1715729 2.00000004,14 C2.00000004,14.8284271 2.67157289,15.5 3.5,15.5 L6.65,15.5 C6.84390489,16.444731 7.21934843,17.3428409 7.7555,18.1445 C7.7345,18.164 7.7075,18.17 7.688,18.1895 L5.513,20.3645 C5.12306512,20.7411117 4.9666811,21.2988168 5.10395427,21.823261 C5.24122743,22.3477051 5.65079487,22.7572726 6.17523901,22.8945457 C6.69968316,23.0318189 7.25738829,22.8754349 7.634,22.4855 L9.809,20.3105 C9.8285,20.291 9.836,20.264 9.854,20.243 C10.6559957,20.7798585 11.5546382,21.1558212 12.5,21.35 L12.5,24.5 C12.5,25.3284271 13.1715729,26 14,26 C14.8284271,26 15.5,25.3284271 15.5,24.5 L15.5,21.35 C16.4389682,21.156548 17.331788,20.7837334 18.1295,20.252 L20.3645,22.487 C20.9530683,23.0554583 21.8886272,23.0473286 22.4672279,22.4687279 C23.0458286,21.8901272 23.0539583,20.9545683 22.4855,20.366 L20.2505,18.131 C20.7829725,17.332968 21.1563088,16.4396093 21.35,15.5 L24.5,15.5 C25.3284271,15.5 26,14.8284271 26,14 C26,13.1715729 25.3284271,12.5 24.5,12.5 Z M9.5,14 C9.5,11.5147186 11.5147186,9.5 14,9.5 C16.4852814,9.5 18.5,11.5147186 18.5,14 C18.5,16.4852814 16.4852814,18.5 14,18.5 C11.5147186,18.5 9.5,16.4852814 9.5,14 Z" id="glyphShape-gear"></path>
+                    </g>
+                </g>
+                <g id="icon-gear-default" transform="translate(34.000000, 2.000000)" fill="#0A84FF">
+                    <g id="glyphShape-gear-link">
+                        <path d="M22.5,10.5 L19.35,10.5 C19.1565841,9.56102069 18.7837667,8.66819421 18.252,7.8705 L20.487,5.6355 C21.0554583,5.04693167 21.0473286,4.11137283 20.4687279,3.53277214 C19.8901272,2.95417144 18.9545683,2.94604169 18.366,3.5145 L16.131,5.7495 C15.3329502,5.21706084 14.4395982,4.8437273 13.5,4.65 L13.5,1.5 C13.5,0.671572875 12.8284271,5.07265313e-17 12,0 C11.1715729,-5.07265313e-17 10.5,0.671572875 10.5,1.5 L10.5,4.65 C9.56103183,4.84345197 8.66821204,5.21626662 7.8705,5.748 L5.6355,3.513 C5.04938781,2.92730204 4.09944799,2.92763783 3.51375002,3.51375002 C2.92805204,4.0998622 2.92838782,5.04980202 3.5145,5.6355 L5.7495,7.8705 C5.21720441,8.6680797 4.84387483,9.56091293 4.65,10.5 L1.5,10.5 C0.671572893,10.5 4.47034837e-08,11.1715729 4.47034836e-08,12 C4.47034835e-08,12.8284271 0.671572893,13.5 1.5,13.5 L4.65,13.5 C4.84390489,14.444731 5.21934843,15.3428409 5.7555,16.1445 C5.7345,16.164 5.7075,16.17 5.688,16.1895 L3.513,18.3645 C3.12306512,18.7411117 2.9666811,19.2988168 3.10395427,19.823261 C3.24122743,20.3477051 3.65079487,20.7572726 4.17523901,20.8945457 C4.69968316,21.0318189 5.25738829,20.8754349 5.634,20.4855 L7.809,18.3105 C7.8285,18.291 7.836,18.264 7.854,18.243 C8.65599575,18.7798585 9.55463824,19.1558212 10.5,19.35 L10.5,22.5 C10.5,23.3284271 11.1715729,24 12,24 C12.8284271,24 13.5,23.3284271 13.5,22.5 L13.5,19.35 C14.4389682,19.156548 15.331788,18.7837334 16.1295,18.252 L18.3645,20.487 C18.9530683,21.0554583 19.8886272,21.0473286 20.4672279,20.4687279 C21.0458286,19.8901272 21.0539583,18.9545683 20.4855,18.366 L18.2505,16.131 C18.7829725,15.332968 19.1563088,14.4396093 19.35,13.5 L22.5,13.5 C23.3284271,13.5 24,12.8284271 24,12 C24,11.1715729 23.3284271,10.5 22.5,10.5 Z M7.5,12 C7.5,9.51471863 9.51471863,7.5 12,7.5 C14.4852814,7.5 16.5,9.51471863 16.5,12 C16.5,14.4852814 14.4852814,16.5 12,16.5 C9.51471863,16.5 7.5,14.4852814 7.5,12 Z" id="glyphShape-gear"></path>
+                    </g>
+                </g>
+                <g id="icon-pin-default" transform="translate(64.000000, 0.000000)">
+                    <g id="glyphShape-circle-link">
+                        <g id="glyphShape-circle">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                            <use fill-opacity="0.5" fill="#000000" fill-rule="evenodd" xlink:href="#path-1"></use>
+                        </g>
+                    </g>
+                    <g id="glyphShape-circle-link" fill="#FFFFFF">
+                        <circle id="glyphShape-circle" cx="14" cy="14" r="14"></circle>
+                    </g>
+                    <g id="glyphShape-pin-link" transform="translate(2.000000, 2.000000)" fill-opacity="0.8" fill="#0C0C0D" opacity="0.5">
+                        <path d="M21.0602235,18.9392235 L16.1207235,13.9997235 L19.5602235,10.5602235 C20.1457964,9.97447373 20.1457964,9.02497329 19.5602235,8.43922351 C18.3214743,7.19329279 16.6356582,6.49487551 14.8787235,6.49972351 L14.6207235,6.49972351 C12.6212434,6.49889574 11.0005513,4.87820361 10.9997235,2.87872351 L10.9997235,1.99972351 C10.999594,1.39312966 10.6341323,0.846322434 10.0737053,0.614206542 C9.51327843,0.38209065 8.86821489,0.510361636 8.43922351,0.939223509 L0.939223509,8.43922351 C0.510361636,8.86821489 0.38209065,9.51327843 0.614206542,10.0737053 C0.846322434,10.6341323 1.39312966,10.999594 1.99972351,10.9997235 L2.87872351,10.9997235 C4.87820361,11.0005513 6.49889574,12.6212434 6.49972351,14.6207235 L6.49972351,14.8742235 C6.4271772,16.6769781 7.16247236,18.4181482 8.50522351,19.6232235 C9.0991645,20.1487898 9.99959214,20.1211854 10.5602235,19.5602235 L13.9997235,16.1207235 L18.9392235,21.0602235 C19.5277918,21.6286818 20.4633507,21.6205521 21.0419514,21.0419514 C21.6205521,20.4633507 21.6286818,19.5277918 21.0602235,18.9392235 Z M9.69322351,16.1837235 C9.55691479,15.7608895 9.49153122,15.3184099 9.49972351,14.8742235 L9.49972351,14.6207235 C9.50463372,12.8640717 8.80682056,11.17841 7.56172351,9.93922351 C6.89356311,9.26903844 6.08949822,8.7498744 5.20372351,8.41672351 L8.41822351,5.20372351 C8.75009692,6.08898872 9.26828926,6.89262165 9.93772351,7.56022351 C11.1768387,8.80652462 12.8632693,9.50497268 14.6207235,9.49972351 L14.8787235,9.49972351 C15.313005,9.49837795 15.7439466,9.5756222 16.1507235,9.72772351 L9.69322351,16.1837235 Z" id="glyphShape-pin"></path>
+                    </g>
+                </g>
+                <g id="icon-pin-hover" transform="translate(96.000000, 0.000000)">
+                    <g id="glyphShape-circle-link">
+                        <g id="glyphShape-circle">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                            <use fill-opacity="0.5" fill="#000000" fill-rule="evenodd" xlink:href="#path-3"></use>
+                        </g>
+                    </g>
+                    <g id="glyphShape-circle-link" fill="#FFFFFF">
+                        <circle id="glyphShape-circle" cx="14" cy="14" r="14"></circle>
+                    </g>
+                    <g id="glyphShape-pin-link" transform="translate(2.000000, 2.000000)" fill="#0A84FF">
+                        <path d="M21.0602235,18.9395 L16.1207235,14 L19.5602235,10.5605 C20.1457964,9.97475022 20.1457964,9.02524978 19.5602235,8.4395 C18.3214743,7.19356928 16.6356582,6.495152 14.8787235,6.5 L14.6207235,6.5 C12.6212434,6.49917223 11.0005513,4.8784801 10.9997235,2.879 L10.9997235,2 C10.999594,1.39340615 10.6341323,0.846598925 10.0737053,0.614483033 C9.51327843,0.382367141 8.86821489,0.510638127 8.43922351,0.9395 L0.939223509,8.4395 C0.510361636,8.86849138 0.38209065,9.51355492 0.614206542,10.0739818 C0.846322434,10.6344087 1.39312966,10.9998705 1.99972351,11 L2.87872351,11 C4.87820361,11.0008278 6.49889574,12.6215199 6.49972351,14.621 L6.49972351,14.8745 C6.4271772,16.6772546 7.16247236,18.4184247 8.50522351,19.6235 C9.0991645,20.1490663 9.99959214,20.1214619 10.5602235,19.5605 L13.9997235,16.121 L18.9392235,21.0605 C19.5277918,21.6289583 20.4633507,21.6208286 21.0419514,21.0422279 C21.6205521,20.4636272 21.6286818,19.5280683 21.0602235,18.9395 Z M9.69322351,16.184 C9.55691479,15.761166 9.49153122,15.3186864 9.49972351,14.8745 L9.49972351,14.621 C9.50463372,12.8643482 8.80682056,11.1786865 7.56172351,9.9395 C6.89356311,9.26931493 6.08949822,8.75015089 5.20372351,8.417 L8.41822351,5.204 C8.75009692,6.08926521 9.26828926,6.89289814 9.93772351,7.5605 C11.1768387,8.80680111 12.8632693,9.50524918 14.6207235,9.5 L14.8787235,9.5 C15.313005,9.49865444 15.7439466,9.57589869 16.1507235,9.728 L9.69322351,16.184 Z" id="glyphShape-pin"></path>
+                    </g>
+                </g>
+                <g id="icon-pin-hover-active" transform="translate(128.000000, 0.000000)">
+                    <g id="glyphShape-circle-link">
+                        <g id="glyphShape-circle">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
+                            <use fill-opacity="0.5" fill="#000000" fill-rule="evenodd" xlink:href="#path-5"></use>
+                        </g>
+                    </g>
+                    <g id="glyphShape-circle-link" fill="#FFFFFF">
+                        <circle id="glyphShape-circle" cx="14" cy="14" r="14"></circle>
+                    </g>
+                    <g id="glyphShape-pin-link" transform="translate(2.000000, 2.000000)" fill-opacity="0.8" fill="#0C0C0D">
+                        <path d="M21.0605,18.9395 L16.121,14 L19.5605,10.5605 C20.1460729,9.97475022 20.1460729,9.02524978 19.5605,8.4395 C18.3217508,7.19356928 16.6359346,6.495152 14.879,6.5 L14.621,6.5 C12.6215199,6.49917223 11.0008278,4.8784801 11,2.879 L11,2 C10.9998705,1.39340615 10.6344087,0.846598925 10.0739818,0.614483033 C9.51355492,0.382367141 8.86849138,0.510638127 8.4395,0.9395 L0.9395,8.4395 C0.510638127,8.86849138 0.382367141,9.51355492 0.614483033,10.0739818 C0.846598925,10.6344087 1.39340615,10.9998705 2,11 L2.879,11 C4.8784801,11.0008278 6.49917223,12.6215199 6.5,14.621 L6.5,14.8745 C6.42745369,16.6772546 7.16274886,18.4184247 8.5055,19.6235 C9.09944099,20.1490663 9.99986863,20.1214619 10.5605,19.5605 L14,16.121 L18.9395,21.0605 C19.5280683,21.6289583 20.4636272,21.6208286 21.0422279,21.0422279 C21.6208286,20.4636272 21.6289583,19.5280683 21.0605,18.9395 Z M9.6935,16.184 C9.55719129,15.761166 9.49180771,15.3186864 9.5,14.8745 L9.5,14.621 C9.50491021,12.8643482 8.80709705,11.1786865 7.562,9.9395 C6.8938396,9.26931493 6.08977471,8.75015089 5.204,8.417 L8.4185,5.204 C8.75037341,6.08926521 9.26856575,6.89289814 9.938,7.5605 C11.1771151,8.80680111 12.8635458,9.50524918 14.621,9.5 L14.879,9.5 C15.3132815,9.49865444 15.7442231,9.57589869 16.151,9.728 L9.6935,16.184 Z" id="glyphShape-pin"></path>
+                    </g>
+                </g>
+                <g id="icon-delete-default" transform="translate(160.000000, 0.000000)">
+                    <g id="glyphShape-circle-link">
+                        <g id="glyphShape-circle">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
+                            <use fill-opacity="0.5" fill="#000000" fill-rule="evenodd" xlink:href="#path-7"></use>
+                        </g>
+                    </g>
+                    <g id="glyphShape-circle-link" fill="#FFFFFF">
+                        <circle id="glyphShape-circle" cx="14" cy="14" r="14"></circle>
+                    </g>
+                    <g id="glyphShape-delete-link" transform="translate(7.000000, 7.000000)" fill-opacity="0.8" fill="#0C0C0D" opacity="0.5">
+                        <path d="M8.74459268,7.15309268 L13.9495927,1.94809268 C14.375733,1.50646618 14.3693071,0.804796097 13.93515,0.37104824 C13.500993,-0.0626996171 12.7993172,-0.0684638996 12.3580927,0.358092679 L7.15309268,5.56159268 L1.94809268,0.358092679 C1.66763681,0.0571129121 1.24525937,-0.0667810937 0.846659316,0.0350143657 C0.448059266,0.136809825 0.136809825,0.448059266 0.0350143657,0.846659316 C-0.0667810937,1.24525937 0.0571129121,1.66763681 0.358092679,1.94809268 L5.56159268,7.15309268 L0.358092679,12.3580927 C0.0571129121,12.6385485 -0.0667810937,13.060926 0.0350143657,13.459526 C0.136809825,13.8581261 0.448059266,14.1693755 0.846659316,14.271171 C1.24525937,14.3729665 1.66763681,14.2490724 1.94809268,13.9480927 L7.15309268,8.74459268 L12.3580927,13.9495927 C12.7997192,14.375733 13.5013893,14.3693071 13.9351371,13.93515 C14.368885,13.500993 14.3746493,12.7993172 13.9480927,12.3580927 L8.74459268,7.15309268 Z" id="glyphShape-delete"></path>
+                    </g>
+                </g>
+                <g id="icon-delete-hover" transform="translate(192.000000, 0.000000)">
+                    <g id="glyphShape-circle-link">
+                        <g id="glyphShape-circle">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-9"></use>
+                            <use fill-opacity="0.5" fill="#000000" fill-rule="evenodd" xlink:href="#path-9"></use>
+                        </g>
+                    </g>
+                    <g id="glyphShape-circle-link" fill="#FFFFFF">
+                        <circle id="glyphShape-circle" cx="14" cy="14" r="14"></circle>
+                    </g>
+                    <g id="glyphShape-delete-link" transform="translate(7.000000, 7.000000)" fill="#FF0039">
+                        <path d="M8.74459268,7.15309268 L13.9495927,1.94809268 C14.375733,1.50646618 14.3693071,0.804796097 13.93515,0.37104824 C13.500993,-0.0626996171 12.7993172,-0.0684638996 12.3580927,0.358092679 L7.15309268,5.56159268 L1.94809268,0.358092679 C1.66763681,0.0571129121 1.24525937,-0.0667810937 0.846659316,0.0350143657 C0.448059266,0.136809825 0.136809825,0.448059266 0.0350143657,0.846659316 C-0.0667810937,1.24525937 0.0571129121,1.66763681 0.358092679,1.94809268 L5.56159268,7.15309268 L0.358092679,12.3580927 C0.0571129121,12.6385485 -0.0667810937,13.060926 0.0350143657,13.459526 C0.136809825,13.8581261 0.448059266,14.1693755 0.846659316,14.271171 C1.24525937,14.3729665 1.66763681,14.2490724 1.94809268,13.9480927 L7.15309268,8.74459268 L12.3580927,13.9495927 C12.7997192,14.375733 13.5013893,14.3693071 13.9351371,13.93515 C14.368885,13.500993 14.3746493,12.7993172 13.9480927,12.3580927 L8.74459268,7.15309268 Z" id="glyphShape-delete"></path>
+                    </g>
+                </g>
+                <g id="icon-delete-hover-active" transform="translate(224.000000, 0.000000)">
+                    <g id="glyphShape-circle-link">
+                        <g id="glyphShape-circle">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
+                            <use fill-opacity="0.5" fill="#000000" fill-rule="evenodd" xlink:href="#path-11"></use>
+                        </g>
+                    </g>
+                    <g id="glyphShape-circle-link" fill="#FFFFFF">
+                        <circle id="glyphShape-circle" cx="14" cy="14" r="14"></circle>
+                    </g>
+                    <g id="glyphShape-delete-link" transform="translate(7.000000, 7.000000)" fill-opacity="0.8" fill="#0C0C0D">
+                        <path d="M8.74459268,7.15309268 L13.9495927,1.94809268 C14.375733,1.50646618 14.3693071,0.804796097 13.93515,0.37104824 C13.500993,-0.0626996171 12.7993172,-0.0684638996 12.3580927,0.358092679 L7.15309268,5.56159268 L1.94809268,0.358092679 C1.66763681,0.0571129121 1.24525937,-0.0667810937 0.846659316,0.0350143657 C0.448059266,0.136809825 0.136809825,0.448059266 0.0350143657,0.846659316 C-0.0667810937,1.24525937 0.0571129121,1.66763681 0.358092679,1.94809268 L5.56159268,7.15309268 L0.358092679,12.3580927 C0.0571129121,12.6385485 -0.0667810937,13.060926 0.0350143657,13.459526 C0.136809825,13.8581261 0.448059266,14.1693755 0.846659316,14.271171 C1.24525937,14.3729665 1.66763681,14.2490724 1.94809268,13.9480927 L7.15309268,8.74459268 L12.3580927,13.9495927 C12.7997192,14.375733 13.5013893,14.3693071 13.9351371,13.93515 C14.368885,13.500993 14.3746493,12.7993172 13.9480927,12.3580927 L8.74459268,7.15309268 Z" id="glyphShape-delete"></path>
+                    </g>
+                </g>
+                <g id="icon-pin-default" transform="translate(258.000000, 2.000000)" fill="#B4B4B4">
+                    <g id="glyphShape-pin-link">
+                        <path d="M21.0602235,18.9392235 L16.1207235,13.9997235 L19.5602235,10.5602235 C20.1457964,9.97447373 20.1457964,9.02497329 19.5602235,8.43922351 C18.3214743,7.19329279 16.6356582,6.49487551 14.8787235,6.49972351 L14.6207235,6.49972351 C12.6212434,6.49889574 11.0005513,4.87820361 10.9997235,2.87872351 L10.9997235,1.99972351 C10.999594,1.39312966 10.6341323,0.846322434 10.0737053,0.614206542 C9.51327843,0.38209065 8.86821489,0.510361636 8.43922351,0.939223509 L0.939223509,8.43922351 C0.510361636,8.86821489 0.38209065,9.51327843 0.614206542,10.0737053 C0.846322434,10.6341323 1.39312966,10.999594 1.99972351,10.9997235 L2.87872351,10.9997235 C4.87820361,11.0005513 6.49889574,12.6212434 6.49972351,14.6207235 L6.49972351,14.8742235 C6.4271772,16.6769781 7.16247236,18.4181482 8.50522351,19.6232235 C9.0991645,20.1487898 9.99959214,20.1211854 10.5602235,19.5602235 L13.9997235,16.1207235 L18.9392235,21.0602235 C19.5277918,21.6286818 20.4633507,21.6205521 21.0419514,21.0419514 C21.6205521,20.4633507 21.6286818,19.5277918 21.0602235,18.9392235 Z M9.69322351,16.1837235 C9.55691479,15.7608895 9.49153122,15.3184099 9.49972351,14.8742235 L9.49972351,14.6207235 C9.50463372,12.8640717 8.80682056,11.17841 7.56172351,9.93922351 C6.89356311,9.26903844 6.08949822,8.7498744 5.20372351,8.41672351 L8.41822351,5.20372351 C8.75009692,6.08898872 9.26828926,6.89262165 9.93772351,7.56022351 C11.1768387,8.80652462 12.8632693,9.50497268 14.6207235,9.49972351 L14.8787235,9.49972351 C15.313005,9.49837795 15.7439466,9.5756222 16.1507235,9.72772351 L9.69322351,16.1837235 Z" id="Shape"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
 </svg>
--- a/browser/themes/shared/newtab/newTab.inc.css
+++ b/browser/themes/shared/newtab/newTab.inc.css
@@ -85,23 +85,22 @@
   width: 28px;
 }
 
 #newtab-customize-button {
   font-size: 28px;
   padding: 0;
   /* only display the text label when CSS backgrounds are disabled (e.g. in high contrast mode) */
   color: transparent;
+  fill: rgba(12, 12, 12, 0.6);
+  -moz-context-properties: fill;
 }
 
 #newtab-customize-button:-moz-any(:hover, :active, [active]) {
-  background-image: -moz-image-rect(url(chrome://browser/skin/newtab/controls.svg), 0, 64, 32, 32);
-  background-color: #FFFFFF;
-  border: solid 1px #CCCCCC;
-  border-radius: 2px;
+  background-color: #EDEDF0;
 }
 
 /* GRID */
 #topsites-heading {
   color: #7A7A7A;
   font-size: 1em;
   font-weight: normal;
   /* Position the heading such that it doesn't affect how many cells we
@@ -109,17 +108,17 @@
   position: absolute;
   /* The top margin moves the heading away from the grid.
      The horizontal margin aligns the heading with the cells. */
   margin: -1em 10px 0;
 }
 
 /* CELLS */
 .newtab-cell {
-  --cell-corner-radius: 8px;
+  --cell-corner-radius: 4px;
   background-color: rgba(255,255,255,.2);
   border-radius: var(--cell-corner-radius);
 }
 
 body.compact .newtab-cell {
   --cell-corner-radius: 2px;
 }
 
@@ -127,32 +126,18 @@ body.compact .newtab-cell {
   outline: 2px dashed #c1c1c1;
   outline-offset: -2px;
   -moz-outline-radius: var(--cell-corner-radius);
 }
 
 /* SITES */
 .newtab-site {
   border-radius: var(--cell-corner-radius);
-  box-shadow: 0 1px 3px #c1c1c1;
+  box-shadow: 0 2px 4px #c1c1c1;
   text-decoration: none;
-  transition-property: top, left, opacity, box-shadow, background-color;
-}
-
-.newtab-cell:not([ignorehover]) .newtab-control:hover ~ .newtab-link,
-.newtab-cell:not([ignorehover]) .newtab-link:hover,
-.newtab-site[dragged] {
-  border: 2px solid white;
-  box-shadow: 0 0 6px 1px #add6ff;
-  margin: -2px;
-}
-
-.newtab-site[dragged] {
-  transition-property: box-shadow, background-color;
-  background-color: rgb(242,242,242);
 }
 
 /* LINKS */
 .newtab-link {
   border-radius: var(--cell-corner-radius);
   overflow: hidden;
 }
 
@@ -204,93 +189,85 @@ body.compact .newtab-site[type=affiliate
 
 .newtab-site[type=affiliate] .newtab-thumbnail {
   background-size: auto;
 }
 
 /* TITLES */
 
 .newtab-title {
-  background-color: #F2F2F2;
-  font-size: 13px;
+  background-color: #F9F9FA;
+  font-size: 14px;
   line-height: 30px;
   border: 1px solid #fff;
   border-radius: 0 0 var(--cell-corner-radius) var(--cell-corner-radius);
+  color: rgba(12, 12, 13, 0.76);
 }
 
 body.compact .newtab-title {
   background-color: hsla(0,0%,100%,.85);
   font-size: 12px;
   line-height: 21px;
   border: 1px solid hsla(0,0%,80%,.8);
   border-top-color: hsla(0,0%,0%,.1);
   background-clip: padding-box;
 }
 
-.newtab-title {
-  color: #5c5c5c;
-}
-
 body.compact .newtab-title {
   color: black;
 }
 
 body:not(.compact) .newtab-site:hover .newtab-title {
   color: white;
-  background-color: #333;
-  border-color: #333;
-  border-top-color: white;
+  background-color: #4A4A4F;
+  border-color: white;
 }
 
 body.compact .newtab-site:hover .newtab-title {
   color: white;
   background-color: hsla(0,0%,20%,.85);
   border-color: hsla(0,0%,0%,.8);
   border-top-color: white;
 }
 
-.newtab-site[pinned] .newtab-title {
-  padding-inline-start: 24px;
-}
-
 .newtab-site[pinned] .newtab-title::before {
-  background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 7, 278, 28, 266);
-  background-size: 10px;
+  background-image: -moz-image-rect(url("chrome://browser/skin/newtab/controls.svg"), 0, 298, 28, 256);
+  background-size: 20px;
   content: "";
-  height: 17px;
+  height: 20px;
   left: 0;
   position: absolute;
-  width: 10px;
+  width: 20px;
   margin-left: 8px;
   margin-top: 6px;
 }
 
 .newtab-site[pinned] .newtab-title:dir(rtl)::before {
   left: auto;
   right: 0;
 }
 
 /* CONTROLS */
 .newtab-control {
   background-color: transparent;
-  background-size: 24px;
+  background-size: 26px;
   border: none;
-  height: 24px;
-  width: 24px;
-  top: 4px;
+  height: 26px;
+  width: 26px;
+  top: 8px;
 }
 
 .newtab-control-pin:dir(ltr),
 .newtab-control-block:dir(rtl) {
-  left: 4px;
+  left: 8px;
 }
 
 .newtab-control-block:dir(ltr),
 .newtab-control-pin:dir(rtl) {
-  right: 4px;
+  right: 8px;
 }
 
 body.compact .newtab-control {
   top: -8px;
 }
 
 body.compact .newtab-control-pin:dir(ltr),
 body.compact .newtab-control-block:dir(rtl) {
deleted file mode 100644
--- a/browser/themes/shared/search/search-arrow-go.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg"
-     width="16" height="16" viewBox="0 0 16 16">
-  <path fill="context-fill" d="M1,7v2.2C1,9.8,1.4,10,2,10h7.5l-3,3.1c-0.4,0.3-0.4,1,0,1.4l0.8,0.8 c0.4,0.4,1,0.4,1.4,0l6.6-6.6c0.4-0.4,0.4-1,0-1.4L8.7,0.7c-0.4-0.4-1-0.4-1.4,0L6.5,1.6C6.1,2,6.1,2.6,6.5,3l3,3H2C1.4,6,1,6.4,1,7z"/>
-</svg>
-
deleted file mode 100644
--- a/browser/themes/shared/search/search-indicator-magnifying-glass.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-  <path fill="#808080" d="M21.7,20.3l-1.4,1.4l-5.4-5.4c-1.3,1-3,1.7-4.9,1.7 c-4.4,0-8-3.6-8-8c0-4.4,3.6-8,8-8c4.4,0,8,3.6,8,8c0,1.8-0.6,3.5-1.7,4.9L21.7,20.3z M10,4c-3.3,0-6,2.7-6,6s2.7,6,6,6s6-2.7,6-6 S13.3,4,10,4z"/>
-</svg>
--- a/browser/themes/windows/newtab/newTab.css
+++ b/browser/themes/windows/newtab/newTab.css
@@ -7,14 +7,8 @@
 
 .newtab-undo-button {
   color: rgb(0,102,204);
 }
 
 .newtab-undo-button > .button-box {
   padding: 0;
 }
-
-.newtab-title {
-  font: message-box;
-  font-size: 13px;
-  line-height: 30px;
-}