Skip to content
This repository has been archived by the owner on May 22, 2021. It is now read-only.

Add noscript tag #406

Merged
merged 3 commits into from
Aug 3, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions docs/faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,17 @@ Many browsers support this standard and should work fine, but some have not
implemented it yet (mobile browsers lag behind on this, in
particular).

## Why does Firefox Send require JavaScript?

Firefox Send uses JavaScript to:

- Encrypt and decrypt files locally on the client instead of the server.
- Render the user interface.
- Manage translations on the website into [various different languages](https://github.com/mozilla/send#localization).
- Collect data to help us improve Send in accordance with our [Terms & Privacy](https://send.firefox.com/legal).

Since Send is an open source project, you can see all of the cool ways we use JavaScript by [examining our code](https://github.com/mozilla/send/).

## How long are files available for?

Files are available to be downloaded for 24 hours, after which they are removed
Expand Down
1 change: 1 addition & 0 deletions frontend/src/upload.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ if (storage.has('referrer')) {
}

$(document).ready(function() {
$('#page-one').removeAttr('hidden');
$('#file-upload').change(onUpload);

$('.legal-links a, .social-links a, #dl-firefox').click(function(target) {
Expand Down
2 changes: 1 addition & 1 deletion views/index.handlebars
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="page-one">
<div id="page-one" hidden>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hides the content by default on the homepage, and then we show the content on document.ready using jQuery in frontend/src/upload.js above (assuming the user has JavaScript enabled).

<script src="/upload.js"></script>
<div class="title" data-l10n-id="uploadPageHeader"></div>
<div class="description">
Expand Down
15 changes: 10 additions & 5 deletions views/layouts/main.handlebars
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,21 @@
<a href="https://qsurvey.mozilla.com/s3/txp-firefox-send" rel="noreferrer noopener" class="feedback" target="_blank" data-l10n-id="siteFeedback">Feedback</a>
</header>
<div class="all">
<noscript>
<h2>Firefox Send requires JavaScript</h2>
<p><a href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-does-firefox-send-require-javascript" target="_blank" rel="noreferrer noopener">Why does Firefox Send require JavaScript?</a></p>
<p>Please enable JavaScript and try again.</p>
</noscript>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is all en-US only. Sorry. But since l20n doesn't work without JavaScript, we're a bit stuck unless we do weird workarounds like some meta refresh to localized copies of a page.

Copy link
Collaborator

@flodolo flodolo Aug 3, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ugh :-\

@stasm can we try to think if it's possible to provide a "solution", or at least a suggested workaround, for this? Not for this case, for it's already the second one we have.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unless there are a11y concerns, I'm quite OK with this here being the suggested solution. Can we assume that people who disable JavaScript are tech-savvy enough to understand this message?

{{{body}}}
</div>
<div class="footer">
<div class="legal-links">
<a href="https://www.mozilla.org"><img class="mozilla-logo" src="/resources/mozilla-logo.svg"/></a>
<a href="https://www.mozilla.org/about/legal" data-l10n-id="footerLinkLegal"></a>
<a href="https://testpilot.firefox.com/about" data-l10n-id="footerLinkAbout"></a>
<a href="/legal" data-l10n-id="footerLinkPrivacy"></a>
<a href="/legal" data-l10n-id="footerLinkTerms"></a>
<a href="https://www.mozilla.org/privacy/websites/#cookies" data-l10n-id="footerLinkCookies"></a>
<a href="https://www.mozilla.org/about/legal" data-l10n-id="footerLinkLegal">Legal</a>
<a href="https://testpilot.firefox.com/about" data-l10n-id="footerLinkAbout">About Test Pilot</a>
<a href="/legal" data-l10n-id="footerLinkPrivacy">Privacy</a>
<a href="/legal" data-l10n-id="footerLinkTerms">Terms</a>
<a href="https://www.mozilla.org/privacy/websites/#cookies" data-l10n-id="footerLinkCookies">Cookies</a>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Again, all the defaults for the footer link text are in en-US, but will still localize correctly w/ l20n if they have JavaScript enabled.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@stasm Do we risk to get into trouble? I know we had in the past, with l20n and react fighting over updating this content, but we weren't using fluent-react

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There doesn't seem to be any client-side framework managing the rendering of these elements. If I'm not mistaken, it's a static template rendered by the server. L20n will remove the child elements and replace them with translations.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, we aren't using React/fluent-react on this project, just vanilla jQuery and l20n.

</div>
<div class="social-links">
<a href="https://github.com/mozilla/send" target="_blank" rel="noreferrer noopener"><img class="github" src="/resources/github-icon.svg"/></a>
Expand Down