[tor-commits] [torbutton/master] Bug 27111: Update about:tor desktop version to work on mobile

Wed Nov 21 22:16:16 UTC 2018

commit 61deb44d0c07eb1ec1d71eac2f0a7aeca87ea054
Author: Igor Oliveira <igt0 at torproject.org>
Date:   Wed Aug 29 07:31:26 2018 -0300

    Bug 27111: Update about:tor desktop version to work on mobile
    
    Update torbutton, aboutTor(markup and styling) to work on mobile.
---
 src/chrome/content/aboutTor/aboutTor-content.js |   3 ++
 src/chrome/content/aboutTor/aboutTor.xhtml      |   2 ++
 src/chrome/content/torbutton.js                 |  23 +++++++++++----
 src/chrome/skin/aboutTor.css                    |  36 ++++++++++++++++++++++++
 src/chrome/skin/torbrowser_mobile_logo.png      | Bin 0 -> 9345 bytes
 5 files changed, 59 insertions(+), 5 deletions(-)

diff --git a/src/chrome/content/aboutTor/aboutTor-content.js b/src/chrome/content/aboutTor/aboutTor-content.js
index e8f5ffa2..d34bbe5c 100644
--- a/src/chrome/content/aboutTor/aboutTor-content.js
+++ b/src/chrome/content/aboutTor/aboutTor-content.js
@@ -119,6 +119,9 @@ var AboutTorListener = {
     else
       body.removeAttribute("showmanual");
 
+    if (aData.mobile)
+      body.setAttribute("mobile", "yes");
+
     // Setting body.initialized="yes" displays the body.
     body.setAttribute("initialized", "yes");
   },
diff --git a/src/chrome/content/aboutTor/aboutTor.xhtml b/src/chrome/content/aboutTor/aboutTor.xhtml
index 9256748e..94dd13f3 100644
--- a/src/chrome/content/aboutTor/aboutTor.xhtml
+++ b/src/chrome/content/aboutTor/aboutTor.xhtml
@@ -18,6 +18,7 @@
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
   <title>&aboutTor.title;</title>
   <link rel="stylesheet" type="text/css" media="all"
         href="resource://torbutton-assets/aboutTor.css"/>
@@ -73,6 +74,7 @@ window.addEventListener("pageshow", function() {
 </script>
   <div id="torstatus-version"/>
   <div class="torcontent-container">
+    <img class="torcontent-logo" src="resource://torbutton-assets/torbrowser_mobile_logo.png"/>
     <div id="torstatus" class="top">
       <div id="torstatus-on-container" class="hideIfTorOff torstatus-container">
         <div class="heading1">&aboutTor.ready.label;</div>
diff --git a/src/chrome/content/torbutton.js b/src/chrome/content/torbutton.js
index 90da5827..ee13f461 100644
--- a/src/chrome/content/torbutton.js
+++ b/src/chrome/content/torbutton.js
@@ -238,6 +238,10 @@ function torbutton_donation_banner_countdown() {
   }
 }
 
+function torbutton_is_mobile() {
+    return Services.appinfo.OS === "Android";
+}
+
 // Bug 1506 P2-P4: This code sets some version variables that are irrelevant.
 // It does read out some important environment variables, though. It is
 // called once per browser window.. This might belong in a component.
@@ -408,11 +412,19 @@ function torbutton_init() {
     torbutton_update_toolbutton();
     torbutton_notify_if_update_needed();
 
-    createTorCircuitDisplay(m_tb_control_ipc_file, m_tb_control_host,
-                            m_tb_control_port, m_tb_control_pass,
-                            "extensions.torbutton.display_circuit");
+    try {
+        createTorCircuitDisplay(m_tb_control_ipc_file, m_tb_control_host,
+                                m_tb_control_port, m_tb_control_pass,
+                               "extensions.torbutton.display_circuit");
+    } catch(e) {
+        torbutton_log(4, "Error creating the tor circuit display " + e);
+    }
 
-    torbutton_init_user_manual_links();
+    try {
+        torbutton_init_user_manual_links();
+    } catch(e) {
+        torbutton_log(4, "Error loading the user manual " + e);
+    }
 
     // Arrange for our about:tor content script to be loaded in each frame.
     window.messageManager.loadFrameScript(
@@ -449,6 +461,7 @@ var torbutton_abouttor_message_handler = {
   // not working.
   get chromeData() {
     return {
+      mobile: torbutton_is_mobile(),
       torOn: torbutton_tor_check_ok()
     };
   }
@@ -1932,7 +1945,7 @@ function showSecurityPreferencesPanel(chromeWindow) {
 }
 
 function setupPreferencesForMobile() {
-  if (Services.appinfo.OS !== "Android") {
+  if (!torbutton_is_mobile()) {
     return;
   }
 
diff --git a/src/chrome/skin/aboutTor.css b/src/chrome/skin/aboutTor.css
index 9f195cfd..60035a24 100644
--- a/src/chrome/skin/aboutTor.css
+++ b/src/chrome/skin/aboutTor.css
@@ -199,6 +199,8 @@ body:not([showmanual]) .showForManual {
   width: 100%;
   max-width: 2200px;    /* room for our 20 circles */
   overflow: hidden;
+  position: absolute;
+  bottom: 0px;
 }
 
 .onion-pattern-row {
@@ -395,3 +397,37 @@ body[show-donation-banner="true"] #onboarding-overlay-button {
   transition: transform 0ms;
   position: absolute;
 }
+
+/*
+ * Mobile specific css
+ */
+
+.torcontent-logo {
+  display: none;
+}
+
+body[mobile] #torstatus-version,
+body[mobile] .searchbox,
+body[mobile] .top .heading2,
+body[mobile] #bottom {
+  display: none;
+}
+
+body[mobile] .top {
+  white-space: normal;
+  margin-top: 0px !important;
+}
+
+body[mobile] .torcontent-logo {
+  display: block;
+  margin-top: 20px;
+  width: 50%;
+  height: auto;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+body[mobile] .top .heading1 {
+  font-size: 62px;
+  line-height: 1.1
+}
diff --git a/src/chrome/skin/torbrowser_mobile_logo.png b/src/chrome/skin/torbrowser_mobile_logo.png
new file mode 100644
index 00000000..9d8317f0
Binary files /dev/null and b/src/chrome/skin/torbrowser_mobile_logo.png differ



