[NTP] Fix ricker picker dimensions to match spec

Adjust positioning of elements to match spec:
- Reduce width of dialog to 568px to match spec.
- Remove hidden spacing between some inline-block elements due to font
  size.
- Simplify header by removing some extra div wrappers.
- Hide the back button using "display: none" in order to avoid messy
  margin adjustments.
- Remove side margin of the last background tile per row.
- Align footer and daily refresh elements using flexbox instead of
  inline-block.

Misc. fixes:
- Hide daily refresh toggle when background image panel is not open.
- Fix back button focus color in dark mode.
- Hide scrollbar when not required.

Screenshots: https://drive.google.com/open?id=1p5VB83jYaUqk0Pz3mzlO8NTKbd9dgiDG

Bug: 987076
Change-Id: I12d9132f66361029b1b644a91f9de639ee74c2d4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1721375
Commit-Queue: Kristi Park <kristipark@chromium.org>
Reviewed-by: Kyle Milka <kmilka@chromium.org>
Cr-Commit-Position: refs/heads/master@{#682037}

chrome/browser/resources/local_ntp/customize.js

@@ -138,7 +138,6 @@ customize.IDS = {
   LINK_ICON: 'link-icon',
   MENU: 'bg-sel-menu',
   OPTIONS_TITLE: 'edit-bg-title',
-  REFRESH_DAILY_WRAPPER: 'refresh-daily-wrapper',
   RESTORE_DEFAULT: 'edit-bg-restore-default',
   RESTORE_DEFAULT_TEXT: 'edit-bg-restore-default-text',
   SHORTCUTS_BUTTON: 'shortcuts-button',
@@ -477,7 +476,6 @@ customize.richerPicker_resetImageMenu = function() {
       customize.IDS.BACKGROUNDS_MENU;
   customize.richerPicker_openBackgroundSubmenu.title = '';
   backgroundMenu.scrollTop = 0;
-  $(customize.IDS.REFRESH_DAILY_WRAPPER).hidden = true;
 };
 
 /**
@@ -1208,7 +1206,6 @@ customize.showImageSelectionDialog = function(dialogTitle, collIndex) {
   } else {
     $(customize.IDS.TILES).focus();
   }
-  $(customize.IDS.REFRESH_DAILY_WRAPPER).hidden = false;
 };
 
 /**

chrome/browser/resources/local_ntp/local_ntp.css

@@ -699,6 +699,7 @@ html[dir=rtl] #error-notice.has-link #error-notice-msg {
   box-shadow: 0 1px 3px 0 rgba(var(--GG800-rgb), .3),
               0 4px 8px 3px rgba(var(--GG800-rgb), .15);
   color: rgb(var(--GG700-rgb));
+  font-size: 0;  /* Remove extra spacing between inline-block elements. */
   height: 528px;
   min-width: 800px;
   padding: 0;
@@ -713,6 +714,10 @@ html[dir=rtl] #error-notice.has-link #error-notice-msg {
   }
 }
 
+#customization-menu > div {
+  font-size: 13px;
+}
+
 #menu-nav-panel {
   display: inline-block;
   height: 384px;
@@ -835,13 +840,9 @@ html[dir=rtl] .menu-option {
 #menu-header {
   display: flex;
   height: 80px;
-}
-
-#menu-title-wrapper {
-  display: block;
-  height: 80px;
   line-height: 80px;
-  margin-inline-start: -12px;
+  padding-inline-end: 24px;
+  padding-inline-start: 232px;
 }
 
 #menu-title {
@@ -850,15 +851,14 @@ html[dir=rtl] .menu-option {
   width: fit-content;
 }
 
-.on-img-menu #menu-title {
-  margin-inline-start: 16px;
-}
-
 #menu-footer {
   border-top: 1px solid rgb(var(--GG200-rgb));
   bottom: 0;
+  box-sizing: border-box;
   color: rgb(var(--GG800-rgb));
+  display: flex;
   height: 64px;
+  justify-content: flex-end;
   left: 0;
   padding-inline-start: 0;
   position: absolute;
@@ -873,30 +873,31 @@ html[dir=rtl] .menu-option {
   }
 }
 
-#menu-done {
+#menu-footer > button {
   height: 32px;
   line-height: 32px;
+}
+
+#menu-done {
   margin-inline-end: 16px;
 }
 
 #menu-cancel {
-  height: 32px;
-  line-height: 32px;
   margin-inline-end: 8px;
 }
 
 #menu-contents {
   display: inline-block;
   height: 384px;
-  margin-inline-start: 37px;
+  margin-inline-start: 40px;
   position: relative;
-  width: 584px;
+  width: 568px;
 }
 
 .menu-panel {
   height: 100%;
   left: 0;
-  overflow-y: scroll;
+  overflow-y: auto;
   position: absolute;
   top: 0;
   visibility: hidden;
@@ -918,6 +919,12 @@ html[dir=rtl] .menu-option {
   width: 176px;
 }
 
+/* Remove left/right spacing from the last tile in each row. */
+#backgrounds-menu .bg-sel-tile-bg:nth-of-type(3n),
+#backgrounds-image-menu .bg-sel-tile-bg:nth-of-type(3n) {
+  margin-inline-end: 0;
+}
+
 #backgrounds-image-menu .bg-sel-tile-bg {
   margin-bottom: 8px;
 }
@@ -1005,12 +1012,6 @@ html[dir=rtl] .menu-option {
   vertical-align: top;
 }
 
-#menu-back-wrapper {
-  display: block;
-  height: 80px;
-  vertical-align: top;
-}
-
 #menu-back {
   -webkit-mask-image: url(../../../../ui/webui/resources/images/icon_arrow_back.svg);
   -webkit-mask-repeat: no-repeat;
@@ -1032,25 +1033,17 @@ html[dir=rtl] .menu-option {
 
 #menu-back-circle {
   border-radius: 50%;
-  display: inline-block;
+  display: none;
   height: 36px;
-  margin-inline-start: 209px;
+  margin-inline-end: 4px;
+  margin-inline-start: -12px;
   margin-top: 22px;
   outline: none;
-  visibility: hidden;
   width: 36px;
 }
 
-@media (prefers-color-scheme: dark) {
-  #menu-back-circle:active,
-  #menu-back-circle:focus {
-    background: rgb(var(--GG800-rgb));
-  }
-}
-
 .on-img-menu #menu-back-circle {
-  margin-inline-start: 229px;
-  visibility: visible;
+  display: inline-block;
 }
 
 #menu-back-circle:active,
@@ -1061,6 +1054,11 @@ html[dir=rtl] .menu-option {
 }
 
 @media (prefers-color-scheme: dark) {
+  #menu-back-circle:active,
+  #menu-back-circle:focus {
+    background: rgb(var(--GG800-rgb));
+  }
+
   #menu-back {
     background-color: rgb(var(--GG200-rgb));
   }
@@ -1225,8 +1223,6 @@ html[dir=rtl] #customization-menu .bg-sel-tile .selected-check {
 
 #shortcuts-menu {
   line-height: 20px;
-  overflow-y: unset;
-  width: calc(100% - 24px);
 }
 
 #sh-options {
@@ -1719,16 +1715,15 @@ html[dir=rtl] #colors-menu .bg-sel-tile .selected-check {
 }
 
 #refresh-daily-wrapper {
-  height: 80px;
-  line-height: 80px;
-  margin-inline-end: 24px;
+  display: none;
   margin-inline-start: auto;
-  position: relative;
-  vertical-align: top;
+}
+
+.on-img-menu #refresh-daily-wrapper {
+  display: flex;
 }
 
 #refresh-toggle-wrapper {
-  display: inline-block;
   height: 16px;
   margin-inline-end: 12px;
   margin-top: 31px;
@@ -1736,13 +1731,6 @@ html[dir=rtl] #colors-menu .bg-sel-tile .selected-check {
   width: 34px;
 }
 
-#refresh-text-wrapper {
-  display: inline-block;
-  height: 80px;
-  line-height: 80px;
-  vertical-align: top;
-}
-
 #refresh-text {
   font-size: 16px;
   user-select: none;

chrome/browser/resources/local_ntp/local_ntp.html

@@ -171,15 +171,12 @@
 
   <dialog id="customization-menu" class="customize-dialog">
     <div id="menu-header">
-      <div id="menu-back-wrapper">
-        <div id="menu-back-circle" tabindex="0" role="button" aria-label="$i18n{backLabel}">
-          <div id="menu-back"></div>
-        </div>
-      </div>
-      <div id="menu-title-wrapper">
-        <div id="menu-title">$i18n{customizeMenu}</div>
+      <div id="menu-back-circle" tabindex="0" role="button"
+          aria-label="$i18n{backLabel}">
+        <div id="menu-back"></div>
       </div>
-      <div id="refresh-daily-wrapper" hidden>
+      <div id="menu-title">$i18n{customizeMenu}</div>
+      <div id="refresh-daily-wrapper">
         <div id="refresh-toggle-wrapper">
           <label class="switch">
             <input id="refresh-daily-toggle" type="checkbox"
@@ -190,9 +187,7 @@
             </span>
           </label>
         </div>
-        <div id="refresh-text-wrapper">
-          <div id="refresh-text">$i18n{refreshDaily}</div>
-        </div>
+        <div id="refresh-text">$i18n{refreshDaily}</div>
       </div>
     </div>
     <div id="menu-nav-panel" role="tablist" aria-label="$i18n{customizeMenu}">

chrome/test/data/local_ntp/local_ntp_browsertest.html

@@ -161,15 +161,12 @@
 
     <dialog id="customization-menu" class="customize-dialog">
       <div id="menu-header">
-        <div id="menu-back-wrapper">
-          <div id="menu-back-circle" tabindex="0" role="button" aria-label="$i18n{backLabel}">
-            <div id="menu-back"></div>
-          </div>
-        </div>
-        <div id="menu-title-wrapper">
-          <div id="menu-title">$i18n{customizeMenu}</div>
+        <div id="menu-back-circle" tabindex="0" role="button"
+            aria-label="$i18n{backLabel}">
+          <div id="menu-back"></div>
         </div>
-        <div id="refresh-daily-wrapper" hidden>
+        <div id="menu-title">$i18n{customizeMenu}</div>
+        <div id="refresh-daily-wrapper">
           <div id="refresh-toggle-wrapper">
             <label class="switch">
               <input id="refresh-daily-toggle" type="checkbox"
@@ -180,9 +177,7 @@
               </span>
             </label>
           </div>
-          <div id="refresh-text-wrapper">
-            <div id="refresh-text">$i18n{refreshDaily}</div>
-          </div>
+          <div id="refresh-text">$i18n{refreshDaily}</div>
         </div>
       </div>
       <div id="menu-nav-panel" role="tablist" aria-label="$i18n{customizeMenu}">