render header and footer only once. fixes #788

app/fileManager.js

@@ -110,21 +110,21 @@ export default function(state, emitter) {
       }
       await delay(1000);
       await fadeOut('.page');
-      openLinksInNewTab(links, false);
       emitter.emit('pushState', `/share/${ownedFile.id}`);
     } catch (err) {
-      // eslint-disable-next-line no-console
-      console.error(err);
-
       if (err.message === '0') {
         //cancelled. do nothing
         metrics.cancelledUpload({ size, type });
-        return render();
+        render();
+      } else {
+        // eslint-disable-next-line no-console
+        console.error(err);
+        state.raven.captureException(err);
+        metrics.stoppedUpload({ size, type, err });
+        emitter.emit('pushState', '/error');
       }
-      state.raven.captureException(err);
-      metrics.stoppedUpload({ size, type, err });
-      emitter.emit('pushState', '/error');
     } finally {
+      openLinksInNewTab(links, false);
       state.uploading = false;
       state.transfer = null;
     }
@@ -188,17 +188,18 @@ export default function(state, emitter) {
       if (err.message === '0') {
         // download cancelled
         state.transfer.reset();
-        return render();
+        render();
+      } else {
+        // eslint-disable-next-line no-console
+        console.error(err);
+        state.transfer = null;
+        const location = err.message === '404' ? '/404' : '/error';
+        if (location === '/error') {
+          state.raven.captureException(err);
+          metrics.stoppedDownload({ size, err });
+        }
+        emitter.emit('pushState', location);
       }
-      // eslint-disable-next-line no-console
-      console.error(err);
-      state.transfer = null;
-      const location = err.message === '404' ? '/404' : '/error';
-      if (location === '/error') {
-        state.raven.captureException(err);
-        metrics.stoppedDownload({ size, err });
-      }
-      emitter.emit('pushState', location);
     } finally {
       openLinksInNewTab(links, false);
     }

app/templates/footer/index.js

@@ -2,7 +2,7 @@ const html = require('choo/html');
 const assets = require('../../../common/assets');
 
 module.exports = function(state) {
-  return html`<footer class="footer">
+  const footer = html`<footer class="footer">
     <div class="legalSection">
       <a
         href="https://www.mozilla.org"
@@ -61,4 +61,11 @@ module.exports = function(state) {
       </a>
     </div>
   </footer>`;
+  // HACK
+  // We only want to render this once because we
+  // toggle the targets of the links with utils/openLinksInNewTab
+  footer.isSameNode = function(target) {
+    return target && target.nodeName && target.nodeName === 'FOOTER';
+  };
+  return footer;
 };

app/templates/header/index.js

@@ -15,24 +15,32 @@ const browser = browserName();
 
 module.exports = function(state) {
   const feedbackUrl = `https://qsurvey.mozilla.com/s3/txp-firefox-send?ver=${version}&browser=${browser}`;
-  return html`<header class="header">
-  <div class="logo">
-    <a class="logo__link" href="/">
-      <img
-        src="${assets.get('send_logo.svg')}"
-        alt="Send"/>
-      <h1 class="logo__title">Send</h1>
-    </a>
-    <div class="logo__subtitle">
-      <a class="logo__subtitle-link" href="https://testpilot.firefox.com">Firefox Test Pilot</a>
-      <div>${state.translate('siteSubtitle')}</div>
+  const header = html`
+  <header class="header">
+    <div class="logo">
+      <a class="logo__link" href="/">
+        <img
+          src="${assets.get('send_logo.svg')}"
+          alt="Send"/>
+        <h1 class="logo__title">Send</h1>
+      </a>
+      <div class="logo__subtitle">
+        <a class="logo__subtitle-link" href="https://testpilot.firefox.com">Firefox Test Pilot</a>
+        <div>${state.translate('siteSubtitle')}</div>
+      </div>
     </div>
-  </div>
-  <a href="${feedbackUrl}"
-    rel="noreferrer noopener"
-    class="feedback"
-    target="_blank">${state.translate('siteFeedback')}</a>
-</header>`;
+    <a href="${feedbackUrl}"
+      rel="noreferrer noopener"
+      class="feedback"
+      target="_blank">${state.translate('siteFeedback')}</a>
+  </header>`;
+  // HACK
+  // We only want to render this once because we
+  // toggle the targets of the links with utils/openLinksInNewTab
+  header.isSameNode = function(target) {
+    return target && target.nodeName && target.nodeName === 'HEADER';
+  };
+  return header;
 };
 
 function browserName() {