Cookie controls tool fixes

Issues fixed by this CL:

1. Reload infobar adjustments. This includes changing the background
color, changing the info icon color to match the button, and adding
animation to the infobar to draw user attention to it when it
appears.

2. Change the card to fill the width (with margins) rather than
having a max width.

Before:
http://screencast/cast/NTQ1MDAxODQxNTcwNjExMnwxNTVkMDI2OS0xMw

After:
http://screencast/cast/Njc0NDg2NTgyNzE5MjgzMnwxYzA5ZGYyZC1iNg

Bug: 375352611,b/382259993,b/382259852
Change-Id: I25b9fe94a3068263dcf41743dc381b5a63344a08
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6164389
Reviewed-by: Shuran Huang <[email protected]>
Reviewed-by: Nancy Li <[email protected]>
Commit-Queue: Joshua Thomas <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>

Author: masnoble

front_end/design_tokens.css

@@ -107,6 +107,8 @@
   --sys-typescale-body5-line-height: 16px;
   --sys-typescale-monospace-line-height: 1.2;
   --combobox-dropdown-arrow: var(--image-file-arrow-drop-down-light);
+  --sys-motion-duration-long2: 500ms;
+  --sys-motion-curve-spatial: cubic-bezier(0.27, 1.06, 0.18, 1.00);
 }
 
 .theme-with-dark-background,

front_end/panels/security/CookieControlsView.ts

@@ -274,7 +274,7 @@ export class CookieControlsView extends UI.Widget.VBox {
             <div class="title">${i18nString(UIStrings.viewTitle)}</div>
             <div class="body">${i18nString(UIStrings.viewExplanation)}</div>
           </div>
-          <devtools-card>
+          <devtools-card class="card-container">
             <div slot="content" class=${Boolean(enterpriseEnabledSetting.get()) ? 'card enterprise-disabled' : 'card'}>
               ${cardHeader}
               <div>

front_end/panels/security/cookieControlsView.css

@@ -23,6 +23,10 @@
   font: var(--sys-typescale-headline4);
 }
 
+.card-container {
+  max-width: 100%;
+}
+
 .card {
   display: flex;
   flex-direction: column;

front_end/ui/components/cards/card.css

@@ -12,7 +12,6 @@
 .card {
   break-inside: avoid;
   min-width: var(--sys-size-31);
-  max-width: var(--sys-size-35);
   margin: var(--sys-size-3) var(--sys-size-6) var(--sys-size-5) var(--sys-size-5);
   flex: 1;
 }

front_end/ui/legacy/infobar.css

@@ -3,9 +3,21 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
+:host {
+  transition: all var(--sys-motion-duration-long2);
+  transition-timing-function: var(--sys-motion-curve-spatial);
+}
+
+@starting-style {
+  :host {
+    height: 0;
+    opacity: 0%;
+  }
+}
 
 .infobar {
   color: var(--sys-color-on-surface);
+  background-color: var(--sys-color-surface1);
   display: flex;
   flex: auto;
   flex-direction: column;
@@ -89,7 +101,7 @@
 
 .info-icon {
   mask-image: var(--image-file-info);
-  background-color: var(--icon-info);
+  background-color: var(--sys-color-primary);
 }
 
 .warning-icon {
@@ -104,7 +116,7 @@
 
 .issue-icon {
   mask-image: var(--image-file-issue-text-filled);
-  background-color: var(--icon-info);
+  background-color: var(--sys-color-primary);
 }
 
 .icon {

test/e2e/network/network-request-view_test.ts

@@ -38,6 +38,8 @@ const SIMPLE_PAGE_URL = `requests.html?num=${SIMPLE_PAGE_REQUEST_NUMBER}`;
 
 const configureAndCheckHeaderOverrides = async () => {
   const infoBar = await waitForAria('Select a folder to store override files in.');
+  // Allow time for infobar to animate in before clicking the button
+  await new Promise<void>(resolve => setTimeout(resolve, 550));
   await click('.infobar-main-row .infobar-button', {
     root: infoBar,
   });

test/e2e/sources/overrides_test.ts

@@ -152,6 +152,8 @@ describe('Overrides panel', function() {
 
       // File permission pop up
       const infoBar = await waitForAria('Select a folder to store override files in.');
+      // Allow time for infobar to animate in before clicking the button
+      await new Promise<void>(resolve => setTimeout(resolve, 550));
       await click('.infobar-main-row .infobar-button', {root: infoBar});
 
       // Open & close the file in the Sources panel
@@ -216,6 +218,8 @@ describe('Overrides panel', function() {
 
       // File permission pop up
       const infoBar = await waitForAria('Select a folder to store override files in.');
+      // Allow time for infobar to animate in before clicking the button
+      await new Promise<void>(resolve => setTimeout(resolve, 550));
       await click('.infobar-main-row .infobar-button', {root: infoBar});
       await waitFor('[aria-label="coffees.json, file"]');
 
@@ -299,6 +303,7 @@ describe('Overrides panel', function() {
 
     // File permission pop up
     const infoBar = await waitForAria('Select a folder to store override files in.');
+    await new Promise<void>(resolve => setTimeout(resolve, 550));
     await click('.infobar-main-row .infobar-button', {root: infoBar});
 
     // Open the file in the Sources panel
@@ -324,6 +329,8 @@ describe('Overrides panel', function() {
 
     // File permission pop up
     const infoBar = await waitForAria('Select a folder to store override files in.');
+    // Allow time for infobar to animate in before clicking the button
+    await new Promise<void>(resolve => setTimeout(resolve, 550));
     await click('.infobar-main-row .infobar-button', {root: infoBar});
 
     // Open the main folder in the Sources panel
@@ -348,6 +355,8 @@ describe('Overrides panel', function() {
 
     // File permission pop up
     const infoBar = await waitForAria('Select a folder to store override files in.');
+    // Allow time for infobar to animate in before clicking the button
+    await new Promise<void>(resolve => setTimeout(resolve, 550));
     await click('.infobar-main-row .infobar-button', {root: infoBar});
 
     // Open the sub folder in the Sources panel