experiment badge and tooltip added

packages/visual-editor/src/main-base.ts

@@ -838,6 +838,8 @@ abstract class MainBase extends SignalWatcher(LitElement) {
     this.tooltipRef.value.y = tooltipEvent.y;
     this.tooltipRef.value.message = tooltipEvent.message;
     this.tooltipRef.value.status = tooltipEvent.extendedOptions.status;
+    this.tooltipRef.value.isMultiLine =
+      tooltipEvent.extendedOptions?.isMultiLine || false;
     this.tooltipRef.value.visible = true;
   }
 

packages/visual-editor/src/ui/elements/shell/header.ts

@@ -15,8 +15,10 @@ import { actionTrackerContext } from "../../contexts/action-tracker-context.js";
 import { uiStateContext } from "../../contexts/ui-state.js";
 import {
   CloseEvent,
+  HideTooltipEvent,
   OverflowMenuActionEvent,
   ShareRequestedEvent,
+  ShowTooltipEvent,
   SignOutEvent,
   StateEvent,
 } from "../../events/events.js";
@@ -326,13 +328,16 @@ export class VEHeader extends SignalWatcher(LitElement) {
 
       #experiment {
         display: none;
-        font-size: 11px;
-        line-height: 1;
-        padding: var(--bb-grid-size) var(--bb-grid-size-3);
+        font-size: 12px;
+        line-height: normal;
+        padding: 2px 6px;
         border-radius: var(--bb-grid-size-16);
         border: 1px solid light-dark(var(--n-0), var(--n-70));
         text-transform: uppercase;
-        color: light-dark(var(--n-0), var(--n-70));
+        background-color: #ffecee;
+        color: #60150f;
+        font-weight: 500;
+        font-family: Google Sans Code;
       }
 
       #status {
@@ -644,7 +649,24 @@ export class VEHeader extends SignalWatcher(LitElement) {
   #renderExperimentalLabel() {
     return html`${Strings.from("PROVIDER_NAME") !== "PROVIDER_NAME" &&
     Strings.from("PROVIDER_NAME") !== ""
-      ? html`<span class="sans" id="experiment">Experiment</span>`
+      ? html`<span
+          class="sans"
+          id="experiment"
+          @pointerover=${(evt: PointerEvent) => {
+            this.dispatchEvent(
+              new ShowTooltipEvent(
+                Strings.from("TEXT_EXPERIMENT_MODE"),
+                evt.clientX,
+                evt.clientY + 90,
+                { status: false, isMultiLine: true }
+              )
+            );
+          }}
+          @pointerout=${() => {
+            this.dispatchEvent(new HideTooltipEvent());
+          }}
+          >Experiment mode</span
+        >`
       : nothing}`;
   }
 

packages/visual-editor/src/ui/elements/tooltip/tooltip.ts

@@ -89,6 +89,9 @@ export class Tooltip extends LitElement {
   @property({ reflect: true })
   accessor status: { title: string } | false = false;
 
+  @property({ reflect: true })
+  accessor isMultiLine: boolean = false;
+
   #animationStartBound = this.#animationStart.bind(this);
   #animationStart() {
     // Force the setters to run *now* that the element has a non-zero size
@@ -127,6 +130,13 @@ export class Tooltip extends LitElement {
         animation: none;
         pointer-events: none;
         white-space: nowrap;
+
+        .multiline {
+          p {
+            max-width: 170px;
+            white-space: pre-line !important;
+          }
+        }
       }
 
       :host(:not([status="false"])) {
@@ -182,6 +192,10 @@ export class Tooltip extends LitElement {
       classes["md-body-small"] = true;
     }
 
+    if (this.isMultiLine !== false) {
+      classes["multiline"] = true;
+    }
+
     return html`<div class=${classMap(classes)} aria-live="polite">
       ${this.status !== false
         ? html`<h1 class="w-500 sans md-body-medium">${this.status.title}</h1>`

packages/visual-editor/src/ui/events/events.ts

@@ -195,8 +195,12 @@ export class ShowTooltipEvent extends Event {
     public readonly message: string,
     public readonly x: number,
     public readonly y: number,
-    public readonly extendedOptions: { status: { title: string } | false } = {
+    public readonly extendedOptions: {
+      status: { title: string } | false;
+      isMultiLine?: boolean;
+    } = {
       status: false,
+      isMultiLine: false,
     }
   ) {
     super(ShowTooltipEvent.eventName, { ...eventInit });

packages/visual-editor/src/ui/strings/en_US/global.ts

@@ -297,4 +297,7 @@ export default {
   TEXT_WARM_WELCOME_EMAIL_UPDATES: {
     str: "Let us know if you’d like to be involved with future research studies or hear about the latest and greatest from Opal!",
   },
+  TEXT_EXPERIMENT_MODE: {
+    str: "Experiment is a beta feature.\nYou have 3 experiments on.\nTo deactivate, go to settings.",
+  },
 } as LanguagePackEntry;