Unable to edit file on mobile

When viewing a file from a Nexus 5X device you cannot view the edit button.

If you manually navigate to the edit page vertical and horizontal scrolling within the edit box do not work.

UX Proposal

Let's get the text editing experience feeling better on mobile. Things to consider:

• Don't scroll to top when editing on mobile #26164
• Make text selection work well
• Investigate: Additionally there is strange behavior when you edit a file from a mobile browser. In my case, the caps/shift "up arrow" (Google keyboard) also performs a backspace some times when it is pressed. This only happens when editing a file, not in for example the comment text box.
• Investigate: Sometimes the cursor jumps while editing text.
• Investigate: avoiding auto-zoom; restoring the ability to move around the text with both touch-and-drag and keyboard 3D-touch; and most importantly, making sure edits still work after changing the text position with a single tap (currently, only back spacing works after doing this, until you unfocus and refocus the textarea) Once we are feeling good about this, we should make sure it is easy to access the Edit button.
• Add edit button to mobile file view https://gitlab.com/gitlab-org/gitlab-ce/issues/28377

I am also having this issue on Chrome/Galaxy S7. The only file I seem to be able to edit is the master/readme.md from the project home page.

I can edit files from the browser just fine from chrome on my PC when signed in as the same user.

Additionally there is strange behavior when you edit a file from a mobile browser. In my case, the caps/shift "up arrow" (Google keyboard) also performs a backspace each time it is pressed.

This only happens when editing a file, not in for example this very text box.

Sometimes the cursor jumps while editing text.

Error is also visible on iPhones as well. Entering desktop mode does not change the situation.

Added frontend in GitLab FOSS label

/cc @jschatz1 @iamphill @fatihacet @alfredo1

This probably was fixed with https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/3823 That MR updated Ace editor which fixed scrolling on touch devices.

I can't repro this on gitlab.com and I can edit on iPhone.

edit: I missunderstood the issue at first. But yes the actions for files are hidden on mobile. Any thoughts on this @dzaporozhets?

@alfredo1 probably because its unusable or does not work properly in mobile browsers.

@alfredo1 if we can make edit work for mobile easily - then we can show edit button. Otherwise keep it hidden

Edit works fine on mobile other than weird shift key issue noted above.

Editing on iPhone (tested in Safari and Chrome) is a bit of touch-and-go but you can generally make it work. There's a lot of room for improvement though: avoiding auto-zoom; restoring the ability to move around the text with both touch-and-drag and keyboard 3D-touch; and most importantly, making sure edits still work after changing the text position with a single tap (currently, only back spacing works after doing this, until you unfocus and refocus the textarea). If the last of these issues was able to be resolved I'd say it would be fine to include the edit buttons? I haven't tested on Android though.

added ~12980 label

changed milestone to %8.15 in gitlab-foss

@awhildy @sarahod should we test the usability of these editing screens? I mean we can def fix this up to be better but editing on iphone might always be a little painful. Is there a better UX way in the future?

@jschatz1 It would be good to get an understanding of how many users are accessing GitLab on a mobile device and what sort of tasks they're trying to perform. I had a look in Piwik, I'm not sure how reliable the data is, but over the last 2 weeks, mobile traffic accounted for 4% of visits so it isn't much. I'm not sure it warrants building something into our process which always checks how things are displayed on a mobile device. Having said that, once we know what users are doing on mobile devices, we could just ensure the journeys to complete these specific tasks are optimised for both desktop and mobile devices.

mentioned in issue gitlab-foss#20533 (closed)

mentioned in issue gitlab-foss#22017 (closed)

changed milestone to %8.16 in gitlab-foss

added ~19492 ~902455 labels

@sarahod are you taking this issue on? :)

mentioned in issue gitlab-foss#26166 (moved)

mentioned in issue gitlab-foss#26164 (moved)

I'm not sure we need explicit user testing at this point. It feels more like we need someone to sit down and list out all the broken experiences (like what @tdmalone did) and create issues. We don't have a specific question to answer, we just need a list of fixes that are pretty clear from playing with it. From there, we can user test and see what we missed. But at this point, I feel like the bugs are obvious from use.

I just created gitlab-foss#26164 (moved) from playing around with it myself. I also created gitlab-foss#26166 (moved) for the larger question of what we should optimize the GitLab mobile experience for. That might be a space @sarahod can dig into a little more.

With that in mind @awhildy, should we pass this specific issue to frontend to fix?

Agreed @tauriedavis. Added notes of things to investigate to the description.

removed ~19492 ~902455 labels

@awhildy Looks like this issue has expanded quite a bit .. Should we consider the issues/notes you added to the description ready to work on (8.16?)? I'd be glad to take them if they're a priority.

changed milestone to %Backlog in gitlab-foss

Thanks @brycepj! I don't think this is currently a priority for the current release, but thanks so much for jumping in. Will try and get this scheduled for a release. However, it is probably going to have to wait until after 9.0. Not that I would stop anyone from working on it , I just know there is a lot going on.

@sarahod I don't think the current Piwik data is really good to base mobile decisions off of. Since the mobile experience currently is poor most people will only try once and then never come back on mobile.

This issue seems to have become somewhat bloated since I originally created the issue, with some discussion about the mobile experience in general coming into play which is not this issue. It'd be nice if the most basic issue of the edit button missing could be fix since it's now been 10 months since I filed the issue. Sure other bugs exist as noted in the description but they are less common to affect a user than the edit button completely missing.

marked the task Investigate: avoiding auto-zoom; restoring the ability to move around the text with both touch-and-drag and keyboard 3D-touch; and most importantly, making sure edits still work after changing the text position with a single tap (currently, only back spacing works after doing this, until you unfocus and refocus the textarea) as completed

marked the task Investigate: Sometimes the cursor jumps while editing text. as completed

mentioned in issue gitlab-foss#28377 (moved)

I marked some tasks off that no longer appear to need addressing. Additionally I created a new issue for adding the edit button specifically: https://gitlab.com/gitlab-org/gitlab-ce/issues/28377

Fyi I came across this whilst googling why I can't edit on my mobile. As mentioned I would give up and not try, but it is the only device I have right now to make a quick fix on.

@JobV can you have a look at this?

We should be able to do this quickly.

changed milestone to %9.5 in gitlab-foss

Temporary workaround

You can type edit url manually, editor will work somehow. Just open file you want to edit and in url rewrite blob to edit.

moved from gitlab-foss#15350 (moved)