Add interval to check document focus for autolock

app/assets/javascripts/app/services/passcodeManager.js

@@ -164,6 +164,16 @@ class PasscodeManager {
     }
 
     configureAutoLock() {
+      PasscodeManager.AutoLockPollFocusInterval = 1 * MillisecondsPerSecond;
+
+      PasscodeManager.AutoLockIntervalNone = 0;
+      PasscodeManager.AutoLockIntervalImmediate = 1;
+      PasscodeManager.AutoLockIntervalOneMinute = 60 * MillisecondsPerSecond;
+      PasscodeManager.AutoLockIntervalFiveMinutes = 300 * MillisecondsPerSecond;
+      PasscodeManager.AutoLockIntervalOneHour = 3600 * MillisecondsPerSecond;
+
+      PasscodeManager.AutoLockIntervalKey = "AutoLockIntervalKey";
+
       if(isDesktopApplication()) {
         // desktop only
         this.$rootScope.$on("window-lost-focus", () => {
@@ -173,20 +183,27 @@ class PasscodeManager {
           this.documentVisibilityChanged(true);
         })
       } else {
-        // tab visibility listender, web only
+        // tab visibility listener, web only
         document.addEventListener('visibilitychange', (e) => {
           let visible = document.visibilityState == "visible";
           this.documentVisibilityChanged(visible);
         });
+
+        // verify document is in focus every so often as visibilitychange event is not triggered
+        // on a typical window blur event but rather on tab changes
+        this.pollFocusTimeout = setInterval(() => {
+          let hasFocus = document.hasFocus();
+
+          if(hasFocus && this.lastFocusState == "hidden") {
+            this.documentVisibilityChanged(true);
+          } else if(!hasFocus && this.lastFocusState == "visible") {
+            this.documentVisibilityChanged(false);
+          }
+
+          // save this to compare against next time around
+          this.lastFocusState = hasFocus ? "visible" : "hidden";
+        }, PasscodeManager.AutoLockPollFocusInterval);
       }
-
-      PasscodeManager.AutoLockIntervalNone = 0;
-      PasscodeManager.AutoLockIntervalImmediate = 1;
-      PasscodeManager.AutoLockIntervalOneMinute = 60 * MillisecondsPerSecond;
-      PasscodeManager.AutoLockIntervalFiveMinutes = 300 * MillisecondsPerSecond;
-      PasscodeManager.AutoLockIntervalOneHour = 3600 * MillisecondsPerSecond;
-
-      PasscodeManager.AutoLockIntervalKey = "AutoLockIntervalKey";
     }
 
     getAutoLockIntervalOptions() {

dist/javascripts/compiled.js

@@ -61071,6 +61071,14 @@ function () {
     value: function configureAutoLock() {
       var _this80 = this;
 
+      PasscodeManager.AutoLockPollFocusInterval = 1 * MillisecondsPerSecond;
+      PasscodeManager.AutoLockIntervalNone = 0;
+      PasscodeManager.AutoLockIntervalImmediate = 1;
+      PasscodeManager.AutoLockIntervalOneMinute = 60 * MillisecondsPerSecond;
+      PasscodeManager.AutoLockIntervalFiveMinutes = 300 * MillisecondsPerSecond;
+      PasscodeManager.AutoLockIntervalOneHour = 3600 * MillisecondsPerSecond;
+      PasscodeManager.AutoLockIntervalKey = "AutoLockIntervalKey";
+
       if (isDesktopApplication()) {
         // desktop only
         this.$rootScope.$on("window-lost-focus", function () {
@@ -61080,20 +61088,27 @@ function () {
           _this80.documentVisibilityChanged(true);
         });
       } else {
-        // tab visibility listender, web only
+        // tab visibility listener, web only
         document.addEventListener('visibilitychange', function (e) {
           var visible = document.visibilityState == "visible";
 
           _this80.documentVisibilityChanged(visible);
-        });
-      }
+        }); // verify document is in focus every so often as visibilitychange event is not triggered
+        // on a typical window blur event but rather on tab changes
 
-      PasscodeManager.AutoLockIntervalNone = 0;
-      PasscodeManager.AutoLockIntervalImmediate = 1;
-      PasscodeManager.AutoLockIntervalOneMinute = 60 * MillisecondsPerSecond;
-      PasscodeManager.AutoLockIntervalFiveMinutes = 300 * MillisecondsPerSecond;
-      PasscodeManager.AutoLockIntervalOneHour = 3600 * MillisecondsPerSecond;
-      PasscodeManager.AutoLockIntervalKey = "AutoLockIntervalKey";
+        this.pollFocusTimeout = setInterval(function () {
+          var hasFocus = document.hasFocus();
+
+          if (hasFocus && _this80.lastFocusState == "hidden") {
+            _this80.documentVisibilityChanged(true);
+          } else if (!hasFocus && _this80.lastFocusState == "visible") {
+            _this80.documentVisibilityChanged(false);
+          } // save this to compare against next time around
+
+
+          _this80.lastFocusState = hasFocus ? "visible" : "hidden";
+        }, PasscodeManager.AutoLockPollFocusInterval);
+      }
     }
   }, {
     key: "getAutoLockIntervalOptions",
@@ -79309,30 +79324,6 @@ if (globalScope) {
   );
 
 
-  $templateCache.put('directives/item-preview-modal.html',
-    "<div class='modal medium' id='item-preview-modal'>\n" +
-    "<div class='content'>\n" +
-    "<div class='sn-component'>\n" +
-    "<div class='panel'>\n" +
-    "<div class='header'>\n" +
-    "<h1 class='title'>Preview</h1>\n" +
-    "<div class='horizontal-group'>\n" +
-    "<a class='close-button info' ng-click='restore(false)'>Restore</a>\n" +
-    "<a class='close-button info' ng-click='restore(true)'>Restore as copy</a>\n" +
-    "<a class='close-button info' ng-click='dismiss()'>Close</a>\n" +
-    "</div>\n" +
-    "</div>\n" +
-    "<div class='content selectable'>\n" +
-    "<h2>{{revision.content.title}}</h2>\n" +
-    "<p class='normal' style='white-space: pre-wrap; font-size: 16px;'>{{revision.content.text}}</p>\n" +
-    "</div>\n" +
-    "</div>\n" +
-    "</div>\n" +
-    "</div>\n" +
-    "</div>\n"
-  );
-
-
   $templateCache.put('directives/menu-row.html',
     "<div class='sk-menu-panel-row row' ng-attr-title='{{desc}}' ng-click='onClick($event)'>\n" +
     "<div class='sk-menu-panel-column'>\n" +
@@ -79995,541 +79986,6 @@ if (globalScope) {
   );
 
 
-  $templateCache.put('frontend/directives/account-menu.html',
-    "<div class='panel panel-default panel-right account-data-menu'>\n" +
-    "  <div class='panel-body large-padding'>\n" +
-    "    <div ng-if='!user'>\n" +
-    "      <div class='mb-10'>\n" +
-    "        <div class='step-one' ng-if='!formData.showLogin &amp;&amp; !formData.showRegister'>\n" +
-    "          <h3>Sign in or register to enable sync and encryption.</h3>\n" +
-    "          <div class='small-v-space'></div>\n" +
-    "          <div class='button-group mt-5'>\n" +
-    "            <button class='ui-button half-button' ng-click='formData.showLogin = true'>\n" +
-    "              <span>Sign In</span>\n" +
-    "            </button>\n" +
-    "            <button class='ui-button half-button' ng-click='formData.showRegister = true'>\n" +
-    "              <span>Register</span>\n" +
-    "            </button>\n" +
-    "          </div>\n" +
-    "        </div>\n" +
-    "        <div class='step-two' ng-if='formData.showLogin || formData.showRegister'>\n" +
-    "          <div class='float-group h20'>\n" +
-    "            <h3 class='pull-left'>{{formData.showLogin ? \"Sign In\" : \"Register (free)\"}}</h3>\n" +
-    "            <a class='pull-right pt-5' ng-click='formData.showLogin = false; formData.showRegister = false;'>Cancel</a>\n" +
-    "          </div>\n" +
-    "          <form class='mt-5'>\n" +
-    "            <input autofocus='autofocus' class='form-control mt-10' name='email' ng-model='formData.email' placeholder='Email' required type='email'>\n" +
-    "            <input class='form-control' name='password' ng-model='formData.user_password' placeholder='Password' required type='password'>\n" +
-    "            <input class='form-control' name='password' ng-if='formData.showRegister' ng-model='formData.password_conf' placeholder='Confirm Password' required type='password'>\n" +
-    "            <a class='block' ng-click='formData.showAdvanced = !formData.showAdvanced'>Advanced Options</a>\n" +
-    "            <div class='advanced-options mt-10' ng-if='formData.showAdvanced'>\n" +
-    "              <div class='float-group'>\n" +
-    "                <label class='pull-left'>Sync Server Domain</label>\n" +
-    "              </div>\n" +
-    "              <input class='form-control mt-5' name='server' ng-model='formData.url' placeholder='Server URL' required type='text'>\n" +
-    "            </div>\n" +
-    "            <div class='checkbox mt-10' ng-if='localNotesCount() &gt; 0'>\n" +
-    "              <p>\n" +
-    "                <input ng-bind='true' ng-change='mergeLocalChanged()' ng-model='formData.mergeLocal' type='checkbox'>\n" +
-    "                  Merge local notes ({{localNotesCount()}} notes)\n" +
-    "                </input>\n" +
-    "              </p>\n" +
-    "            </div>\n" +
-    "            <button class='ui-button block mt-10' ng-click='submitAuthForm()'>{{formData.showLogin ? \"Sign In\" : \"Register\"}}</button>\n" +
-    "          </form>\n" +
-    "        </div>\n" +
-    "        <div class='mt-15' ng-if='formData.showRegister'>\n" +
-    "          <h3>No Password Reset.</h3>\n" +
-    "          <p class='mt-5'>Because your notes are encrypted using your password, Standard Notes does not have a password reset option. You cannot forget your password.</p>\n" +
-    "        </div>\n" +
-    "        <em class='block center-align mt-10' ng-if='formData.status' style='font-size: 14px;'>{{formData.status}}</em>\n" +
-    "      </div>\n" +
-    "    </div>\n" +
-    "    <div ng-if='user'>\n" +
-    "      <h2>{{user.email}}</h2>\n" +
-    "      <p>{{server}}</p>\n" +
-    "      <div class='bold mt-10 blue' delay-hide='true' delay='1000' show='syncStatus.syncOpInProgress || syncStatus.needsMoreSync'>\n" +
-    "        <div class='spinner inline mr-5 blue'></div>\n" +
-    "        {{\"Syncing\" + (syncStatus.total > 0 ? \":\" : \"\")}}\n" +
-    "        <span ng-if='syncStatus.total &gt; 0'>{{syncStatus.current}}/{{syncStatus.total}}</span>\n" +
-    "      </div>\n" +
-    "      <p class='bold mt-10 red block' ng-if='syncStatus.error'>Error syncing: {{syncStatus.error.message}}</p>\n" +
-    "      <a class='block mt-15' href='{{dashboardURL()}}' target='_blank'>Data Dashboard</a>\n" +
-    "      <a class='block mt-5' ng-click='showCredentials = !showCredentials'>Show Credentials</a>\n" +
-    "      <section class='gray-bg mt-10 medium-padding' ng-if='showCredentials'>\n" +
-    "        <label class='block'>\n" +
-    "          Encryption key:\n" +
-    "          <div class='wrap normal mt-1 selectable'>{{encryptionKey()}}</div>\n" +
-    "        </label>\n" +
-    "        <label class='block mt-5 mb-0'>\n" +
-    "          Server password:\n" +
-    "          <div class='wrap normal mt-1 selectable'>{{serverPassword() ? serverPassword() : 'Not available. Sign out then sign back in to compute.'}}</div>\n" +
-    "        </label>\n" +
-    "      </section>\n" +
-    "      <a class='block mt-5' ng-click='newPasswordData.changePassword = !newPasswordData.changePassword'>Change Password</a>\n" +
-    "      <section class='gray-bg mt-10 medium-padding' ng-if='newPasswordData.changePassword'>\n" +
-    "        <p class='bold'>Change Password (Beta)</p>\n" +
-    "        <p class='mt-10'>Since your encryption key is based on your password, changing your password requires all your notes and tags to be re-encrypted using your new key.</p>\n" +
-    "        <p class='mt-5'>If you have thousands of items, this can take several minutes — you must keep the application window open during this process.</p>\n" +
-    "        <p class='mt-5'>After changing your password, you must log out of all other applications currently signed in to your account.</p>\n" +
-    "        <p class='bold mt-5'>It is highly recommended you download a backup of your data before proceeding.</p>\n" +
-    "        <div class='mt-10' ng-if='!newPasswordData.status'>\n" +
-    "          <a class='red mr-5' ng-click='showPasswordChangeForm()' ng-if='!newPasswordData.showForm'>Continue</a>\n" +
-    "          <a ng-click='newPasswordData.changePassword = false; newPasswordData.showForm = false'>Cancel</a>\n" +
-    "          <div class='mt-10' ng-if='newPasswordData.showForm'>\n" +
-    "            <form>\n" +
-    "              <input class='form-control' ng-model='newPasswordData.newPassword' placeholder='Enter new password' type='text'>\n" +
-    "              <input class='form-control' ng-model='newPasswordData.newPasswordConfirmation' placeholder='Confirm new password' type='text'>\n" +
-    "              <button class='ui-button block' ng-click='submitPasswordChange()'>Submit</button>\n" +
-    "            </form>\n" +
-    "          </div>\n" +
-    "        </div>\n" +
-    "        <p class='italic mt-10' ng-if='newPasswordData.status'>{{newPasswordData.status}}</p>\n" +
-    "      </section>\n" +
-    "      <div class='medium-v-space'></div>\n" +
-    "      <h4>Local Encryption</h4>\n" +
-    "      <p>Notes are encrypted locally before being sent to the server. Neither the server owner nor an intrusive entity can decrypt your locally encrypted notes.</p>\n" +
-    "      <div class='mt-5'>\n" +
-    "        <label>Status:</label>\n" +
-    "        {{encryptionStatusForNotes()}}\n" +
-    "      </div>\n" +
-    "    </div>\n" +
-    "    <div class='mt-25' ng-if='!importData.loading'>\n" +
-    "      <h4>Data Archives</h4>\n" +
-    "      <div class='mt-5' ng-if='user'>\n" +
-    "        <label class='normal inline' ng-if='user'>\n" +
-    "          <input ng-change='archiveFormData.encrypted = true' ng-model='archiveFormData.encrypted' ng-value='true' type='radio'>\n" +
-    "          Encrypted\n" +
-    "        </label>\n" +
-    "        <label class='normal inline'>\n" +
-    "          <input ng-change='archiveFormData.encrypted = false' ng-model='archiveFormData.encrypted' ng-value='false' type='radio'>\n" +
-    "          Decrypted\n" +
-    "        </label>\n" +
-    "      </div>\n" +
-    "      <a class='block mt-5' ng-class=\"{'mt-5' : !user}\" ng-click='downloadDataArchive()'>Download Data Archive</a>\n" +
-    "      <label class='block mt-5'>\n" +
-    "        <input file-change='-&gt;' handler='importFileSelected(files)' style='display: none;' type='file'>\n" +
-    "        <div class='fake-link'>Import Data from Archive</div>\n" +
-    "      </label>\n" +
-    "      <div ng-if='importData.requestPassword'>\n" +
-    "        Enter the account password associated with the import file.\n" +
-    "        <input ng-model='importData.password' type='text'>\n" +
-    "        <button ng-click='submitImportPassword()'>Decrypt & Import</button>\n" +
-    "      </div>\n" +
-    "      <p class='mt-5' ng-if='user'>Notes are downloaded in the Standard File format, which allows you to re-import back into this app easily. To download as plain text files, choose \"Decrypted\".</p>\n" +
-    "    </div>\n" +
-    "    <div class='spinner mt-10' ng-if='importData.loading'></div>\n" +
-    "    <div class='mt-25'>\n" +
-    "      <h4>Analytics</h4>\n" +
-    "      <p>\n" +
-    "        Help Standard Notes improve by sending anonymous data on general usage.\n" +
-    "        <a href='https://standardnotes.org/philosophy' target='_blank'>Learn more.</a>\n" +
-    "      </p>\n" +
-    "      <div class='mt-5'>\n" +
-    "        <label>Status:</label>\n" +
-    "        {{analyticsManager.enabled ? \"Enabled\" : \"Disabled\"}}\n" +
-    "        <a ng-click='analyticsManager.toggleStatus()'>{{analyticsManager.enabled ? \"Disable\" : \"Enable\"}}</a>\n" +
-    "      </div>\n" +
-    "    </div>\n" +
-    "    <a class='block mt-25 red' ng-click='destroyLocalData()'>{{ user ? \"Sign out and clear local data\" : \"Clear all local data\" }}</a>\n" +
-    "  </div>\n" +
-    "</div>\n"
-  );
-
-
-  $templateCache.put('frontend/directives/contextual-menu.html',
-    "<ul class='dropdown-menu sectioned-menu'>\n" +
-    "  <div class='extension' ng-repeat='extension in extensions'>\n" +
-    "    <div class='header' ng-click='extension.hide = !extension.hide'>\n" +
-    "      <div class='title'>{{extension.name}}</div>\n" +
-    "      <div class='subtitle'>\n" +
-    "        Will submit your note\n" +
-    "        <strong>{{accessTypeForExtension(extension)}}</strong>\n" +
-    "      </div>\n" +
-    "      <div class='spinner loading' ng-if='extension.loading'></div>\n" +
-    "      <div ng-if='extension.hide'>…</div>\n" +
-    "    </div>\n" +
-    "    <ul ng-if='!extension.hide'>\n" +
-    "      <li class='menu-item' ng-class=\"{'faded' : !isActionEnabled(action, extension)}\" ng-click='executeAction(action, extension);' ng-repeat='action in extension.actionsWithContextForItem(item)'>\n" +
-    "        <div class='menu-item-title'>{{action.label}}</div>\n" +
-    "        <div class='menu-item-subtitle'>{{action.desc}}</div>\n" +
-    "        <div class='small normal' ng-if='!isActionEnabled(action, extension)'>\n" +
-    "          Requires {{action.access_type}} access to this note.\n" +
-    "        </div>\n" +
-    "        <div ng-if='action.showNestedActions'>\n" +
-    "          <ul class='mt-10'>\n" +
-    "            <li class='menu-item white-bg nested-hover' ng-click='executeAction(subaction, extension, action); $event.stopPropagation();' ng-repeat='subaction in action.subactions' style='margin-top: -1px;'>\n" +
-    "              <div class='menu-item-title'>{{subaction.label}}</div>\n" +
-    "              <div class='menu-item-subtitle'>{{subaction.desc}}</div>\n" +
-    "              <span ng-if='subaction.running'>\n" +
-    "                <div class='spinner' style='margin-top: 3px;'></div>\n" +
-    "              </span>\n" +
-    "            </li>\n" +
-    "          </ul>\n" +
-    "        </div>\n" +
-    "        <span ng-if='action.running'>\n" +
-    "          <div class='spinner' style='margin-top: 3px;'></div>\n" +
-    "        </span>\n" +
-    "      </li>\n" +
-    "    </ul>\n" +
-    "  </div>\n" +
-    "</ul>\n" +
-    "<div class='extension-render-modal' ng-click='renderData.showRenderModal = false' ng-if='renderData.showRenderModal'>\n" +
-    "  <div class='content'>\n" +
-    "    <h2>{{renderData.title}}</h2>\n" +
-    "    <p class='normal' style='white-space: pre-wrap; font-family: monospace; font-size: 16px;'>{{renderData.text}}</p>\n" +
-    "  </div>\n" +
-    "</div>\n"
-  );
-
-
-  $templateCache.put('frontend/directives/editor-menu.html',
-    "<ul class='dropdown-menu sectioned-menu'>\n" +
-    "  <div class='header'>\n" +
-    "    <div class='title'>System Editors</div>\n" +
-    "  </div>\n" +
-    "  <ul>\n" +
-    "    <li class='menu-item' ng-click='selectEditor($event, editor)' ng-repeat='editor in editorManager.systemEditors'>\n" +
-    "      <span class='pull-left mr-10' ng-if='selectedEditor === editor'>✓</span>\n" +
-    "      <div class='menu-item-title pull-left'>{{editor.name}}</div>\n" +
-    "    </li>\n" +
-    "  </ul>\n" +
-    "  <div ng-if='editorManager.externalEditors.length &gt; 0'>\n" +
-    "    <div class='header'>\n" +
-    "      <div class='title'>External Editors</div>\n" +
-    "      <div class='subtitle'>Can access your current note decrypted.</div>\n" +
-    "    </div>\n" +
-    "    <ul>\n" +
-    "      <li class='menu-item' ng-click='selectEditor($event, editor)' ng-repeat='editor in editorManager.externalEditors'>\n" +
-    "        <strong class='red medium' ng-if='editor.conflict_of'>Conflicted copy</strong>\n" +
-    "        <div class='menu-item-title'>\n" +
-    "          {{editor.name}}\n" +
-    "          <span class='inline blue' ng-if='selectedEditor === editor' style='margin-left: 8px;'>✓</span>\n" +
-    "        </div>\n" +
-    "      </li>\n" +
-    "    </ul>\n" +
-    "  </div>\n" +
-    "</ul>\n"
-  );
-
-
-  $templateCache.put('frontend/directives/global-extensions-menu.html',
-    "<div class='panel panel-default account-panel panel-right' id='global-ext-menu'>\n" +
-    "  <div class='panel-body'>\n" +
-    "    <div class='container'>\n" +
-    "      <div class='float-group h20'>\n" +
-    "        <h1 class='blue pull-left'>Extensions</h1>\n" +
-    "        <a class='block pull-right dashboard-link' href='https://dashboard.standardnotes.org' target='_blank'>Open Dashboard</a>\n" +
-    "      </div>\n" +
-    "      <div class='clear' ng-if='!extensionManager.extensions.length &amp;&amp; !themeManager.themes.length &amp;&amp; !editorManager.externalEditors.length'>\n" +
-    "        <p>Customize your experience with editors, themes, and actions.</p>\n" +
-    "        <div class='blue-box mt-10'>\n" +
-    "          <h3>Available as part of the Extended subscription.</h3>\n" +
-    "          <p class='mt-5'>Note history</p>\n" +
-    "          <p class='mt-5'>Automated backups</p>\n" +
-    "          <p class='mt-5'>All editors, themes, and actions</p>\n" +
-    "          <a href='https://standardnotes.org/extensions' target='_blank'>\n" +
-    "            <button class='mt-10'>\n" +
-    "              <h3>Learn More</h3>\n" +
-    "            </button>\n" +
-    "          </a>\n" +
-    "        </div>\n" +
-    "      </div>\n" +
-    "    </div>\n" +
-    "    <div ng-if='themeManager.themes.length &gt; 0'>\n" +
-    "      <div class='container no-bottom section-margin'>\n" +
-    "        <h2>Themes</h2>\n" +
-    "      </div>\n" +
-    "      <ul>\n" +
-    "        <li ng-click='theme.showDetails = !theme.showDetails' ng-repeat='theme in themeManager.themes'>\n" +
-    "          <div class='container'>\n" +
-    "            <h3>{{theme.name}}</h3>\n" +
-    "            <a ng-click='themeManager.activateTheme(theme); $event.stopPropagation();' ng-if='!themeManager.isThemeActive(theme)'>Activate</a>\n" +
-    "            <a ng-click='themeManager.deactivateTheme(theme); $event.stopPropagation();' ng-if='themeManager.isThemeActive(theme)'>Deactivate</a>\n" +
-    "            <div ng-if='theme.showDetails'>\n" +
-    "              <div class='link-group'>\n" +
-    "                <a class='red' ng-click='deleteTheme(theme); $event.stopPropagation();'>Delete</a>\n" +
-    "                <a ng-click='theme.showLink = !theme.showLink; $event.stopPropagation();'>Show Link</a>\n" +
-    "                <p class='small selectable wrap' ng-if='theme.showLink'>\n" +
-    "                  {{theme.url}}\n" +
-    "                </p>\n" +
-    "              </div>\n" +
-    "            </div>\n" +
-    "          </div>\n" +
-    "        </li>\n" +
-    "      </ul>\n" +
-    "    </div>\n" +
-    "    <div ng-if='editorManager.externalEditors.length &gt; 0'>\n" +
-    "      <div class='container no-bottom section-margin'>\n" +
-    "        <h2>Editors</h2>\n" +
-    "        <p style='margin-top: 3px;'>Choose \"Editor\" in the note menu to use an editor for a specific note.</p>\n" +
-    "      </div>\n" +
-    "      <ul>\n" +
-    "        <li ng-click='editor.showDetails = !editor.showDetails' ng-repeat='editor in editorManager.externalEditors'>\n" +
-    "          <div class='container'>\n" +
-    "            <strong class='red medium' ng-if='editor.conflict_of'>Conflicted copy</strong>\n" +
-    "            <h3>{{editor.name}}</h3>\n" +
-    "            <div class='mt-5' ng-if='editor.showDetails'>\n" +
-    "              <div class='link-group'>\n" +
-    "                <a ng-click='setDefaultEditor(editor); $event.stopPropagation();' ng-if='!editor.default'>Make Default</a>\n" +
-    "                <a class='blue' ng-click='removeDefaultEditor(editor); $event.stopPropagation();' ng-if='editor.default'>Remove as Default</a>\n" +
-    "                <a ng-click='editor.showUrl = !editor.showUrl; $event.stopPropagation();'>Show Link</a>\n" +
-    "                <a class='red' ng-click='deleteEditor(editor); $event.stopPropagation();'>Delete</a>\n" +
-    "              </div>\n" +
-    "              <div class='wrap mt-5 selectable' ng-if='editor.showUrl'>{{editor.url}}</div>\n" +
-    "            </div>\n" +
-    "          </div>\n" +
-    "        </li>\n" +
-    "      </ul>\n" +
-    "    </div>\n" +
-    "    <div ng-if='extensionManager.extensions.length'>\n" +
-    "      <div class='container no-bottom section-margin'>\n" +
-    "        <h2>Actions</h2>\n" +
-    "        <p style='margin-top: 3px;'>Choose \"Actions\" in the note editor to use installed actions.</p>\n" +
-    "      </div>\n" +
-    "      <ul>\n" +
-    "        <li ng-click='extension.showDetails = !extension.showDetails' ng-init='extension.formData = {}' ng-repeat=\"extension in extensionManager.extensions | orderBy: 'name'\">\n" +
-    "          <div class='container'>\n" +
-    "            <h3>{{extension.name}}</h3>\n" +
-    "            <p class='small' ng-if='extension.description'>{{extension.description}}</p>\n" +
-    "            <div ng-if='extension.showDetails'>\n" +
-    "              <div class='mt-10'>\n" +
-    "                <label class='block'>Access Type</label>\n" +
-    "                <label class='normal block'>\n" +
-    "                  <input ng-change='changeExtensionEncryptionFormat(true, extension)' ng-model='extension.encrypted' ng-value='true' type='radio'>\n" +
-    "                  Encrypted\n" +
-    "                </label>\n" +
-    "                <label class='normal block'>\n" +
-    "                  <input ng-change='changeExtensionEncryptionFormat(false, extension)' ng-model='extension.encrypted' ng-value='false' type='radio'>\n" +
-    "                  Decrypted\n" +
-    "                </label>\n" +
-    "              </div>\n" +
-    "              <div class='small-v-space'></div>\n" +
-    "              <ul ng-repeat='action in extension.actionsInGlobalContext()'>\n" +
-    "                <li>\n" +
-    "                  <label class='block'>{{action.label}}</label>\n" +
-    "                  <em style='font-style: italic;'>{{action.desc}}</em>\n" +
-    "                  <em ng-if=\"action.repeat_mode == 'watch'\">\n" +
-    "                    Repeats when a change is made to your items.\n" +
-    "                  </em>\n" +
-    "                  <em ng-if=\"action.repeat_mode == 'loop'\">\n" +
-    "                    Repeats at most once every {{action.repeat_timeout}} seconds\n" +
-    "                  </em>\n" +
-    "                  <div>\n" +
-    "                    <a ng-click='action.showPermissions = !action.showPermissions'>{{action.showPermissions ? \"Hide permissions\" : \"Show permissions\"}}</a>\n" +
-    "                    <div ng-if='action.showPermissions'>\n" +
-    "                      {{action.permissionsString()}}\n" +
-    "                      <label class='block normal'>{{action.encryptionModeString()}}</label>\n" +
-    "                    </div>\n" +
-    "                  </div>\n" +
-    "                  <div>\n" +
-    "                    <div class='mt-5' ng-if='action.repeat_mode'>\n" +
-    "                      <button class='light' ng-click='extensionManager.disableRepeatAction(action, extension); $event.stopPropagation();' ng-if='extensionManager.isRepeatActionEnabled(action)'>Disable</button>\n" +
-    "                      <button class='light' ng-click='extensionManager.enableRepeatAction(action, extension); $event.stopPropagation();' ng-if='!extensionManager.isRepeatActionEnabled(action)'>Enable</button>\n" +
-    "                    </div>\n" +
-    "                    <button class='light mt-10' ng-click='selectedAction(action, extension); $event.stopPropagation();' ng-if='!action.running &amp;&amp; !action.repeat_mode'>\n" +
-    "                      Perform Action\n" +
-    "                    </button>\n" +
-    "                    <div class='spinner mb-5 block' ng-if='action.running'></div>\n" +
-    "                  </div>\n" +
-    "                  <p class='mb-5 mt-5 small' ng-if='!action.error &amp;&amp; action.lastExecuted &amp;&amp; !action.running'>\n" +
-    "                    Last run {{action.lastExecuted | appDateTime}}\n" +
-    "                  </p>\n" +
-    "                  <label class='red' ng-if='action.error'>\n" +
-    "                    Error performing action.\n" +
-    "                  </label>\n" +
-    "                </li>\n" +
-    "              </ul>\n" +
-    "              <a class='block mt-5' ng-click='extension.showURL = !extension.showURL; $event.stopPropagation();'>Show Link</a>\n" +
-    "              <p class='wrap selectable small' ng-if='extension.showURL'>{{extension.url}}</p>\n" +
-    "              <a class='block mt-5' ng-click='deleteActionExtension(extension); $event.stopPropagation();'>Remove extension</a>\n" +
-    "            </div>\n" +
-    "          </div>\n" +
-    "        </li>\n" +
-    "      </ul>\n" +
-    "    </div>\n" +
-    "    <div class='container section-margin'>\n" +
-    "      <h2 class='blue'>Install</h2>\n" +
-    "      <p class='faded'>Enter an install link</p>\n" +
-    "      <form class='mt-10 mb-10'>\n" +
-    "        <input autocomplete='off' autofocus='autofocus' class='form-control' name='url' ng-keyup='$event.keyCode == 13 &amp;&amp; submitInstallLink();' ng-model='formData.installLink' required type='url'>\n" +
-    "      </form>\n" +
-    "      <p class='blue' ng-if='formData.successfullyInstalled'>Successfully installed extension.</p>\n" +
-    "    </div>\n" +
-    "  </div>\n" +
-    "</div>\n"
-  );
-
-
-  $templateCache.put('frontend/editor.html',
-    "<div class='section editor' ng-class=\"{'fullscreen' : ctrl.fullscreen}\">\n" +
-    "  <div class='section-title-bar' id='editor-title-bar' ng-class=\"{'fullscreen' : ctrl.fullscreen }\" ng-if='ctrl.note'>\n" +
-    "    <div class='title'>\n" +
-    "      <input class='input' id='note-title-editor' ng-change='ctrl.nameChanged()' ng-focus='ctrl.onNameFocus()' ng-keyup='$event.keyCode == 13 &amp;&amp; ctrl.saveTitle($event)' ng-model='ctrl.note.title' select-on-click='true'>\n" +
-    "    </div>\n" +
-    "    <div id='save-status' ng-bind-html='ctrl.noteStatus' ng-class=\"{'red bold': ctrl.saveError, 'orange bold': ctrl.syncTakingTooLong}\"></div>\n" +
-    "    <div class='editor-tags'>\n" +
-    "      <input class='tags-input' ng-blur='ctrl.updateTagsFromTagsString($event, ctrl.tagsString)' ng-keyup='$event.keyCode == 13 &amp;&amp; $event.target.blur();' ng-model='ctrl.tagsString' placeholder='#tags' type='text'>\n" +
-    "    </div>\n" +
-    "  </div>\n" +
-    "  <ul class='section-menu-bar' ng-if='ctrl.note'>\n" +
-    "    <li click-outside='ctrl.showMenu = false;' is-open='ctrl.showMenu' ng-class=\"{'selected' : ctrl.showMenu}\">\n" +
-    "      <label ng-click='ctrl.showMenu = !ctrl.showMenu; ctrl.showExtensions = false; ctrl.showEditorMenu = false;'>Menu</label>\n" +
-    "      <ul class='dropdown-menu' ng-if='ctrl.showMenu'>\n" +
-    "        <li>\n" +
-    "          <label ng-click='ctrl.selectedMenuItem($event); ctrl.toggleFullScreen()'>Toggle Fullscreen</label>\n" +
-    "        </li>\n" +
-    "        <li>\n" +
-    "          <label ng-click='ctrl.selectedMenuItem($event); ctrl.deleteNote()'>Delete Note</label>\n" +
-    "        </li>\n" +
-    "      </ul>\n" +
-    "    </li>\n" +
-    "    <li click-outside='ctrl.showEditorMenu = false;' is-open='ctrl.showEditorMenu' ng-class=\"{'selected' : ctrl.showEditorMenu}\">\n" +
-    "      <label ng-click='ctrl.showEditorMenu = !ctrl.showEditorMenu; ctrl.showMenu = false; ctrl.showExtensions = false;'>Editor</label>\n" +
-    "      <editor-menu callback='ctrl.selectedEditor' ng-if='ctrl.showEditorMenu' selected-editor='ctrl.editor'></editor-menu>\n" +
-    "    </li>\n" +
-    "    <li click-outside='ctrl.showExtensions = false;' is-open='ctrl.showExtensions' ng-class=\"{'selected' : ctrl.showExtensions}\" ng-if='ctrl.hasAvailableExtensions()'>\n" +
-    "      <label ng-click='ctrl.showExtensions = !ctrl.showExtensions; ctrl.showMenu = false; ctrl.showEditorMenu = false;'>Actions</label>\n" +
-    "      <contextual-extensions-menu item='ctrl.note' ng-if='ctrl.showExtensions'></contextual-extensions-menu>\n" +
-    "    </li>\n" +
-    "  </ul>\n" +
-    "  <div class='editor-content' ng-class=\"{'fullscreen' : ctrl.fullscreen }\" ng-if='ctrl.noteReady'>\n" +
-    "    <iframe frameBorder='0' id='editor-iframe' ng-if='ctrl.editor &amp;&amp; !ctrl.editor.systemEditor' ng-src='{{ctrl.editor.url | trusted}}' style='width: 100%;'></iframe>\n" +
-    "    <textarea class='editable' id='note-text-editor' ng-change='ctrl.contentChanged()' ng-class=\"{'fullscreen' : ctrl.fullscreen }\" ng-click='ctrl.clickedTextArea()' ng-focus='ctrl.onContentFocus()' ng-if='!ctrl.editor || ctrl.editor.systemEditor' ng-model='ctrl.note.text'></textarea>\n" +
-    "  </div>\n" +
-    "</div>\n"
-  );
-
-
-  $templateCache.put('frontend/header.html',
-    "<div id='footer-bar'>\n" +
-    "  <div class='pull-left'>\n" +
-    "    <div class='footer-bar-link' click-outside='ctrl.showAccountMenu = false;' is-open='ctrl.showAccountMenu'>\n" +
-    "      <a ng-class='{red: ctrl.error}' ng-click='ctrl.accountMenuPressed()'>Account</a>\n" +
-    "      <account-menu ng-if='ctrl.showAccountMenu'></account-menu>\n" +
-    "    </div>\n" +
-    "    <div class='footer-bar-link' click-outside='ctrl.showExtensionsMenu = false;' is-open='ctrl.showExtensionsMenu'>\n" +
-    "      <a ng-click='ctrl.toggleExtensions()'>Extensions</a>\n" +
-    "      <global-extensions-menu ng-if='ctrl.showExtensionsMenu'></global-extensions-menu>\n" +
-    "    </div>\n" +
-    "    <div class='footer-bar-link'>\n" +
-    "      <a href='https://standardnotes.org/help' target='_blank'>\n" +
-    "        Help\n" +
-    "      </a>\n" +
-    "    </div>\n" +
-    "  </div>\n" +
-    "  <div class='pull-right'>\n" +
-    "    <div class='footer-bar-link' style='margin-right: 5px;'>\n" +
-    "      <div ng-if='ctrl.lastSyncDate' style='float: left; font-weight: normal; margin-right: 8px;'>\n" +
-    "        <span ng-if='!ctrl.isRefreshing'>\n" +
-    "          Last refreshed {{ctrl.lastSyncDate | appDateTime}}\n" +
-    "        </span>\n" +
-    "        <span ng-if='ctrl.isRefreshing'>\n" +
-    "          <div class='spinner' style='margin-top: 2px;'></div>\n" +
-    "        </span>\n" +
-    "      </div>\n" +
-    "      <strong ng-if='ctrl.offline'>Offline</strong>\n" +
-    "      <a ng-click='ctrl.refreshData()' ng-if='!ctrl.offline'>Refresh</a>\n" +
-    "    </div>\n" +
-    "  </div>\n" +
-    "</div>\n"
-  );
-
-
-  $templateCache.put('frontend/home.html',
-    "<div class='main-ui-view'>\n" +
-    "  <div class='app'>\n" +
-    "    <tags-section add-new='tagsAddNew' all-tag='allTag' remove-tag='removeTag' save='tagsSave' selection-made='tagsSelectionMade' tags='tags' will-select='tagsWillMakeSelection'></tags-section>\n" +
-    "    <notes-section add-new='notesAddNew' selection-made='notesSelectionMade' tag='selectedTag'></notes-section>\n" +
-    "    <editor-section note='selectedNote' remove='deleteNote' save='saveNote' update-tags='updateTagsForNote'></editor-section>\n" +
-    "  </div>\n" +
-    "  <header></header>\n" +
-    "</div>\n"
-  );
-
-
-  $templateCache.put('frontend/notes.html',
-    "<div class='section notes'>\n" +
-    "  <div class='content'>\n" +
-    "    <div class='section-title-bar' id='notes-title-bar'>\n" +
-    "      <div class='title'>{{ctrl.tag.title}} notes</div>\n" +
-    "      <div class='add-button' id='notes-add-button' ng-click='ctrl.createNewNote()'>+</div>\n" +
-    "      <br>\n" +
-    "      <div class='filter-section'>\n" +
-    "        <input class='filter-bar' lowercase='true' ng-change='ctrl.filterTextChanged()' ng-model='ctrl.noteFilter.text' placeholder='Search' select-on-click='true'>\n" +
-    "      </div>\n" +
-    "      <ul class='section-menu-bar' id='tag-menu-bar'>\n" +
-    "        <li ng-class=\"{'selected' : ctrl.showMenu}\">\n" +
-    "          <label ng-click='ctrl.showMenu = !ctrl.showMenu'>Sort</label>\n" +
-    "          <ul class='dropdown-menu' ng-if='ctrl.showMenu'>\n" +
-    "            <li>\n" +
-    "              <label ng-click='ctrl.selectedMenuItem($event); ctrl.selectedSortByCreated()'>\n" +
-    "                <span class='top mt-5 mr-5' ng-if=\"ctrl.sortBy == 'created_at'\">✓</span>\n" +
-    "                By date added\n" +
-    "              </label>\n" +
-    "            </li>\n" +
-    "            <li>\n" +
-    "              <label ng-click='ctrl.selectedMenuItem($event); ctrl.selectedSortByUpdated()'>\n" +
-    "                <span class='top mt-5 mr-5' ng-if=\"ctrl.sortBy == 'updated_at'\">✓</span>\n" +
-    "                By date modified\n" +
-    "              </label>\n" +
-    "            </li>\n" +
-    "          </ul>\n" +
-    "        </li>\n" +
-    "      </ul>\n" +
-    "    </div>\n" +
-    "    <div class='scrollable'>\n" +
-    "      <div can-load='true' class='infinite-scroll' infinite-scroll='ctrl.paginate()' threshold='200'>\n" +
-    "        <div class='note' ng-class=\"{'selected' : ctrl.selectedNote == note}\" ng-click='ctrl.selectNote(note)' ng-repeat='note in (ctrl.sortedNotes = (ctrl.tag.notes | filter: ctrl.filterNotes | orderBy: ctrl.sortBy:true | limitTo:ctrl.notesToDisplay))'>\n" +
-    "          <strong class='red medium' ng-if='note.conflict_of'>Conflicted copy</strong>\n" +
-    "          <div class='name' ng-if='note.title'>\n" +
-    "            {{note.title}}\n" +
-    "          </div>\n" +
-    "          <div class='note-preview'>\n" +
-    "            {{note.text}}\n" +
-    "          </div>\n" +
-    "          <div class='date'>{{(note.created_at | appDateTime) || 'Now'}}</div>\n" +
-    "        </div>\n" +
-    "      </div>\n" +
-    "    </div>\n" +
-    "  </div>\n" +
-    "</div>\n"
-  );
-
-
-  $templateCache.put('frontend/tags.html',
-    "<div class='section tags'>\n" +
-    "  <div class='content' id='tags-content'>\n" +
-    "    <div class='section-title-bar' id='tags-title-bar'>\n" +
-    "      <div class='title'>Tags</div>\n" +
-    "      <div class='add-button' id='tag-add-button' ng-click='ctrl.clickedAddNewTag()'>+</div>\n" +
-    "      {{ctrl.test}}\n" +
-    "    </div>\n" +
-    "    <div class='scrollable'>\n" +
-    "      <div class='tag' ng-class=\"{'selected' : ctrl.selectedTag == ctrl.allTag}\" ng-click='ctrl.selectTag(ctrl.allTag)' ng-if='ctrl.allTag'>\n" +
-    "        <div class='info'>\n" +
-    "          <input class='title' ng-disabled='true' ng-model='ctrl.allTag.title'>\n" +
-    "          <div class='count'>{{ctrl.noteCount(ctrl.allTag)}}</div>\n" +
-    "        </div>\n" +
-    "      </div>\n" +
-    "      <div class='tag' ng-class=\"{'selected' : ctrl.selectedTag == tag}\" ng-click='ctrl.selectTag(tag)' ng-repeat='tag in ctrl.tags'>\n" +
-    "        <div class='info'>\n" +
-    "          <input class='title' mb-autofocus='true' ng-attr-id='tag-{{tag.uuid}}' ng-blur='ctrl.saveTag($event, tag)' ng-change='ctrl.tagTitleDidChange(tag)' ng-click='ctrl.selectTag(tag)' ng-keyup='$event.keyCode == 13 &amp;&amp; ctrl.saveTag($event, tag)' ng-model='tag.title' should-focus='ctrl.newTag || ctrl.editingTag == tag' spellcheck='false'>\n" +
-    "          <div class='count'>{{ctrl.noteCount(tag)}}</div>\n" +
-    "        </div>\n" +
-    "        <div class='red small bold' ng-if='tag.conflict_of'>Conflicted copy</div>\n" +
-    "        <div class='menu' ng-if='ctrl.selectedTag == tag'>\n" +
-    "          <a class='item' ng-click='ctrl.selectedRenameTag($event, tag)' ng-if='!ctrl.editingTag'>Rename</a>\n" +
-    "          <a class='item' ng-click='ctrl.saveTag($event, tag)' ng-if='ctrl.editingTag'>Save</a>\n" +
-    "          <a class='item' ng-click='ctrl.selectedDeleteTag(tag)'>Delete</a>\n" +
-    "        </div>\n" +
-    "      </div>\n" +
-    "    </div>\n" +
-    "  </div>\n" +
-    "</div>\n"
-  );
-
-
   $templateCache.put('home.html',
     "<div class='main-ui-view' ng-class='platform'>\n" +
     "<lock-screen ng-if='needsUnlock' on-success='onSuccessfulUnlock'></lock-screen>\n" +