Two-step process for toggling CDP state (#494)

* Add a toast message component in design-system.
Add mechanism in place to reload all the tabs.
Add mechanism to show the reload button in the devtools.

* Add toast message in the popup.

* Persist toastmessage on reload of extension

* Add styling to toast message

* Add a button to match the chrome://flags toast-message.

* Add a button to the popup.

* Fix the order of firing of events.

* Reduce Padding.

* Reduce vertical padding.

* Fix the text and add toast message in popup.

* Add fullstop to the popup messaging.

* Shorten the devtools message.

* Remove persistence of the toastMessage

* use sessionStorage instead of localStorage from web api

* Fix refresh of the cookies.

* revert changes.

* Fix component showing analyse this tab on newtab open.

* Fix service worker popup connection.

* Fix the messaging.

* Fix value being set add new state for display.

* Fix 0 cookies landing page on multitab debugging issue.

* Fix padding and the design.

* Add breakpoints for the button.
Add breakpoints for text.

* Fix the fontsize

* Fix breakpoints

* Fix text for button.

* Fix message not showing up in popup.

* Add comment to listener.
Add default case to switch block.

* ref: use absolute to spread toast message

* Fix the toastmessage while scrolling.

---------

Co-authored-by: Mayank Rana <mayankranax1@gmail.com>

packages/design-system/src/components/button/index.tsx

@@ -25,7 +25,7 @@ interface ButtonProps {
   onClick?: () => void;
   loading?: boolean;
   type?: 'button' | 'submit' | 'reset';
-  variant?: 'primary' | 'secondary' | 'danger' | 'small';
+  variant?: 'primary' | 'secondary' | 'danger' | 'small' | 'large';
   extraClasses?: string;
 }
 const Button = ({
@@ -36,30 +36,85 @@ const Button = ({
   variant = 'primary',
   extraClasses = '',
 }: ButtonProps) => {
-  return (
-    <button
-      data-test-id="button"
-      type={type}
-      name={name}
-      onClick={onClick ? onClick : undefined}
-      className={classNames(
-        'rounded flex items-center text-center',
-        extraClasses,
-        {
-          'py-1 px-2 font-medium': variant !== 'small',
-          'py-0.5 px-1.5 text-xs': variant === 'small',
-          'text-white dark:bg-baby-blue-eyes bg-sapphire hover:bg-tufts-blue dark:hover:bg-pale-cornflower-blue dark:text-raisin-black':
-            ['primary', 'small'].includes(variant),
-          'bg-transparent dark:bg-transparent dark:text-bright-gray text-raisin-black active:opacity-60 hover:opacity-80':
-            variant === 'secondary',
-          'text-white dark:text-white dark:bg-red-500 bg-red-500 hover:bg-red-600':
-            variant === 'danger',
-        }
-      )}
-    >
-      {text}
-    </button>
-  );
+  switch (variant) {
+    case 'small':
+      return (
+        <button
+          data-test-id="button"
+          type={type}
+          name={name}
+          onClick={onClick ? onClick : undefined}
+          className={classNames(
+            'rounded flex items-center text-center py-0.5 px-1.5 text-xs text-white dark:bg-baby-blue-eyes bg-sapphire hover:bg-tufts-blue dark:hover:bg-pale-cornflower-blue dark:text-raisin-black',
+            extraClasses
+          )}
+        >
+          {text}
+        </button>
+      );
+    case 'large':
+      return (
+        <button
+          data-test-id="button"
+          type={type}
+          name={name}
+          onClick={onClick ? onClick : undefined}
+          className={classNames(
+            'font-medium rounded-xs flex items-center text-center md:py-3.5 md:px-9 xxs:max-sm:p-2 xs:max-md:py-4 sm:max-md:px-2 text-white dark:bg-google-blue bg-smurf-blue hover:bg-beteleguese dark:hover:bg-bright-navy-blue dark:text-raisin-black',
+            extraClasses
+          )}
+        >
+          {text}
+        </button>
+      );
+    case 'primary':
+      return (
+        <button
+          data-test-id="button"
+          type={type}
+          name={name}
+          onClick={onClick ? onClick : undefined}
+          className={classNames(
+            'rounded flex items-center text-center py-1 px-2 font-medium text-white dark:bg-baby-blue-eyes bg-sapphire hover:bg-tufts-blue dark:hover:bg-pale-cornflower-blue dark:text-raisin-black',
+            extraClasses
+          )}
+        >
+          {text}
+        </button>
+      );
+    case 'secondary':
+      return (
+        <button
+          data-test-id="button"
+          type={type}
+          name={name}
+          onClick={onClick ? onClick : undefined}
+          className={classNames(
+            'rounded flex items-center text-center py-1 px-2 font-medium bg-transparent dark:bg-transparent dark:text-bright-gray text-raisin-black active:opacity-60 hover:opacity-80',
+            extraClasses
+          )}
+        >
+          {text}
+        </button>
+      );
+    case 'danger':
+      return (
+        <button
+          data-test-id="button"
+          type={type}
+          name={name}
+          onClick={onClick ? onClick : undefined}
+          className={classNames(
+            'rounded flex items-center text-center py-1 px-2 font-medium text-white dark:text-white dark:bg-red-500 bg-red-500 hover:bg-red-600',
+            extraClasses
+          )}
+        >
+          {text}
+        </button>
+      );
+    default:
+      return <></>;
+  }
 };
 
 export default Button;

packages/design-system/src/components/index.ts

@@ -40,6 +40,7 @@ export * from './table';
 export { default as SearchInput } from './searchInput';
 export * from './sidebar';
 export { default as InspectButton } from './inspectButton';
+export { default as ToastMessage } from './toastMessage';
 export {
   default as CookiesLandingContainer,
   type CookiesLandingContainerProps,

packages/design-system/src/components/toastMessage/index.tsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+import React, { forwardRef } from 'react';
+
+/**
+ * Internal dependencies.
+ */
+import Button from '../button';
+
+interface ToastMessageProps {
+  text: string;
+  onClick: () => void;
+  additionalStyles?: string;
+  textAdditionalStyles?: string;
+  variant?: 'primary' | 'secondary' | 'danger' | 'small' | 'large';
+  buttonText?: string;
+}
+const ToastMessage = forwardRef<HTMLDivElement, ToastMessageProps>(
+  function ToastMessage(
+    {
+      text,
+      onClick,
+      additionalStyles = '',
+      textAdditionalStyles = '',
+      variant = 'large',
+      buttonText = 'Reload',
+    }: ToastMessageProps,
+    ref
+  ) {
+    return (
+      <div
+        ref={ref}
+        className={`${additionalStyles} absolute inset-x-0 bottom-0 w-full z-2 bg-white dark:bg-charleston-green shadow-xxs`}
+      >
+        <div className="flex items-center justify-between p-4">
+          <div className={`w-5/6 dark:text-white ${textAdditionalStyles}`}>
+            {text}
+          </div>
+          <div className="w-1/6">
+            <Button text={buttonText} onClick={onClick} variant={variant} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+export default ToastMessage;