Skip to content
Snippets Groups Projects
New look: Off

about:tor should work on small screens (mobile)

    • Closed (moved) Issue created by Igor Oliveira @igt0

    Right now the about:tor page doesn't render properly on mobile.

    To upload designs, you'll need to enable LFS and have an admin enable hashed storage. More information

    Child items 0

    • No child items are currently assigned. Use child items to break down this issue into smaller parts.

    Activity

    • Igor Oliveira added TorBrowserTeam201804R component::applications/tor browser owner::tbb-team parent::24855 priority::medium resolution::fixed severity::normal status::closed tbb-torbutton type::enhancement labels

      added TorBrowserTeam201804R component::applications/tor browser owner::tbb-team parent::24855 priority::medium resolution::fixed severity::normal status::closed tbb-torbutton type::enhancement labels

    • I
      Igor Oliveira @igt0 ·
      Author

      Trac:
      Parent: N/A to #24855 (moved)

    • Mark Smith
      Mark Smith @mcs ·

      That does not surprise me. If I remember correctly, the original about:tor HTML and CSS was contributed by a volunteer quite a few years ago. I am not sure if there is a ticket for it yet, but one of the UX team projects for 2018 is to redesign about:tor and work on an "onboarding" flow for our new users.

      Trac:
      Cc: N/A to brade, mcs

    • Georg Koppen
      Georg Koppen @gk ·

      Trac:
      Keywords: N/A deleted, tbb-torbutton added
      Component: Applications/Torbutton to Applications/Tor Browser
      Owner: N/A to tbb-team

    • I
      Igor Oliveira @igt0 ·
      Author

      As discussed in the weekly meeting(02/05). It would be interesting to make the current about:tor layout responsive while we are waiting for the new design.

      The code can be found here: bug 25126: Make about:tor layout responsive https://github.com/igortoliveira/tor-browser/commit/637076be7d34b9aed43715e862b2e14b0a3902a0

      and it depends of the #25013 (moved) patch set.

      Trac:
      Status: new to needs_review

    • I
      Igor Oliveira @igt0 ·
      Author

      Trac:
      abouttor-mobile320480

    • Mark Smith
      Mark Smith @mcs ·

      Trac:
      Keywords: N/A deleted, TorBrowserTeam201802R added

    • Georg Koppen
      Georg Koppen @gk ·

      Marking this as needs_revision as the #25013 (moved) needs to get revised as well.

      Trac:
      Status: needs_review to needs_revision
      Keywords: TorBrowserTeam201802R deleted, TorBrowserTeam201802 added

    • I
      Igor Oliveira @igt0 ·
      Author

      I updated the code:

      bug 25126: Make about:tor layout responsive https://github.com/igortoliveira/torbutton/commit/17b1d031bb64d4c4ad38ab35a1730cda18ac0664

      Trac:
      Status: needs_revision to needs_review

    • Georg Koppen
      Georg Koppen @gk ·

      Trac:
      Keywords: TorBrowserTeam201802 deleted, TorBrowserTeam201802R added

    • Georg Koppen
      Georg Koppen @gk ·

      Moving our reviews to March 2018

      Trac:
      Keywords: TorBrowserTeam201802R deleted, TorBrowserTeam201803R added

    • Georg Koppen
      Georg Koppen @gk ·

      mcs, brade: can you take a look at that one?

      Trac:
      Keywords: TorBrowserTeam201803R deleted, TorBrowserTeam201804R added

    • Mark Smith
      Mark Smith @mcs ·

      Kathy and I reviewed the changes and tested them using a desktop browser. We like the use of flexbox layout (very nice), but we found a few things that we should be fixed:

      • We could merge this now if it didn't depend on some earlier changes. It is also confusing that the patch "undoes" some earlier changes, so please make a new patch that does not depend on a35a746ca206706f4c5742d70bc90b649c1bfdf0 and 40682676e33570d464534adc07bf94acb36a76fe.
      • The class name container is very generic. Please replace it with a more specific name such as torstatus-container.
      • Removing .top from aboutTor.css causes the "WARNING: this browser is out of date." text to no longer be centered.
      • The fancy arrow that points to the toolbar item to encourage users to update their browser loses its horizontal tail when the browser window is at its default width. Somehow the div that has no id (that immediately follows the #torstatus div) is now wider than it used to be. This may be a consequence of the flexbox layout or just the adding of the .container div.

      Trac:
      Keywords: TorBrowserTeam201804R deleted, TorBrowserTeam201804 added
      Status: needs_review to needs_revision

    • I
      Igor Oliveira @igt0 ·
      Author

      Thanks Kathy and mcs. Indeed I rebased with the wrong branch. The patch bellow fixes all the issues described by you.

      bug 25126: Make about:tor layout responsive https://github.com/igortoliveira/torbutton/commit/d12165d161817573e59ca0b6effa5d5e8d5cafe0

      Replying to mcs:

      Kathy and I reviewed the changes and tested them using a desktop browser. We like the use of flexbox layout (very nice), but we found a few things that we should be fixed:

      • We could merge this now if it didn't depend on some earlier changes. It is also confusing that the patch "undoes" some earlier changes, so please make a new patch that does not depend on a35a746ca206706f4c5742d70bc90b649c1bfdf0 and 40682676e33570d464534adc07bf94acb36a76fe.
      • The class name container is very generic. Please replace it with a more specific name such as torstatus-container.
      • Removing .top from aboutTor.css causes the "WARNING: this browser is out of date." text to no longer be centered.
      • The fancy arrow that points to the toolbar item to encourage users to update their browser loses its horizontal tail when the browser window is at its default width. Somehow the div that has no id (that immediately follows the #torstatus div) is now wider than it used to be. This may be a consequence of the flexbox layout or just the adding of the .container div.

      Trac:
      Status: needs_revision to needs_review

    • Georg Koppen
      Georg Koppen @gk ·

      Trac:
      Keywords: TorBrowserTeam201804 deleted, TorBrowserTeam201804R added

    • Mark Smith
      Mark Smith @mcs ·

      This looks good, except we found one additional problem: using a fixed size for the bubble elements does not work for all languages. We tested by setting general.useragent.locale to de and found that the text extended below the bubble background. Kathy and I removed the height rule and that seemed to fix the problem, but maybe there is a better solution.

      Also, please update the year within the copyright notice of both files.

      Trac:
      Status: needs_review to needs_revision
      Keywords: TorBrowserTeam201804R deleted, TorBrowserTeam201804 added

    • I
      Igor Oliveira @igt0 ·
      Author

      Replying to mcs:

      This looks good, except we found one additional problem: using a fixed size for the bubble elements does not work for all languages. We tested by setting general.useragent.locale to de and found that the text extended below the bubble background. Kathy and I removed the height rule and that seemed to fix the problem, but maybe there is a better solution.

      In fact I think it is a good solution, thus the height of the higher bubble item will define the height of the parent element. I gave a try and tested in different languages and screen size, and looks good.

      Also, please update the year within the copyright notice of both files.

      nice catch, thanks.

      Updated code:

      bug 25126: Make about:tor layout responsive https://github.com/igortoliveira/torbutton/commit/bcc6dc11e5c9bed40ffe976ab93ec6da17ee33ea

      Trac:
      Status: needs_revision to needs_review
      Keywords: TorBrowserTeam201804 deleted, TorBrowserTeam201804R added

    • Mark Smith
      Mark Smith @mcs ·

      r=brade, r=mcs This looks good to us. It probably makes sense to test it in the desktop alpha before merging into stable though (Kathy and I only tested the new code on macOS so far).

    • C
      cypherpunks @cypherpunks ·

      Replying to igt0:

      https://github.com/igortoliveira/torbutton/commit/bcc6dc11e5c9bed40ffe976ab93ec6da17ee33ea tbb-team, open it with Safest and look at your CPU!

    • Georg Koppen
      Georg Koppen @gk ·

      Replying to igt0:

      Replying to mcs:

      This looks good, except we found one additional problem: using a fixed size for the bubble elements does not work for all languages. We tested by setting general.useragent.locale to de and found that the text extended below the bubble background. Kathy and I removed the height rule and that seemed to fix the problem, but maybe there is a better solution.

      In fact I think it is a good solution, thus the height of the higher bubble item will define the height of the parent element. I gave a try and tested in different languages and screen size, and looks good.

      Also, please update the year within the copyright notice of both files.

      nice catch, thanks.

      Updated code:

      bug 25126: Make about:tor layout responsive https://github.com/igortoliveira/torbutton/commit/bcc6dc11e5c9bed40ffe976ab93ec6da17ee33ea

      I get merge conflicts for some reason. Could you rebase your patch on latest master. Please use a new branch for that, thanks.

    • I
      Igor Oliveira @igt0 ·
      Author

      Here you go (25126-rebased branch):

      https://github.com/igortoliveira/torbutton/commit/703b228d75dfb0d7a44de4ad5a056406e44691e5

      Replying to gk:

      Replying to igt0:

      Replying to mcs:

      This looks good, except we found one additional problem: using a fixed size for the bubble elements does not work for all languages. We tested by setting general.useragent.locale to de and found that the text extended below the bubble background. Kathy and I removed the height rule and that seemed to fix the problem, but maybe there is a better solution.

      In fact I think it is a good solution, thus the height of the higher bubble item will define the height of the parent element. I gave a try and tested in different languages and screen size, and looks good.

      Also, please update the year within the copyright notice of both files.

      nice catch, thanks.

      Updated code:

      bug 25126: Make about:tor layout responsive https://github.com/igortoliveira/torbutton/commit/bcc6dc11e5c9bed40ffe976ab93ec6da17ee33ea

      I get merge conflicts for some reason. Could you rebase your patch on latest master. Please use a new branch for that, thanks.

    • Georg Koppen
      Georg Koppen @gk ·

      Thanks. Applied to master (commit fb8c46b3fb3e89b0fd182f87ba3139f5b31ad186).

      Trac:
      Resolution: N/A to fixed
      Status: needs_review to closed

    • Trac closed

      closed

    • Trac moved to tpo/applications/tor-browser#25126 (closed)

      moved to tpo/applications/tor-browser#25126 (closed)

    Please register or sign in to reply