Incognito NTP: shuffle layout of cookie controls

Screenshots:
* before: screen/GHotFhVJu1t
* after: screen/aV7D35oyJnx, screen/fszSEX5BcAV

R=huanzhong@chromium.org

Bug: 967668
Change-Id: Id766f0c655cb2dbf31c148fe0fd212370e5e787e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1841743Reviewed-by: Huanzhong Huang <huanzhong@chromium.org>
Commit-Queue: Dan Beam <dbeam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#703422}

chrome/browser/resources/ntp4/incognito_tab.css

@@ -96,11 +96,28 @@ em {
   }
 }
 
-/** Third-Party Cookie Blocking Box ----------------------------------------- */
+/** Cookie Controls --------------------------------------------------------- */
 
 #cookie-controls {
+  align-items: center;
   background-color: rgb(60, 64, 67); /* --google-grey-800 */
+  border-radius: 4px;
   box-sizing: border-box;
+  display: flex;
+  padding: 12px 20px;
+}
+
+#cookie-controls-description {
+  flex: 1;
+  padding-inline-end: 20px;
+}
+
+#cookie-controls-description em {
+  display: block;
+}
+
+#cookie-controls-toggle {
+  flex: none;
 }
 
 /** Layout ------------------------------------------------------------------ */
@@ -162,15 +179,6 @@ h1 {
   padding-inline-start: 16px;
 }
 
-#cookie-controls {
-  margin-bottom: 1.5rem;
-  padding: 1.5rem;
-}
-
-#cookie-controls-description {
-  margin-top: 0.5rem;
-}
-
 /* Wide screens. */
 @media (min-width: 720px) {
   .icon,
@@ -183,7 +191,8 @@ h1 {
   .icon,
   h1,
   #subtitle,
-  .bulletpoints {
+  .bulletpoints,
+  #cookie-controls {
     margin-bottom: 1.5rem;
   }
 
@@ -225,7 +234,8 @@ h1 {
 
     .learn-more-button,
     .bulletpoints,
-    .icon {
+    .icon,
+    #cookie-controls {
       margin-bottom: 16px;
     }
   }
@@ -246,7 +256,8 @@ h1 {
   }
 
   .bulletpoints,
-  .learn-more-button {
+  .learn-more-button,
+  #cookie-controls {
     margin-bottom: 1.5rem;
   }
 
@@ -264,7 +275,8 @@ h1 {
     }
 
     .bulletpoints,
-    .learn-more-button {
+    .learn-more-button,
+    #cookie-controls {
       margin-bottom: 1rem;
     }
   }

chrome/browser/resources/ntp4/incognito_tab.html

@@ -31,15 +31,11 @@ document.write('<link id="incognitothemecss" rel="stylesheet" ' +
     <div class="bulletpoints">$i18nRaw{incognitoTabWarning}</div>
   </div>
   <div id="cookie-controls" $i18n{hiddenIfCookieControlsDisabled}>
-    <div>
-      <cr-toggle id="cookie-controls-toggle"></cr-toggle>
-    </div>
-    <div>
-      <em>$i18n{cookieControlsTitle}</em>
-    </div>
     <div id="cookie-controls-description">
+      <em>$i18n{cookieControlsTitle}</em>
       $i18n{cookieControlsDescription}
     </div>
+    <cr-toggle id="cookie-controls-toggle" dark></cr-toggle>
   </div>
   <a class="learn-more-button" href="$i18n{learnMoreLink}">$i18n{learnMore}</a>
 </div>

ui/webui/resources/cr_elements/cr_toggle/cr_toggle.html

@@ -33,6 +33,16 @@
           --cr-toggle-unchecked-ink-color: var(--google-grey-refresh-300);
         }
       }
+      /* Keep the prefers-color-scheme and [dark] rules the same. */
+      :host([dark]) {
+        --cr-toggle-checked-bar-color: var(--google-blue-refresh-300);
+        --cr-toggle-checked-button-color: var(--google-blue-refresh-300);
+        --cr-toggle-checked-ink-color: var(--google-blue-refresh-300);
+        --cr-toggle-ripple-opacity: .4;
+        --cr-toggle-unchecked-bar-color: var(--google-grey-refresh-500);
+        --cr-toggle-unchecked-button-color: var(--google-grey-refresh-300);
+        --cr-toggle-unchecked-ink-color: var(--google-grey-refresh-300);
+      }
 
       :host([disabled]) {
         cursor: initial;

ui/webui/resources/cr_elements/cr_toggle/cr_toggle.js

@@ -22,6 +22,12 @@ Polymer({
       notify: true,
     },
 
+    dark: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true,
+    },
+
     disabled: {
       type: Boolean,
       value: false,