Diffusion, Differential mobile layout broken when enabling file tree


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)


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


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…


I can’t reproduce this.


@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)

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

Production (does show the issue)
491bda467e53f939e3f67aa745cb8d9218a1c3d7 (Jun 23 2018) (branched from cac3dc4983c3671ba4ec841aac8efac10744a80c on origin)
222800a86ed002c564e2760d6c5d9e93810b5b96 (Jun 20 2018)
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


Hope this helps


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


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.


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?


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’.


Resolved by the 2018-W35 update. Thanks!