[tor-commits] [torbutton/master] Bug 24309: Fix identity popup dimensions

gk at torproject.org gk at torproject.org
Wed May 23 07:49:03 UTC 2018


commit 8057989d2d37edcce8cc3bf04e6a145d19440be6
Author: Arthur Edelstein <arthuredelstein at gmail.com>
Date:   Tue May 22 10:04:37 2018 -0700

    Bug 24309: Fix identity popup dimensions
    
    On some OSes relay lines are wrapping and the doorhanger is sometimes
    rendering too small to show everything inside. We avoid the line
    wrapping and resize the identity popup where needed.
---
 src/chrome/content/tor-circuit-display.js | 43 +++++++++++++++++++++++++++++++
 src/chrome/skin/tor-circuit-display.css   |  1 +
 2 files changed, 44 insertions(+)

diff --git a/src/chrome/content/tor-circuit-display.js b/src/chrome/content/tor-circuit-display.js
index cbea569..5bd02bc 100644
--- a/src/chrome/content/tor-circuit-display.js
+++ b/src/chrome/content/tor-circuit-display.js
@@ -392,6 +392,44 @@ let setupGuardNote = function () {
                learnMoreString]]);
 };
 
+// __ensureCorrectPopupDimensions()__.
+// Make sure the identity popup always displays with the correct height.
+let ensureCorrectPopupDimensions = function () {
+  let setDimensions = () => {
+    setTimeout(() => {
+      let view = document.querySelector("#identity-popup-multiView .panel-viewcontainer");
+      let stack = document.querySelector("#identity-popup-multiView .panel-viewstack");
+      let view2 = document.getElementById("identity-popup-mainView");
+      if (view && stack && view2) {
+        let newWidth = Math.max(...[...view2.children].map(el => el.clientWidth)) + 10;
+        let newHeight = stack.clientHeight;
+        stack.setAttribute("width", newWidth);
+        view2.style.minWidth = view2.style.maxWidth = newWidth + "px";
+        view.setAttribute("width", newWidth);
+        view.setAttribute("height", newHeight);
+      }
+    }, 0);
+  };
+  let removeDimensions = () => {
+    let view = document.querySelector("#identity-popup-multiView .panel-viewcontainer");
+    let stack = document.querySelector("#identity-popup-multiView .panel-viewstack");
+    let view2 = document.getElementById("identity-popup-mainView");
+    if (view && stack && view2) {
+      view.removeAttribute("width");
+      view.removeAttribute("height");
+      stack.removeAttribute("width");
+      view2.style.minWidth = view2.style.maxWidth = "";
+    }
+  };
+  let popupMenu = document.getElementById("identity-popup");
+  popupMenu.addEventListener("popupshowing", setDimensions);
+  popupMenu.addEventListener("popuphiding", removeDimensions);
+  return () => {
+    popupMenu.removeEventListener("popupshowing", setDimensions);
+    popupMenu.removeEventListener("popuphiding", removeDimensions);
+  };
+};
+
 // ## Main function
 
 // __setupDisplay(ipcFile, host, port, password, enablePrefName)__.
@@ -403,6 +441,7 @@ let setupDisplay = function (ipcFile, host, port, password, enablePrefName) {
   let myController = null,
       stopCollectingIsolationData = null,
       stopCollectingBrowserCredentials = null,
+      stopEnsuringCorrectPopupDimensions = null,
       stop = function() {
         syncDisplayWithSelectedTab(false);
         if (myController) {
@@ -412,6 +451,9 @@ let setupDisplay = function (ipcFile, host, port, password, enablePrefName) {
           if (stopCollectingBrowserCredentials) {
             stopCollectingBrowserCredentials();
           }
+          if (stopEnsuringCorrectPopupDimensions) {
+            stopEnsuringCorrectPopupDimensions();
+          }
           myController = null;
         }
       },
@@ -428,6 +470,7 @@ let setupDisplay = function (ipcFile, host, port, password, enablePrefName) {
           syncDisplayWithSelectedTab(true);
           stopCollectingIsolationData = collectIsolationData(myController, updateCircuitDisplay);
           stopCollectingBrowserCredentials = collectBrowserCredentials();
+          stopEnsuringCorrectPopupDimensions = ensureCorrectPopupDimensions();
        }
      };
   try {
diff --git a/src/chrome/skin/tor-circuit-display.css b/src/chrome/skin/tor-circuit-display.css
index 71c283c..640d595 100644
--- a/src/chrome/skin/tor-circuit-display.css
+++ b/src/chrome/skin/tor-circuit-display.css
@@ -62,6 +62,7 @@ ul#circuit-display-nodes li {
   background-repeat: no-repeat;
   list-style: none;
   padding-inline-start: 1.5em;
+  white-space: nowrap;
 }
 
 ul#circuit-display-nodes li:-moz-locale-dir(rtl) {



More information about the tor-commits mailing list