foo.diff

diff --git a/README.txt b/README.txt
index 6370ac2679aa..a1f388c02fbf 100644
--- a/README.txt
+++ b/README.txt
@@ -27,3 +27,5 @@ install directory without having to rebuild everything, try:
 ```
 rm -rf rr-opt/dist/Replay.app
 ```
+
+
diff --git a/browser/base/content/tabbrowser.js b/browser/base/content/tabbrowser.js
index 42f981410656..6d4a0fb04dba 100644
--- a/browser/base/content/tabbrowser.js
+++ b/browser/base/content/tabbrowser.js
@@ -31,6 +31,7 @@
       );
 
       Services.obs.addObserver(this, "contextual-identity-updated");
+      Services.obs.addObserver(this, "replay-development");
 
       Services.els.addSystemEventListener(document, "keydown", this, false);
       if (AppConstants.platform == "macosx") {
@@ -292,7 +293,7 @@
       if (!this._visibleTabs) {
         this._visibleTabs = Array.prototype.filter.call(
           this.tabs,
-          tab => !tab.hidden && !tab.closing
+          (tab) => !tab.hidden && !tab.closing
         );
       }
       return this._visibleTabs;
@@ -623,7 +624,7 @@
       }
       insertAfterElement.insertAdjacentElement("afterend", findBar);
 
-      await new Promise(r => requestAnimationFrame(r));
+      await new Promise((r) => requestAnimationFrame(r));
       delete aTab._pendingFindBar;
       if (window.closed || aTab.closing) {
         return null;
@@ -716,13 +717,13 @@
         const animations = Array.from(
           aTab.container.getElementsByTagName("tab")
         )
-          .map(tab => {
+          .map((tab) => {
             const throbber = tab.throbber;
             return throbber ? throbber.getAnimations({ subtree: true }) : [];
           })
           .reduce((a, b) => a.concat(b))
           .filter(
-            anim =>
+            (anim) =>
               anim instanceof CSSAnimation &&
               (anim.animationName === "tab-throbber-animation" ||
                 anim.animationName === "tab-throbber-animation-rtl") &&
@@ -731,7 +732,7 @@
 
         // Synchronize with the oldest running animation, if any.
         const firstStartTime = Math.min(
-          ...animations.map(anim =>
+          ...animations.map((anim) =>
             anim.startTime === null ? Infinity : anim.startTime
           )
         );
@@ -777,10 +778,12 @@
     getNotificationBox(aBrowser) {
       let browser = aBrowser || this.selectedBrowser;
       if (!browser._notificationBox) {
-        browser._notificationBox = new MozElements.NotificationBox(element => {
-          element.setAttribute("notificationside", "top");
-          this.getBrowserContainer(browser).prepend(element);
-        });
+        browser._notificationBox = new MozElements.NotificationBox(
+          (element) => {
+            element.setAttribute("notificationside", "top");
+            this.getBrowserContainer(browser).prepend(element);
+          }
+        );
       }
       return browser._notificationBox;
     },
@@ -860,7 +863,7 @@
       aOriginalURL = aIconURL,
       aLoadingPrincipal = null
     ) {
-      let makeString = url => (url instanceof Ci.nsIURI ? url.spec : url);
+      let makeString = (url) => (url instanceof Ci.nsIURI ? url.spec : url);
 
       aIconURL = makeString(aIconURL);
       aOriginalURL = makeString(aOriginalURL);
@@ -870,7 +873,7 @@
       if (
         aIconURL &&
         !aLoadingPrincipal &&
-        !LOCAL_PROTOCOLS.some(protocol => aIconURL.startsWith(protocol))
+        !LOCAL_PROTOCOLS.some((protocol) => aIconURL.startsWith(protocol))
       ) {
         console.error(
           `Attempt to set a remote URL ${aIconURL} as a tab icon without a loading principal.`
@@ -1046,7 +1049,7 @@
       gURLBar.setAttribute("switchingtabs", "true");
       window.addEventListener(
         "MozAfterPaint",
-        function() {
+        function () {
           gURLBar.removeAttribute("switchingtabs");
         },
         { once: true }
@@ -1194,7 +1197,7 @@
         this.clearMultiSelectedTabs({ isLastMultiSelectChange: true });
 
         if (oldBrowser != newBrowser && oldBrowser.getInPermitUnload) {
-          oldBrowser.getInPermitUnload(inPermitUnload => {
+          oldBrowser.getInPermitUnload((inPermitUnload) => {
             if (!inPermitUnload) {
               return;
             }
@@ -2089,7 +2092,7 @@
       // Use the JSM global to create the permanentKey, so that if the
       // permanentKey is held by something after this window closes, it
       // doesn't keep the window alive.
-      b.permanentKey = new (Cu.getGlobalForObject(Services)).Object();
+      b.permanentKey = new (Cu.getGlobalForObject(Services).Object)();
 
       const defaultBrowserAttributes = {
         contextmenu: "contentAreaContextMenu",
@@ -2256,7 +2259,7 @@
             break;
           case "reload":
           case "reloadWithFlags":
-            getter = () => params => {
+            getter = () => (params) => {
               // Wait for load handler to be instantiated before
               // initializing the reload.
               aTab.addEventListener(
@@ -2301,7 +2304,7 @@
               this._insertBrowser(aTab);
               return browser[name];
             };
-            setter = value => {
+            setter = (value) => {
               if (AppConstants.NIGHTLY_BUILD) {
                 let message = `[bug 1345098] Lazy browser prematurely inserted via '${name}' property access:\n`;
                 console.log(message + new Error().stack);
@@ -2686,7 +2689,7 @@
         // Call _handleNewTab asynchronously as it needs to know if the
         // new tab is selected.
         setTimeout(
-          function(tabContainer) {
+          function (tabContainer) {
             tabContainer._handleNewTab(t);
           },
           0,
@@ -2902,7 +2905,7 @@
       this.tabAnimationsInProgress++;
 
       if (animate) {
-        requestAnimationFrame(function() {
+        requestAnimationFrame(function () {
           // kick the animation off
           t.setAttribute("fadein", "true");
         });
@@ -3297,11 +3300,11 @@
       let tabsToRemove = [];
       if (aTab && aTab.multiselected) {
         tabsToRemove = this.visibleTabs.filter(
-          tab => !tab.multiselected && !tab.pinned
+          (tab) => !tab.multiselected && !tab.pinned
         );
       } else {
         tabsToRemove = this.visibleTabs.filter(
-          tab => tab != aTab && !tab.pinned
+          (tab) => tab != aTab && !tab.pinned
         );
       }
 
@@ -3466,7 +3469,7 @@
       aTab.removeAttribute("bursting");
 
       setTimeout(
-        function(tab, tabbrowser) {
+        function (tab, tabbrowser) {
           if (
             tab.container &&
             window.getComputedStyle(tab).maxWidth == "0.1px"
@@ -3779,7 +3782,7 @@
         this.tabContainer._updateCloseButtons();
 
         setTimeout(
-          function(tabs) {
+          function (tabs) {
             tabs._lastTabClosedByMouse = false;
           },
           0,
@@ -3879,20 +3882,20 @@
       if (numTabs == 0 || (numTabs == 1 && remainingTabs[0] == aTab)) {
         remainingTabs = Array.prototype.filter.call(
           this.tabs,
-          tab => !tab.closing && !excludeTabs.has(tab)
+          (tab) => !tab.closing && !excludeTabs.has(tab)
         );
       }
 
       // Try to find a remaining tab that comes after the given tab
       let tab = this.tabContainer.findNextTab(aTab, {
         direction: 1,
-        filter: _tab => remainingTabs.includes(_tab),
+        filter: (_tab) => remainingTabs.includes(_tab),
       });
 
       if (!tab) {
         tab = this.tabContainer.findNextTab(aTab, {
           direction: -1,
-          filter: _tab => remainingTabs.includes(_tab),
+          filter: (_tab) => remainingTabs.includes(_tab),
         });
       }
 
@@ -4048,7 +4051,7 @@
         let oldValue = otherFindBar._findField.value;
         let wasHidden = otherFindBar.hidden;
         let ourFindBarPromise = this.getFindBar(aOurTab);
-        ourFindBarPromise.then(ourFindBar => {
+        ourFindBarPromise.then((ourFindBar) => {
           if (!ourFindBar) {
             return;
           }
@@ -4253,7 +4256,7 @@
 
     removeProgressListener(aListener) {
       this.mProgressListeners = this.mProgressListeners.filter(
-        l => l != aListener
+        (l) => l != aListener
       );
     },
 
@@ -4263,7 +4266,7 @@
 
     removeTabsProgressListener(aListener) {
       this.mTabsProgressListeners = this.mTabsProgressListeners.filter(
-        l => l != aListener
+        (l) => l != aListener
       );
     },
 
@@ -4521,7 +4524,7 @@
     moveTabForward() {
       let nextTab = this.tabContainer.findNextTab(this.selectedTab, {
         direction: 1,
-        filter: tab => !tab.hidden,
+        filter: (tab) => !tab.hidden,
       });
 
       if (nextTab) {
@@ -4592,7 +4595,7 @@
     moveTabBackward() {
       let previousTab = this.tabContainer.findNextTab(this.selectedTab, {
         direction: -1,
-        filter: tab => !tab.hidden,
+        filter: (tab) => !tab.hidden,
       });
 
       if (previousTab) {
@@ -4748,7 +4751,7 @@
     allTabsSelected() {
       return (
         this.visibleTabs.length == 1 ||
-        this.visibleTabs.every(t => t.multiselected)
+        this.visibleTabs.every((t) => t.multiselected)
       );
     },
 
@@ -4805,7 +4808,7 @@
         } else {
           let selectedTabs = ChromeUtils.nondeterministicGetWeakSetKeys(
             this._multiSelectedTabsSet
-          ).filter(tab => tab.isConnected && !tab.closing);
+          ).filter((tab) => tab.isConnected && !tab.closing);
           let length = selectedTabs.length;
           gBrowser.selectedTab = selectedTabs[length - 1];
         }
@@ -4833,7 +4836,7 @@
       let { selectedTab, _multiSelectedTabsSet } = this;
       let tabs = ChromeUtils.nondeterministicGetWeakSetKeys(
         _multiSelectedTabsSet
-      ).filter(tab => tab.isConnected && !tab.closing);
+      ).filter((tab) => tab.isConnected && !tab.closing);
       if (!_multiSelectedTabsSet.has(selectedTab)) {
         tabs.push(selectedTab);
       }
@@ -4843,7 +4846,7 @@
     get multiSelectedTabsCount() {
       return ChromeUtils.nondeterministicGetWeakSetKeys(
         this._multiSelectedTabsSet
-      ).filter(tab => tab.isConnected && !tab.closing).length;
+      ).filter((tab) => tab.isConnected && !tab.closing).length;
     },
 
     get lastMultiSelectedTab() {
@@ -4889,12 +4892,12 @@
       let tabsToToggle;
       if (aTab.activeMediaBlocked) {
         tabsToToggle = this.selectedTabs.filter(
-          tab => tab.activeMediaBlocked || tab.linkedBrowser.audioMuted
+          (tab) => tab.activeMediaBlocked || tab.linkedBrowser.audioMuted
         );
       } else {
         let tabMuted = aTab.linkedBrowser.audioMuted;
         tabsToToggle = this.selectedTabs.filter(
-          tab =>
+          (tab) =>
             // When a user is looking to mute selected tabs, then media-blocked tabs
             // should not be toggled. Otherwise those media-blocked tabs are going into a
             // playing and unmuted state.
@@ -5277,6 +5280,10 @@
           }
           break;
         }
+
+        case "replay-development": {
+          window.isReplaying = true;
+        }
       }
     },
 
@@ -5348,13 +5355,13 @@
     },
 
     _setupEventListeners() {
-      this.tabpanels.addEventListener("select", event => {
+      this.tabpanels.addEventListener("select", (event) => {
         if (event.target == this.tabpanels) {
           this.updateCurrentBrowser();
         }
       });
 
-      this.addEventListener("DOMWindowClose", event => {
+      this.addEventListener("DOMWindowClose", (event) => {
         let browser = event.target;
         if (!browser.isRemoteBrowser) {
           if (!event.isTrusted) {
@@ -5400,7 +5407,7 @@
 
       this.addEventListener(
         "DOMWillOpenModalDialog",
-        event => {
+        (event) => {
           if (!event.isTrusted) {
             return;
           }
@@ -5485,7 +5492,7 @@
         true
       );
 
-      this.addEventListener("DOMTitleChanged", event => {
+      this.addEventListener("DOMTitleChanged", (event) => {
         if (!event.isTrusted) {
           return;
         }
@@ -5526,7 +5533,7 @@
         }
       });
 
-      let onTabCrashed = event => {
+      let onTabCrashed = (event) => {
         if (!event.isTrusted || !event.isTopFrame) {
           return;
         }
@@ -5565,7 +5572,7 @@
       this.addEventListener("oop-browser-crashed", onTabCrashed);
       this.addEventListener("oop-browser-buildid-mismatch", onTabCrashed);
 
-      this.addEventListener("DOMAudioPlaybackStarted", event => {
+      this.addEventListener("DOMAudioPlaybackStarted", (event) => {
         var tab = this.getTabFromAudioEvent(event);
         if (!tab) {
           return;
@@ -5594,7 +5601,7 @@
         this._tabAttrModified(tab, modifiedAttrs);
       });
 
-      this.addEventListener("DOMAudioPlaybackStopped", event => {
+      this.addEventListener("DOMAudioPlaybackStopped", (event) => {
         var tab = this.getTabFromAudioEvent(event);
         if (!tab) {
           return;
@@ -5623,7 +5630,7 @@
         }
       });
 
-      this.addEventListener("DOMAudioPlaybackBlockStarted", event => {
+      this.addEventListener("DOMAudioPlaybackBlockStarted", (event) => {
         var tab = this.getTabFromAudioEvent(event);
         if (!tab) {
           return;
@@ -5635,7 +5642,7 @@
         }
       });
 
-      this.addEventListener("DOMAudioPlaybackBlockStopped", event => {
+      this.addEventListener("DOMAudioPlaybackBlockStopped", (event) => {
         var tab = this.getTabFromAudioEvent(event);
         if (!tab) {
           return;
@@ -5651,7 +5658,7 @@
         }
       });
 
-      this.addEventListener("GloballyAutoplayBlocked", event => {
+      this.addEventListener("GloballyAutoplayBlocked", (event) => {
         let browser = event.originalTarget;
         let tab = this.getTabForBrowser(browser);
         if (!tab) {
@@ -5673,7 +5680,7 @@
         document
           .getElementById("tabContextMenu")
           .querySelectorAll("[data-lazy-l10n-id]")
-          .forEach(el => {
+          .forEach((el) => {
             el.setAttribute(
               "data-l10n-id",
               el.getAttribute("data-lazy-l10n-id")
@@ -6414,6 +6421,13 @@ var TabBarVisibility = {
     }
     this._initialUpdateDone = true;
 
+    // gBrowser
+    // env
+    //
+    if (record_replay_server) {
+      toolbar.classList.add("isDevelopment");
+    }
+
     toolbar.collapsed = collapse;
     let navbar = document.getElementById("nav-bar");
     navbar.setAttribute("tabs-hidden", collapse);
@@ -6435,7 +6449,7 @@ var TabBarVisibility = {
 var TabContextMenu = {
   contextTab: null,
   _updateToggleMuteMenuItems(aTab, aConditionFn) {
-    ["muted", "soundplaying"].forEach(attr => {
+    ["muted", "soundplaying"].forEach((attr) => {
       if (!aConditionFn || aConditionFn(attr)) {
         if (aTab.hasAttribute(attr)) {
           aTab.toggleMuteMenuItem.setAttribute(attr, "true");
@@ -6557,8 +6571,8 @@ var TabContextMenu = {
 
     // Disable "Close other Tabs" if there are no unpinned tabs.
     let unpinnedTabsToClose = multiselectionContext
-      ? gBrowser.visibleTabs.filter(t => !t.multiselected && !t.pinned).length
-      : gBrowser.visibleTabs.filter(t => t != this.contextTab && !t.pinned)
+      ? gBrowser.visibleTabs.filter((t) => !t.multiselected && !t.pinned).length
+      : gBrowser.visibleTabs.filter((t) => t != this.contextTab && !t.pinned)
           .length;
     document.getElementById("context_closeOtherTabs").disabled =
       unpinnedTabsToClose < 1;
@@ -6649,7 +6663,7 @@ var TabContextMenu = {
         break;
       case "TabAttrModified":
         let tab = aEvent.target;
-        this._updateToggleMuteMenuItems(tab, attr =>
+        this._updateToggleMuteMenuItems(tab, (attr) =>
           aEvent.detail.changed.includes(attr)
         );
         break;
@@ -6745,14 +6759,21 @@ function EnsureRecordReplayWatcher() {
 
   Services.ppmm.addMessageListener("RecordReplayCriticalError", {
     receiveMessage(msg) {
-      if (gBrowser.selectedBrowser.hasAttribute("recordExecution") ||
-          gBrowser.selectedBrowser.hasAttribute("replayExecution")) {
+      if (
+        gBrowser.selectedBrowser.hasAttribute("recordExecution") ||
+        gBrowser.selectedBrowser.hasAttribute("replayExecution")
+      ) {
         dump(`RecordReplayCriticalError ${msg.data.kind}\n`);
-        ChromeUtils.recordReplayLog(`RecordReplayCriticalError ${msg.data.kind}`);
+        ChromeUtils.recordReplayLog(
+          `RecordReplayCriticalError ${msg.data.kind}`
+        );
         const tab = gBrowser.selectedTab;
-        gBrowser.selectedTab = gBrowser.addTrustedTab(`about:replay?error=${msg.data.kind}`, {
-          index: tab._tPos + 1,
-        });
+        gBrowser.selectedTab = gBrowser.addTrustedTab(
+          `about:replay?error=${msg.data.kind}`,
+          {
+            index: tab._tPos + 1,
+          }
+        );
         gBrowser.removeTab(tab);
       }
     },
diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css
index 8e057127eb13..e8c728c27f49 100644
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -44,6 +44,10 @@
   --arrowpanel-field-background: rgba(12,12,13,.3);
 }
 
+#TabsToolbar.isDevelopment {
+  background: #d21133;
+}
+
 #navigator-toolbox {
   -moz-appearance: none;
   --tabs-border-color: rgba(0,0,0,.3);
diff --git a/devtools/startup/DevToolsStartup.jsm b/devtools/startup/DevToolsStartup.jsm
index 2a241c5c67f0..5ae0ab864d7a 100644
--- a/devtools/startup/DevToolsStartup.jsm
+++ b/devtools/startup/DevToolsStartup.jsm
@@ -1655,6 +1655,7 @@ function getDispatchServer(url) {
   );
   const address = env.get("RECORD_REPLAY_SERVER");
   if (address) {
+    Services.obs.notifyObservers(this, "replay-development");
     return address;
   }
   return Services.prefs.getStringPref("devtools.recordreplay.cloudServer");