Hi everyone, I'm trying to come up with a plan on how we should create a text selection/caret navigation UI for Firefox OS. On desktop platforms, we mimic the text selection/caret appearance and behavior of the underlying OS to a good extent (except on Mac OS X where we don't implement the direction-less selection and the native highlighting behavior dictated by the OS.) This has served us well throughout the years.
On Android, we implement our own text selection UI and try to mimic the behavior of native Android apps, but the UI doesn't work quite well there because of a number of issues (most notably that we bypass a lot of the code handling the text selection in Gecko.) I'm hoping that we can end up with a better story for Firefox OS. I've thought about various UX questions of this functionality, and I believe that we need answers to the following questions in order to come up with a detailed implementation plan. 1. For implementing a caret in plaintext fields (such as the location bar in the browser app for example, or text entry fields on web pages), we currently enable the native Gecko caret which appears as a blinking vertical line similar to how it shows up on desktop. This results in very poor interaction since our fingers are typically too large to target the exact location at which we want to place the caret. We also support dragging the caret to select text in those fields but that's very hard to do precisely as well (because of the issue of the size of our fingers, and also that the selection can only be extended from one side -- its end point.) We need to know if we want to handle these kinds of carets and text selection differently than what we'll do for web pages. 2. For implementing text selection on web pages, we need to know what the UI and the UX should look like. We can probably adopt something similar to what Android does there, by showing two handles representing the boundaries of the selection and allowing the selection to be extended by dragging either of them. In addition to deciding how this should look and how the interaction should work, we should also decide what we want to do with those selections. One possible use case might be dragging the selected content and dropping it, another might be supporting clipboard operations on the selected content. Or we may decide that we wouldn't want to expose these kinds of selections until when we have clipboard support, etc. 3. For selecting contentEditable content on web pages, I would expect that we would adopt the same design as #2, but in this case the selection will probably be mostly useful for deleting/replacing the selected content. 4. We also need to decide whether we want some kind of a special handling for apps. If we implement the generic text selection UI for all web content (apps and non-privileged content), the text selection will work in parts of the app UI, which may not be desired. We can probably leverage the -moz-user-select CSS property [1] to disable selection on parts of a page the same way that we can do that already on desktop. Is that good enough? 5. Do we want the appearance of the selection UI to be controllable from web content/apps? We already allow changing a few of the selection properties such as the color, background color, etc. through the ::-moz-selection CSS pseudo-element [2], but do we need more customizations, particularly about how the selection handles will look like? Most of these are UX issues. Jonas told me that the right person to talk to about this from a UX standpoint is Carrie who I've CCed on this email. But I'd also be interested to hear what others think about this here! Thanks in advance. [1] https://developer.mozilla.org/en-US/docs/Web/CSS/user-select [2] https://developer.mozilla.org/en-US/docs/Web/CSS/::selection Cheers, -- Ehsan <http://ehsanakhgari.org/> _______________________________________________ dev-b2g mailing list dev-b2g@lists.mozilla.org https://lists.mozilla.org/listinfo/dev-b2g
