Diffusion, Differential mobile layout broken when enabling file tree


#1

Observed Behavior:

Expected Behavior:
On small screens, Phabricator should show the file tree in a more useful way. Or should avoid attempting to show the file tree.

Phabricator Version:
secure.phabricator.com as of August 6 2018

Reproduction Steps:

  • In Phabricator, set Settings > Personal Settings > Diff Preferences > Show Filetree to ‘Enable Filetree’
  • View a diff from Diffusion or Differential on a mobile device like an iPhone. (In Safari, you can simulate such a device by choosing Develop > Enter Responsive Design Mode)

#2

This is probably upstreamable if someone has a chance to repro + file it before I get to it.


#3

would it be feasible to just add a @media rule hiding the file tree on narrow screens? I just got a couple of complaints from my users about this issue today…


#4

I can’t reproduce this.


#5

@epriestley ,

I thought I’d seen this when using my phone so went to investigate too…

I think you’ve fixed this fairly recently…

I run two different Phabricator instances (my backup one is more upto date than my production one)

Backup (doesn’t show the issue)

phabricator
671fe2ccc00db6f4b90bbd271121ff402d2ac9f1 (Mon, Aug 13) (branched from e5906f4e127eb9bba62397f1228fa5d01f52ce22 on origin)
arcanist
d9a4293ae734756823b4a3ca202f185c57f3e834 (Fri, Aug 3)
phutil
dd136d1c371211d2830d94933b6c3cb0afce7c46 (Sat, Aug 4)

Production (does show the issue)
phabricator
491bda467e53f939e3f67aa745cb8d9218a1c3d7 (Jun 23 2018) (branched from cac3dc4983c3671ba4ec841aac8efac10744a80c on origin)
arcanist
222800a86ed002c564e2760d6c5d9e93810b5b96 (Jun 20 2018)
phutil
4206849bb05b60f536a1c78e33adee68dac67aa9 (Jun 7 2018)

secure.phabricator.com (doesn’t show the issue)

@nick.hutchinson did you try updating Phabricator to something between 6th August and 13th August 2018)

Although I cannot see in the phabricator history something that might have fixed that

https://secure.phabricator.com/source/phabricator/history/master/

Hope this helps


#6

I’m still seeing this on secure.phabricator.com. It’s also observable on the desktop if you resize the browser window while the file bar is enabled.

I’ve put together a 20s screencast recorded a few moments ago to demonstrate: https://www.dropbox.com/s/3y0bsrdkc8ikhyz/Phabricator%20sidebar%20layout%20bug.mov?dl=0


#7

You know it works perfectly for me (with the tree on) on secure.phabricator.com (in Chrome at least) following your screencast example UNTIL I turn the tree off and on again, then it behaves as you show…UNTIL I refresh the page and it goes back to the correct behavior, now turn it off and on again with (SHIFT-F twice) and its broken again.


#8

UNTIL I turn the tree off and on again

I can reproduce it with these additional steps. Full reproduction steps for me are:

  1. Enable filetree.
  2. Visit a commit or revision page.
  3. Toggle filetree off.
  4. Toggle filetree on.
  5. Resize the page from wide to narrow.

I’m unable to reproduce it if the filetree hasn’t actually been turned on while the page was open (that is, step (4) is required), so I’m not sure how this could have actually affected any mobile devices. Looking back, no one said they actually experienced the issue on a phone: has anyone?


#9

Curiously, I don’t find it necessary to toggle the file tree on->off->on before the issue manifests. I see the issue if I perform steps 1-4 on a desktop, and replace step 5 with ‘Visit the same commit or revision page on an iPhone’.


#10

Resolved by the 2018-W35 update. Thanks!