commit 8057989d2d37edcce8cc3bf04e6a145d19440be6 Author: Arthur Edelstein <arthuredelstein@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) {