chore: emit new Viewport Switched event for sidepanel popup toggle (#37716)

## **Description**

This PR introduces a new MetaMetrics event `Viewport Switched` to track
when users toggle between the popup and sidepanel views in the
extension. The `App Window Expanded` event in the Global Menu is still
used for the Expand View button.

**What is the reason for the change?**
The existing `App Window Expanded` event didn't capture sufficient
information about viewport transitions so we have introduced a new
metric.

**What is the improvement/solution?**
- Added a new `ViewportSwitched` MetaMetrics event (experimental build
only)
- Updated the Global Menu's viewport toggle to emit this new event
- Enhanced event properties to include a `to` field that specifies the
target viewport (`popup` or `sidepanel`)

**Example event emitted:**
```json
{
  "location": "Global Menu",
  "to": "sidepanel",
  "category": "Navigation",
  "locale": "en",
  "chain_id": "0x1",
  "environment_type": "popup"
}
```

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/37716?quickstart=1)

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/CEUX-487

## **Manual testing steps**

1. Build the extension with experimental features enabled `yarn start
--build-type experimental`
2. Also run the Segment mock API `node development/mock-segment.js`
3. Open the extension popup
4. Click on the hamburger menu (three dots) in the top right
5. Toggle the "Sidepanel view" / "Popup view" option
6. Check the console to verify the `Viewport Switched` event is emitted
with the correct `to` property

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

The existing event was being emitted for the sidebar/popup view button:

Event: `App Window Expanded`
Properties: `{ location: "Global Menu" }`

### **After**

Now sidepanel/popup button has its own dedicated metric:

Event: `Viewport Switched`
Properties: `{ location: "Global Menu", to: "sidepanel" }` or `{
location: "Global Menu", to: "popup" }`

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [ ] I've included tests if applicable
- [ ] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Introduce experimental Viewport Switched metric and emit it from
Global Menu toggle with target viewport, keeping App Window Expanded for
expand view.
> 
> - **Metrics**:
>   - Add experimental `MetaMetricsEventName.ViewportSwitched`.
> - **Global Menu**
(`ui/components/multichain/global-menu/global-menu.tsx`):
> - Toggle between popup/sidepanel now tracks `ViewportSwitched` with
`properties.to` set to `popup` or `sidepanel`.
> - Keep `App Window Expanded` for the expand-to-tab action when
sidepanel is unavailable or on Firefox.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
0d12473. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: ameliejyc

shared/constants/metametrics.ts

@@ -942,6 +942,9 @@ export enum MetaMetricsEventName {
   ExtensionPinned = 'Extension Pinned',
   // Extension Port Stream
   PortStreamChunked = 'Port Stream Chunked',
+  ///: BEGIN:ONLY_INCLUDE_IF(build-experimental)
+  ViewportSwitched = 'Viewport Switched',
+  ///: END:ONLY_INCLUDE_IF
 }
 
 export enum MetaMetricsEventAccountType {

ui/components/multichain/global-menu/global-menu.tsx

@@ -402,10 +402,13 @@ export const GlobalMenu = ({
           onClick={async () => {
             await toggleDefaultView();
             trackEvent({
-              event: MetaMetricsEventName.AppWindowExpanded,
+              event: MetaMetricsEventName.ViewportSwitched,
               category: MetaMetricsEventCategory.Navigation,
               properties: {
                 location: METRICS_LOCATION,
+                to: isSidePanelDefault
+                  ? ENVIRONMENT_TYPE_POPUP
+                  : ENVIRONMENT_TYPE_SIDEPANEL,
               },
             });
             closeMenu();