816298 - Change "-moz-user-select:none" to behave like WebKit, IE, and Opera (and "-moz-user-select:-moz-none")

Status: RESOLVED FIXED

(Core :: DOM: CSS Object Model, defect)

Description

[Chris Peterson [:cpeterson]]

-moz-user-select [1] is not part of any W3C CSS spec, but some major websites are (mis)using it on their mobile websites: bug 814274, bug 799029.

Our -moz-user-select:none behaves as proposed in the css3-userint TR [2] but WebKit, IE, and Opera's "-XXX-user-select:none" behave like "-moz-user-select:-moz-none". Unfortunately, this causes problems for Twitter and Facebook on B2G and Android. Plus, Twitter's popular "Bootstrap" website template uses "-moz-user-select:none", thus spreading the bug to other websites.

I think this change in behavior should be pretty safe. The use case that would break is where an element has -moz-user-select:none, a sub-element has -moz-user-select:whatever, *and* the developer expects that the sub-element's -moz-user-select:whatever will be *ignored* (because of the parent element's "none"). And AFAIU, the breakage is simply that the sub-element's content might become selectable.

Firefox's chrome and some addons use "-moz-user-select:none", but it is hard to know whether they need or intended to use Firefox's unique behavior. If we want to be conservative, we could define a new -moz-user-select value (something like a "-moz-disabled"?) to preserve our current behavior for internal use.

* Firefox code uses any "-moz-user-select" 101 times in 44 files
* Firefox code uses "-moz-user-select: ?none" 59 times in 28 files
* Firefox code uses "-moz-user-select: ?-moz-none" 9 times in 5 files

Here are some numbers from AMO MXR (https://mxr.mozilla.org/addons/search):

9095 extensions hosted on AMO
~350 extensions use any "-moz-user-select"
~200 extensions use "-moz-user-select: ?none"
~100 extensions use "-moz-user-select: ?-moz-none"
 ~90 extensions use any "-webkit-user-select"
 ~80 extensions use "-webkit-user-select: ?none"
   1 extension uses any "-webkit-user-select: ?-moz-none"!! :) 

[1] https://developer.mozilla.org/en-US/docs/CSS/user-select
[2] http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select

Comment 1

[Chris Peterson [:cpeterson]]

Attachment: part-1-change-moz-user-select-none.patch

Part 1: Allow child elements to override -moz-user-select:none.

This patch allows -moz-user-select:none to be overriden by child elements with -moz-user-select:text. This matches the current behavior of -moz-none and WebKit, IE, and Opera's `none`.

Two important differences, that remain unchanged, between -moz-user-select:none (and -moz-none) and -webkit-user-select:none is the highlighting and copying of text. Would you like me to open another bug report for these differences?

* Gecko: CMD+A (or dragging a selection) will highlight all text, INCLUDING the `none` text.
* WebKit: CMD+A (or dragging a selection) will highlight the text surrounding a `none` span, but NOT the `none` text.

* Gecko: CMD+C will copy the text surrounding a `none` span, but NOT the `none` text. 
* WebKit: CMD+C will copy all text, INCLUDING the `none` text.

I feel that highlighting text we are not going to copy is misleading.

Someone filed a WebKit bug about WebKit copying `none` text, but the bug report has no resolution:

https://bugs.webkit.org/show_bug.cgi?id=80159

Comment 2

[Chris Peterson [:cpeterson]]

Attachment: part-2-remove-moz-user-select-moz-none.patch

Part 2: Replace Gecko's references to -moz-user-select:-moz-none with -moz-user-select:none, since they should be equivalent now.

Comment 3

[Chris Peterson [:cpeterson]]

If this change is accepted, the MDN docs will need to be updated:

https://developer.mozilla.org/en-US/docs/CSS/user-select

Comment 4

[Boris Zbarsky [:bzbarsky]]

Comment on attachment 703724 [details] [diff] [review]
part-1-change-moz-user-select-none.patch

Punting to someone who might know about this stuff...

Comment 5

[Chris Peterson [:cpeterson]]

Comment on attachment 703725 [details] [diff] [review]
part-2-remove-moz-user-select-moz-none.patch

CC'ing Neil for xul.css changes because "THIS FILE IS LOCKED DOWN.  YOU ARE NOT ALLOWED TO MODIFY IT WITHOUT FIRST HAVING YOUR CHANGES REVIEWED BY [e-mail]."

Comment 6

[(no longer active)]

Chris, sorry but I don't have enough time to review this today.  I will do that hopefully early next week.

Comment 7

[Chris Peterson [:cpeterson]]

btw, the unexpected highlighting of "-moz-user-select:none" text that we are not going to copy is a regression in Firefox 11. I filed bug 832514 to track that bug.

Comment 8

[(no longer active)]

I wish there was a way for us to know how many websites depend on -moz-none, so that we could potentially just remove it and only have the `none' semantics.  Oh, and did I mention I hate -vendor-user-select?  :(

Comment 9

[(no longer active)]

Comment on attachment 703724 [details] [diff] [review]
part-1-change-moz-user-select-none.patch

Review of attachment 703724 [details] [diff] [review]:
-----------------------------------------------------------------

r=me, but we should watch very closely for regressions...

Comment 10

[Chris Peterson [:cpeterson]]

https://hg.mozilla.org/integration/mozilla-inbound/rev/a4803bd24d5c
https://hg.mozilla.org/integration/mozilla-inbound/rev/d415e17d781e

Comment 11

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/a4803bd24d5c
https://hg.mozilla.org/mozilla-central/rev/d415e17d781e

Comment 12

[Chris Peterson [:cpeterson]]

I updated MDN's user-select page to say that, starting with Firefox 21, -moz-user-select:none will allow selection to be re-enabled on sub-elements using -moz-user-select:text.

I will leave the Facebook and Twitter evangelism bugs open because current Firefox versions (including B2G) have the old -moz-user-select:none behavior. :(

https://developer.mozilla.org/en-US/docs/CSS/user-select