Bug 40701: Add in pane security warning when downloading a file

browser/components/downloads/content/downloads.css

@@ -95,6 +95,32 @@
   padding: 0.62em;
 }
 
+#downloadsPanel-mainView {
+  /* Fix the layout to ensure the #downloadsWarningDescription is given enough
+   * vertical space. For tor-browser#40701.
+   * TODO: May no longer be necessary after esr 115 due to bugzilla bug 1816455.
+   */
+  display: flex;
+  flex-direction: column;
+}
+
+#downloadsWarning p {
+  padding-inline: 8px;
+  margin-block-start: 8px;
+  margin-block-end: 0;
+  line-height: 1.4;
+}
+
+#downloadsWarningHeaderTitle {
+  font-weight: bold;
+}
+
+#downloadsWarningDescription {
+  /* Make sure we wrap the text rather than request the default max-content
+   * width from the parent XUL -moz-box. */
+  width: 0;
+}
+
 #downloadsHistory,
 #downloadsFooterButtons {
   margin: 0;

browser/components/downloads/content/downloads.js

@@ -31,6 +31,10 @@
 
 "use strict";
 
+const PREF_SHOW_DOWNLOAD_WARNING = "browser.download.showTorWarning";
+
+const TAILS_URI = "https://tails.boum.org/";
+
 var { XPCOMUtils } = ChromeUtils.import(
   "resource://gre/modules/XPCOMUtils.jsm"
 );
@@ -93,6 +97,13 @@ var DownloadsPanel = {
    */
   _state: 0,
 
+  /**
+   * State of tor's download warning. It should only be initialized once (text assigned,
+   * button commands assigned). This tracks if that has been performed and prevents
+   * repeats.
+   */
+  _torWarningInitialized: false,
+
   /** The panel is not linked to downloads data yet. */
   get kStateUninitialized() {
     return 0;
@@ -132,6 +143,15 @@ var DownloadsPanel = {
       );
     }
 
+    let showDownloadWarning = Services.prefs.getBoolPref(
+      PREF_SHOW_DOWNLOAD_WARNING
+    );
+    if (!showDownloadWarning) {
+      document.getElementById("downloadsWarning").hidden = true;
+    } else {
+      document.getElementById("downloadsWarning").hidden = false;
+    }
+
     if (this._state != this.kStateUninitialized) {
       DownloadsCommon.log("DownloadsPanel is already initialized.");
       return;
@@ -155,6 +175,44 @@ var DownloadsPanel = {
       DownloadsSummary
     );
 
+    if (this._torWarningInitialized == 0) {
+      document.getElementById(
+        "downloadsWarningHeaderTitle"
+      ).textContent = this._getString("torbutton.download.warning.title");
+      let tailsBrandName = this._getString(
+        "torbutton.download.warning.tails_brand_name"
+      );
+
+      let warningDescriptionText = this._getString(
+        "torbutton.download.warning.description"
+      );
+      let [head, rest] = warningDescriptionText.split("%S");
+      const tailsLink = document.createElement("a");
+      tailsLink.setAttribute("href", TAILS_URI);
+      tailsLink.textContent = tailsBrandName.trim();
+      tailsLink.addEventListener("click", event => {
+        event.preventDefault();
+        this.hidePanel();
+        openWebLinkIn(TAILS_URI, "tab");
+      });
+
+      let downloadsWarningDescription = document.getElementById(
+        "downloadsWarningDescription"
+      );
+      downloadsWarningDescription.append(head, tailsLink, rest);
+
+      let dismissBtn = document.getElementById(
+        "downloadWarningDismiss"
+      );
+      dismissBtn.textContent = this._getString("torbutton.download.warning.dismiss");
+      dismissBtn.addEventListener("click", event => {
+        Services.prefs.setBoolPref(PREF_SHOW_DOWNLOAD_WARNING, false);
+        document.getElementById("downloadsWarning").hidden = true;
+        this._focusPanel(true);
+      });
+      this._torWarningInitialized = 1;
+    }
+
     DownloadsCommon.log(
       "DownloadsView attached - the panel for this window",
       "should now see download items come in."
@@ -530,8 +588,11 @@ var DownloadsPanel = {
   /**
    * Move focus to the main element in the downloads panel, unless another
    * element in the panel is already focused.
+   *
+   * @param {bool} [forceFocus=false] - Whether to force move the focus.
    */
-  _focusPanel() {
+  _focusPanel(forceFocus=false) {
+    if (!forceFocus) {
       // We may be invoked while the panel is still waiting to be shown.
       if (this._state != this.kStateShown) {
         return;
@@ -540,6 +601,8 @@ var DownloadsPanel = {
       if (document.activeElement && this.panel.contains(document.activeElement)) {
         return;
       }
+    }
+
     let focusOptions = { preventFocusRing: !!this._preventFocusRing };
     if (DownloadsView.richListBox.itemCount > 0) {
       DownloadsView.richListBox.selectedIndex = 0;
@@ -658,6 +721,30 @@ var DownloadsPanel = {
       }
     }, 0);
   },
+
+  /**
+   * Get a string from the properties bundle.
+   *
+   * @param {string} name - The string name.
+   *
+   * @return {string} The string.
+   */
+  _getString(name) {
+    if (!this._stringBundle) {
+      this._stringBundle = Services.strings.createBundle(
+        "chrome://torbutton/locale/torbutton.properties"
+      );
+    }
+    try {
+      return this._stringBundle.GetStringFromName(name);
+    } catch {}
+    if (!this._fallbackStringBundle) {
+      this._fallbackStringBundle = Services.strings.createBundle(
+        "resource://torbutton/locale/en-US/torbutton.properties"
+      );
+    }
+    return this._fallbackStringBundle.GetStringFromName(name);
+  },
 };
 
 XPCOMUtils.defineConstant(this, "DownloadsPanel", DownloadsPanel);

browser/components/downloads/content/downloadsPanel.inc.xhtml

@@ -124,6 +124,21 @@
                   disablekeynav="true">
 
     <panelview id="downloadsPanel-mainView">
+      <vbox id="downloadsWarning">
+        <vbox role="alert"
+              aria-labelledby="downloadsWarningHeaderTitle"
+              aria-describedby="downloadsWarningDescription">
+          <html:p id="downloadsWarningHeaderTitle"></html:p>
+          <html:p id="downloadsWarningDescription">
+          </html:p>
+
+          <html:div class="panel-footer">
+            <html:button id="downloadWarningDismiss">
+            </html:button>
+          </html:div>
+        </vbox>
+        <toolbarseparator />
+      </vbox>
       <vbox class="panel-view-body-unscrollable">
         <richlistbox id="downloadsListBox"
                      data-l10n-id="downloads-panel-items"

browser/themes/shared/customizableui/panelUI-shared.css

@@ -1324,6 +1324,7 @@ panelview .toolbarbutton-1 {
 #downloadsFooterButtons > toolbarseparator,
 .cui-widget-panelview menuseparator,
 .cui-widget-panel toolbarseparator,
+#downloadsWarning toolbarseparator,
 #securityLevel-panel toolbarseparator {
   appearance: none;
   min-height: 0;

browser/themes/shared/downloads/downloads.inc.css

@@ -258,6 +258,7 @@
 }
 
 /*** Toolbarseparator ***/
+#downloadsWarning toolbarseparator,
 #downloadsFooterButtons > toolbarseparator {
   margin-inline: 0;
 }