Add keep status per tab setting (#3871)

static/settings.ts

@@ -57,6 +57,7 @@ export interface SiteSettings {
     formatOnCompile: boolean;
     hoverShowAsmDoc: boolean;
     hoverShowSource: boolean;
+    keepMultipleTabs: boolean;
     keepSourcesOnLangChange: boolean;
     newEditorLastLang: boolean;
     showMinimap: boolean;
@@ -265,6 +266,7 @@ export class Settings {
             ['.formatOnCompile', 'formatOnCompile', false],
             ['.hoverShowAsmDoc', 'hoverShowAsmDoc', true],
             ['.hoverShowSource', 'hoverShowSource', true],
+            ['.keepMultipleTabs', 'keepMultipleTabs', false],
             ['.keepSourcesOnLangChange', 'keepSourcesOnLangChange', false],
             ['.newEditorLastLang', 'newEditorLastLang', true],
             ['.showMinimap', 'showMinimap', true],

static/sharing.ts

@@ -30,6 +30,7 @@ import ClipboardJS from 'clipboard';
 
 import ClickEvent = JQuery.ClickEvent;
 import TriggeredEvent = JQuery.TriggeredEvent;
+import {Settings, SiteSettings} from './settings';
 
 const ga = require('./analytics').ga;
 const options = require('./options').options;
@@ -81,6 +82,8 @@ export class Sharing {
     private shareFull: JQuery;
     private shareEmbed: JQuery;
 
+    private settings: SiteSettings;
+
     private clippyButton: ClipboardJS | null;
 
     constructor(layout: any) {
@@ -92,6 +95,8 @@ export class Sharing {
         this.shareFull = $('#shareFull');
         this.shareEmbed = $('#shareEmbed');
 
+        this.settings = Settings.getStoredSettings();
+
         this.clippyButton = null;
 
         this.initButtons();
@@ -110,6 +115,22 @@ export class Sharing {
         $('#sharelinkdialog')
             .on('show.bs.modal', this.onOpenModalPane.bind(this))
             .on('hidden.bs.modal', this.onCloseModalPane.bind(this));
+
+        this.layout.eventHub.on('settingsChange', (newSettings: SiteSettings) => {
+            this.settings = newSettings;
+        });
+
+        $(window).on('blur', async () => {
+            if (this.settings.keepMultipleTabs) {
+                try {
+                    const link = await this.getLinkOfType(LinkType.Full);
+                    window.history.replaceState(null, '', link);
+                } catch (e) {
+                    // This is probably caused by a link that is too long
+                    Sentry.captureException(e);
+                }
+            }
+        });
     }
 
     private onStateChanged(): void {
@@ -245,6 +266,25 @@ export class Sharing {
         }
     }
 
+    private getLinkOfType(type: LinkType): Promise<string> {
+        const config = this.layout.toConfig();
+        return new Promise<string>((resolve, reject) => {
+            Sharing.getLinks(config, type, (error: any, newUrl: string, extra: string, updateState: boolean) => {
+                if (error || !newUrl) {
+                    this.displayTooltip(this.share, 'Oops, something went wrong');
+                    Sentry.captureException(error);
+                    reject();
+                } else {
+                    if (updateState) {
+                        Sharing.storeCurrentConfig(config, extra);
+                    }
+                    resolve(newUrl);
+                }
+            });
+        });
+
+    }
+
     private copyLinkTypeToClipboard(type: LinkType): void {
         const config = this.layout.toConfig();
         Sharing.getLinks(config, type, (error: any, newUrl: string, extra: string, updateState: boolean) => {

views/popups/settings.pug

@@ -41,6 +41,10 @@
                 small(style="margin-left: 3px")
                   span.fas.fa-info-circle(title="New editors only (Reset UI to clear yours)" aria-label="New editors only (Reset UI to clear yours)")
               select.defaultLanguage
+              .checkbox
+                label
+                  input.keepMultipleTabs(type="checkbox")
+                  | Keep page status per tab
               .checkbox
                 label
                   input.allowStoreCodeDebug(type="checkbox")