@dynamicu/chromedebug-mcp 2.6.7 → 2.7.0

package/chrome-extension/popup.js

@@ -2,29 +2,9 @@
 const EXTENSION_VERSION = '2.0.4-BUILD-20250119';
 console.log(`[popup.js] Loaded version: ${EXTENSION_VERSION}`);
 
-// Import Firebase license client with graceful fallback
-let FirebaseLicenseClient = null;
-let LEMONSQUEEZY_CHECKOUT_URL = 'https://chromedebug.com/buy/996773cb-682b-430f-b9e3-9ce2130bd967';
-let licenseClient = null;
-let currentUserId = null;
-
-// Load Firebase asynchronously to avoid blocking module execution
-(async () => {
-  try {
-    const firebaseClientModule = await import('./firebase-client.js');
-    FirebaseLicenseClient = firebaseClientModule.FirebaseLicenseClient;
-
-    const firebaseConfigModule = await import('./firebase-config.public.js');
-    LEMONSQUEEZY_CHECKOUT_URL = firebaseConfigModule.LEMONSQUEEZY_CHECKOUT_URL;
-
-    // Initialize license client if Firebase loaded successfully
-    licenseClient = new FirebaseLicenseClient();
-    console.log('[popup.js] Firebase license client initialized');
-  } catch (error) {
-    console.warn('[popup.js] Firebase not available - license features disabled:', error);
-    // Extension will work without Firebase, just no license validation
-  }
-})();
+// Chrome Web Store URLs for upgrade flow
+const CHROME_STORE_PRO_URL = 'https://chrome.google.com/webstore/detail/chromedebug-mcp-pro/[PRO_EXTENSION_ID]';
+const IS_PRO_VERSION = chrome.runtime.getManifest().name.includes('PRO');
 
 // Global variables for recording functionality
 let isRecording = false;
@@ -445,14 +425,7 @@ async function checkServerStatus() {
 
   if (connected) {
     statusEl.className = 'server-status connected';
-    statusTextEl.innerHTML = `
-      Server connected (port ${connectedPort})
-      <div style="margin-top: 4px;">
-        <a href="https://www.npmjs.com/package/@dynamicu/chromedebug-mcp" target="_blank" style="font-size: 10px; color: #666; text-decoration: none;">
-          📚 Documentation
-        </a>
-      </div>
-    `;
+    statusTextEl.textContent = `Server connected (port ${connectedPort})`;
   } else {
     statusEl.className = 'server-status disconnected';
 
@@ -472,9 +445,6 @@ async function checkServerStatus() {
         <button id="copyInstallCmd" style="padding: 4px 8px; font-size: 11px; background: #2196F3; color: white; border: none; border-radius: 3px; cursor: pointer;">
           📋 Copy Commands
         </button>
-        <a href="https://www.npmjs.com/package/@dynamicu/chromedebug-mcp" target="_blank" style="font-size: 11px; color: #2196F3; text-decoration: none;">
-          📚 Full Documentation
-        </a>
       </div>
     `;
 
@@ -929,7 +899,7 @@ function updateRecordingsDisplay(recordings) {
       if (type === 'snapshot') {
         prompt = `Please use the get_frame_screenshot function in Chrome Debug to view the snapshot "${recordingId}"${portText}. This is a single-frame screenshot with console logs captured for debugging.`;
       } else {
-        prompt = `Please use the chrome_pilot_show_frames function in Chrome Debug to load the recording "${recordingId}"${portText}.`;
+        prompt = `Please use the chrome_debug_show_frames function in Chrome Debug to load the recording "${recordingId}"${portText}.`;
       }
 
       navigator.clipboard.writeText(prompt).then(() => {
@@ -1002,352 +972,71 @@ function updateRecordingsDisplay(recordings) {
 
 
 
-// Initialize when DOM is ready
-// License UI initialization function
-async function initializeLicenseUI() {
-  console.log('[License] Initializing license UI');
-
-  // Get or create userId
-  const stored = await chrome.storage.local.get('chromedebug_user_id');
-  currentUserId = stored.chromedebug_user_id || crypto.randomUUID();
-  if (!stored.chromedebug_user_id) {
-    await chrome.storage.local.set({chromedebug_user_id: currentUserId});
-    console.log('[License] Created new user ID:', currentUserId);
-  }
-
-  // Check for license activation file and pre-fill license key
-  try {
-    const activationFileUrl = chrome.runtime.getURL('license-activation.json');
-    const response = await fetch(activationFileUrl);
-    if (response.ok) {
-      const activationData = await response.json();
-      if (activationData.license_key) {
-        const licenseKeyInput = document.getElementById('license-key-input');
-        if (licenseKeyInput) {
-          licenseKeyInput.value = activationData.license_key;
-          console.log('[License UI] Pre-filled license key from activation file');
-        }
-      }
+// Initialize tier status display for FREE version
+function initializeTierStatus() {
+  if (IS_PRO_VERSION) {
+    // Hide license section for PRO version
+    const licenseSection = document.getElementById('license-section');
+    if (licenseSection) {
+      licenseSection.style.display = 'none';
+      console.log('[Tier] PRO version detected - hiding license section');
     }
-  } catch (error) {
-    // Activation file doesn't exist or is inaccessible - this is normal for FREE version
-    console.log('[License UI] No activation file found - normal for FREE version');
-  }
-
-  // Check license status
-  const licenseStatus = await licenseClient.getCachedLicenseStatus();
-  console.log('[License] License status:', licenseStatus);
-
-  // Update workflow recording PRO badge visibility
-  const workflowProBadge = document.getElementById('workflowProBadge');
-
-  if (licenseStatus.valid && licenseStatus.tier === 'pro') {
-    // Show pro status
-    document.getElementById('pro-tier-status').style.display = 'block';
-    document.getElementById('free-tier-status').style.display = 'none';
-    // Hide license activation input/button when Pro license is active
-    document.getElementById('license-activation').style.display = 'none';
-    // Hide PRO badge for Pro users
-    if (workflowProBadge) workflowProBadge.style.display = 'none';
-    console.log('[License] Displaying Pro tier status');
   } else {
-    // Show free tier + usage
-    const usage = await licenseClient.checkUsageLimit(currentUserId);
-    console.log('[License] Usage check result:', usage);
-
-    // Handle both API response format (currentUsage, dailyLimit) and offline format (count, limit)
-    document.getElementById('usage-count').textContent = usage.currentUsage ?? usage.count ?? 0;
-    document.getElementById('usage-limit').textContent = usage.dailyLimit ?? usage.limit ?? 50;
-    document.getElementById('free-tier-status').style.display = 'block';
-    document.getElementById('pro-tier-status').style.display = 'none';
-    // Show license activation input/button for free tier
-    document.getElementById('license-activation').style.display = 'block';
-    // Show PRO badge for free users
-    if (workflowProBadge) workflowProBadge.style.display = 'block';
-    console.log('[License] Displaying Free tier status');
-  }
-}
-
-// Inline Activation Manager Functions
-/**
- * Show the inline activation manager with slide-down animation
- */
-async function showInlineActivationManager(licenseKey) {
-  const inlineManager = document.getElementById('inline-activation-manager');
-  const activationsList = document.getElementById('activations-list-inline');
-
-  // Show the container
-  inlineManager.style.display = 'block';
-
-  // Trigger animation
-  setTimeout(() => {
-    inlineManager.style.maxHeight = '400px';
-  }, 10);
-
-  // Load activations
-  try {
-    activationsList.innerHTML = '<div style="padding: 15px; text-align: center; color: #666;">Loading activations...</div>';
-
-    // Get current instance ID
-    // Note: ls_instance_id is the LemonSqueezy instance ID set during activation
-    const stored = await chrome.storage.local.get(['ls_instance_id']);
-    const currentInstanceId = stored.ls_instance_id;
+    // Show FREE tier status (no license validation)
+    const freeTierStatus = document.getElementById('free-tier-status');
+    const proTierStatus = document.getElementById('pro-tier-status');
+    const licenseActivation = document.getElementById('license-activation');
 
-    // Fetch activations from Firebase
-    const data = await licenseClient.listActivations(licenseKey);
-    const activations = data.activations || [];
+    if (freeTierStatus) freeTierStatus.style.display = 'block';
+    if (proTierStatus) proTierStatus.style.display = 'none';
+    if (licenseActivation) licenseActivation.style.display = 'none';
 
-    // Render activations
-    renderInlineActivations(activations, currentInstanceId, licenseKey);
+    // Fetch and display current usage count
+    updateUsageDisplay();
 
-  } catch (error) {
-    console.error('[License] Error loading activations:', error);
-    activationsList.innerHTML = `<div style="padding: 15px; text-align: center; color: #f44336;">Failed to load activations: ${error.message}</div>`;
+    console.log('[Tier] FREE version - showing usage counter');
   }
 }
 
 /**
- * Hide the inline activation manager with slide-up animation
+ * Fetch usage from background and update the display
  */
-function hideInlineActivationManager() {
-  const inlineManager = document.getElementById('inline-activation-manager');
-  inlineManager.style.maxHeight = '0';
-
-  setTimeout(() => {
-    inlineManager.style.display = 'none';
-  }, 300);
-}
-
-/**
- * Render activations in the inline manager
- */
-function renderInlineActivations(activations, currentInstanceId, licenseKey) {
-  const container = document.getElementById('activations-list-inline');
-  container.innerHTML = '';
-
-  if (activations.length === 0) {
-    container.innerHTML = '<div style="padding: 15px; text-align: center; color: #666;">No activations found.</div>';
-    return;
-  }
-
-  activations.forEach((activation, index) => {
-    const item = document.createElement('div');
-    item.style.cssText = 'padding: 12px; border-bottom: 1px solid #e0e0e0; transition: background 0.2s;';
-    item.onmouseenter = () => item.style.background = '#f9f9f9';
-    item.onmouseleave = () => item.style.background = isCurrentDevice ? '#e8f5e9' : 'white';
-
-    // Check if this is the current device
-    // Compare against identifier (unique per activation), not name (same for all activations from this device)
-    const isCurrentDevice = currentInstanceId && activation.identifier === currentInstanceId;
-
-    if (isCurrentDevice) {
-      item.style.background = '#e8f5e9';
-      item.style.borderLeft = '3px solid #4caf50';
-    }
-
-    // Format date
-    const date = new Date(activation.createdAt);
-    const formattedDate = date.toLocaleString('en-US', {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit'
-    });
-
-    // Build device info
-    let deviceDisplay = 'Unknown Device';
-    if (activation.deviceInfo) {
-      deviceDisplay = activation.deviceInfo.deviceName ||
-                     `${activation.deviceInfo.platform || 'Unknown'} • ${activation.deviceInfo.browser || 'Unknown'}`;
-    } else if (activation.name && activation.name !== currentInstanceId) {
-      deviceDisplay = activation.name;
-    }
-
-    item.innerHTML = `
-      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
-        <span style="font-weight: 500; font-size: 13px; color: #333;">Activation ${index + 1}</span>
-        ${isCurrentDevice ? '<span style="background: #4caf50; color: white; padding: 2px 6px; border-radius: 10px; font-size: 10px; font-weight: bold;">CURRENT</span>' : ''}
-      </div>
-      <div style="font-size: 12px; color: #666; margin-bottom: 4px;">
-        <strong style="color: #333;">${deviceDisplay}</strong>
-      </div>
-      <div style="font-size: 11px; color: #999; margin-bottom: 8px;">
-        ${formattedDate}
-      </div>
-      <button
-        class="deactivate-btn-inline"
-        data-instance-id="${activation.identifier}"
-        data-activation-number="${index + 1}"
-        data-license-key="${licenseKey}"
-        style="padding: 5px 10px; background: ${isCurrentDevice ? '#ccc' : '#f44336'}; color: white; border: none; border-radius: 3px; cursor: ${isCurrentDevice ? 'not-allowed' : 'pointer'}; font-size: 11px; width: 100%;"
-        ${isCurrentDevice ? 'disabled' : ''}
-      >
-        ${isCurrentDevice ? '✓ Current Device' : 'Deactivate'}
-      </button>
-    `;
-
-    // Add click handler for deactivate button
-    if (!isCurrentDevice) {
-      const deactivateBtn = item.querySelector('.deactivate-btn-inline');
-      deactivateBtn.addEventListener('click', () => {
-        handleInlineDeactivate(activation.identifier, index + 1, licenseKey);
-      });
-    }
-
-    container.appendChild(item);
-  });
-}
-
-/**
- * Handle deactivation of an instance (inline)
- */
-async function handleInlineDeactivate(instanceId, activationNumber, licenseKey) {
-  const confirmed = confirm(
-    `Are you sure you want to deactivate Activation ${activationNumber}?\n\n` +
-    `This will free up an activation slot and automatically activate on this device.`
-  );
-
-  if (!confirmed) {
-    return;
-  }
-
-  const messageDiv = document.getElementById('license-message');
-
+async function updateUsageDisplay() {
   try {
-    // Disable all deactivate buttons
-    const buttons = document.querySelectorAll('.deactivate-btn-inline');
-    buttons.forEach(btn => btn.disabled = true);
-
-    messageDiv.textContent = 'Deactivating...';
-    messageDiv.style.color = '#2196F3';
+    const response = await chrome.runtime.sendMessage({ action: 'getUsage' });
 
-    // Deactivate the instance
-    const result = await licenseClient.deactivateInstance(licenseKey, instanceId);
-    console.log('[License] Deactivation result:', result);
-
-    if (result.deactivated) {
-      messageDiv.textContent = 'Deactivated! Activating on this device...';
-      messageDiv.style.color = '#4caf50';
-
-      // Hide inline activation manager
-      hideInlineActivationManager();
-
-      // Wait a moment, then retry activation
-      setTimeout(async () => {
-        // Set the license key in the input
-        document.getElementById('license-key-input').value = licenseKey;
+    if (response && response.success) {
+      const usageCountEl = document.getElementById('usage-count');
+      const usageLimitEl = document.getElementById('usage-limit');
 
-        // Retry activation automatically
-        await handleLicenseActivation();
-      }, 1000);
+      if (usageCountEl) {
+        usageCountEl.textContent = response.count || 0;
+      }
+      if (usageLimitEl) {
+        usageLimitEl.textContent = response.limit || 5;
+      }
 
-    } else {
-      throw new Error(result.error || 'Deactivation failed');
+      console.log(`[Usage] Display updated: ${response.count}/${response.limit}`);
     }
-
   } catch (error) {
-    console.error('[License] Deactivation error:', error);
-    messageDiv.textContent = `Deactivation failed: ${error.message}`;
-    messageDiv.style.color = '#f44336';
-
-    // Re-enable buttons
-    const buttons = document.querySelectorAll('.deactivate-btn-inline:not([disabled])');
-    buttons.forEach(btn => btn.disabled = false);
-  }
-}
-
-// License activation handler
-async function handleLicenseActivation() {
-  const licenseKey = document.getElementById('license-key-input').value.trim();
-  const messageDiv = document.getElementById('license-message');
-
-  if (!licenseKey) {
-    messageDiv.textContent = 'Please enter a license key';
-    messageDiv.style.color = '#f44336';
-    return;
-  }
-
-  messageDiv.textContent = 'Validating...';
-  messageDiv.style.color = '#2196F3';
-  console.log('[License] Validating license key...');
-
-  // Clear any existing instance ID to force fresh activation
-  // This ensures we don't try to validate with stale/deleted instance IDs
-  await chrome.storage.local.remove(['ls_instance_id']);
-  console.log('[License] Cleared existing instance ID for fresh activation');
-
-  const result = await licenseClient.validateLicense(licenseKey);
-  console.log('[License] Validation result:', result);
-  console.log('[License] Error value:', result.error);
-  console.log('[License] Error type:', typeof result.error);
-
-  if (result.valid) {
-    messageDiv.textContent = 'License activated successfully!';
-    messageDiv.style.color = '#4caf50';
-    document.getElementById('license-key-input').value = '';
-    await initializeLicenseUI(); // Refresh UI
-  } else {
-    // Check if activation limit reached
-    console.log('[License] Checking if activation limit reached...');
-    console.log('[License] result.error === "ACTIVATION_LIMIT_REACHED":', result.error === 'ACTIVATION_LIMIT_REACHED');
-    console.log('[License] result.error includes "activation limit":', result.error && result.error.toLowerCase().includes('activation limit'));
-
-    if (result.error === 'ACTIVATION_LIMIT_REACHED' ||
-        (result.error && result.error.toLowerCase().includes('activation limit'))) {
-      console.log('[License] Activation limit reached, showing inline activation manager');
-      messageDiv.textContent = 'Please deactivate an existing activation to continue';
-      messageDiv.style.color = '#ff9800';
-
-      // Show inline activation manager
-      await showInlineActivationManager(licenseKey.trim());
-    } else {
-      messageDiv.textContent = result.error || 'Invalid license key';
-      messageDiv.style.color = '#f44336';
-    }
+    console.error('[Usage] Failed to fetch usage:', error);
   }
 }
 
-// Upgrade button handler
+// Upgrade button handler - redirect to Chrome Web Store PRO version
 function handleUpgradeClick() {
-  console.log('[License] Opening upgrade page:', LEMONSQUEEZY_CHECKOUT_URL);
-  chrome.tabs.create({url: LEMONSQUEEZY_CHECKOUT_URL});
+  console.log('[Upgrade] Opening Chrome Web Store PRO version');
+  chrome.tabs.create({url: CHROME_STORE_PRO_URL});
 }
 
-// Listen for messages from activation manager
-chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
-  if (message.type === 'RETRY_ACTIVATION' && message.licenseKey) {
-    console.log('[License] Retrying activation after deactivation');
-
-    // Set the license key in the input
-    const licenseKeyInput = document.getElementById('license-key-input');
-    if (licenseKeyInput) {
-      licenseKeyInput.value = message.licenseKey;
-    }
-
-    // Retry activation
-    handleLicenseActivation().then(() => {
-      console.log('[License] Retry activation complete');
-    });
-  }
-});
-
 document.addEventListener('DOMContentLoaded', () => {
   console.log('DOM loaded, initializing popup');
 
-  // Initialize license UI first
-  initializeLicenseUI().catch(error => {
-    console.error('[License] Failed to initialize license UI:', error);
-  });
+  // Initialize tier status display
+  initializeTierStatus();
 
-  // License event handlers
-  const activateLicenseBtn = document.getElementById('activate-license-btn');
+  // Upgrade button handler
   const upgradeBtn = document.getElementById('upgrade-btn');
-
-  if (activateLicenseBtn) {
-    activateLicenseBtn.addEventListener('click', handleLicenseActivation);
-  }
-
   if (upgradeBtn) {
     upgradeBtn.addEventListener('click', handleUpgradeClick);
   }
@@ -1711,6 +1400,17 @@ document.addEventListener('DOMContentLoaded', () => {
             console.log('Starting recording with server');
           }
 
+          // Check FREE tier usage limit before starting
+          const usageCheck = await chrome.runtime.sendMessage({ action: 'checkUsageLimit' });
+          if (usageCheck && !usageCheck.allowed) {
+            console.log('[Usage] Daily limit reached:', usageCheck);
+            if (recordingStatus) {
+              recordingStatus.innerHTML = '<strong style="color: #f44336;">Daily limit reached</strong><br>' +
+                                         `<small>${usageCheck.count}/${usageCheck.limit} recordings used today.<br>Upgrade to Pro for unlimited.</small>`;
+            }
+            return;
+          }
+
           // Get the current active tab
           const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
           console.log('Current tab:', tab);
@@ -1889,26 +1589,16 @@ document.addEventListener('DOMContentLoaded', () => {
             return;
           }
 
-          // Check license before allowing workflow recording (same pattern as strategic plan)
-          console.log('[License] Checking license for workflow recording...');
-          const licenseCheck = await chrome.runtime.sendMessage({
-            action: 'checkLicenseForWorkflow'
-          });
-          console.log('[License] License check result:', licenseCheck);
-
-          // If not Pro or limit reached, show upgrade modal
-          if (!licenseCheck || !licenseCheck.allowed || (licenseCheck.tier && licenseCheck.tier !== 'pro')) {
-            const message = licenseCheck?.message || 'Workflow Recording is a Pro feature. Upgrade to Pro for unlimited workflow recordings with function tracing.';
-
-            // Show modal
-            if (confirm(`${message}\n\nWould you like to upgrade now?`)) {
-              // Open upgrade page
-              chrome.tabs.create({
-                url: LEMONSQUEEZY_CHECKOUT_URL
-              });
+          // Check FREE tier usage limit before starting
+          const usageCheck = await chrome.runtime.sendMessage({ action: 'checkUsageLimit' });
+          if (usageCheck && !usageCheck.allowed) {
+            console.log('[Usage] Daily limit reached:', usageCheck);
+            const workflowStatus = document.getElementById('workflowRecordingStatus');
+            if (workflowStatus) {
+              workflowStatus.innerHTML = '<strong style="color: #f44336;">Daily limit reached</strong><br>' +
+                                       `<small>${usageCheck.count}/${usageCheck.limit} recordings used today.<br>Upgrade to Pro for unlimited recordings.</small>`;
             }
-
-            return; // Stop execution
+            return;
           }
 
           const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
@@ -2070,9 +1760,9 @@ document.addEventListener('DOMContentLoaded', () => {
                 // Single source of truth - load from server
                 await loadWorkflowRecordings(true);
 
-                // Show success toast
+                // Show success toast - response.workflow.actions is the array
                 const workflowData = response.workflow;
-                const actionCount = workflowData?.workflow?.actions?.length || workflowData?.workflow?.length || 0;
+                const actionCount = workflowData?.actions?.length || 0;
                 showToast(`Workflow recording saved! ${actionCount} actions recorded`, 3000, 'success');
               } catch (error) {
                 console.error('Error loading workflow recordings:', error);
@@ -2972,9 +2662,9 @@ async function loadScreenRecordings(autoShow = false) {
               let prompt;
 
               if (name) {
-                prompt = `Please use the chrome_pilot_show_frames function in Chrome Debug to display the screen recording "${name}" (session: ${sessionId}) that was recorded on port ${port}.`;
+                prompt = `Please use the chrome_debug_show_frames function in Chrome Debug to display the screen recording "${name}" (session: ${sessionId}) that was recorded on port ${port}.`;
               } else {
-                prompt = `Please use the chrome_pilot_show_frames function in Chrome Debug to display the screen recording "${sessionId}" that was recorded on port ${port}.`;
+                prompt = `Please use the chrome_debug_show_frames function in Chrome Debug to display the screen recording "${sessionId}" that was recorded on port ${port}.`;
               }
 
               navigator.clipboard.writeText(prompt).then(() => {
@@ -3228,6 +2918,17 @@ chrome.storage.onChanged.addListener((changes, namespace) => {
       isWorkflowRecording = changes.workflowRecording.newValue === true;
       updateWorkflowRecordingUI();
     }
+    // Update usage display when usage count changes
+    if (changes.chromedebug_daily_usage) {
+      const usage = changes.chromedebug_daily_usage.newValue;
+      if (usage) {
+        const usageCountEl = document.getElementById('usage-count');
+        const usageLimitEl = document.getElementById('usage-limit');
+        if (usageCountEl) usageCountEl.textContent = usage.count || 0;
+        if (usageLimitEl) usageLimitEl.textContent = '5'; // FREE tier limit
+        console.log(`[Usage] Storage updated: ${usage.count}/5`);
+      }
+    }
   }
 });
 
@@ -3266,12 +2967,20 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
       recordingStatus.innerHTML = `<strong style="color: #4CAF50;">Recording saved!</strong><br>` +
                                    `<small>${request.totalFrames} frames (${Math.round(request.duration / 1000)}s)</small>`;
     }
-    // Add frame session to recordings list
-    addRecording(request.sessionId, false, true, request.serverPort, null, request.sessionName);
+    // Reload screen recordings list to show the new recording
+    loadScreenRecordings(true);
     // Clear status after 5 seconds
     setTimeout(() => {
       if (recordingStatus) recordingStatus.textContent = '';
     }, 5000);
+  } else if (request.action === 'workflowRecordingSaved') {
+    console.log('Workflow recording saved:', request.workflowId);
+    // Reload workflow recordings list to show the new recording
+    loadWorkflowRecordings(true);
+  } else if (request.action === 'recordingStopped') {
+    console.log('Recording stopped:', request.sessionId);
+    // Reload screen recordings list immediately
+    loadScreenRecordings(true);
   } else if (request.action === 'uploadError') {
     const recordingStatus = document.getElementById('recordingStatus');
     if (recordingStatus) {