Bug 1538648 - Ensure buttons don't have a selection highlight. r=pbro
authorRazvan Caliman <rcaliman@mozilla.com>
Thu, 25 Apr 2019 14:41:10 +0000
changeset 530133 f482629843e0efab24362571669131e4a43728f6
parent 530132 48eeeb94b5c2a246fdd78cf445a903b58716e825
child 530134 d1240d47e791648b1fafa798373ae12df02ea285
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1538648, 1546366
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1538648 - Ensure buttons don't have a selection highlight. r=pbro Button elements are not user-selectable by default as defined by User Agent stylesheet defaults: https://www.w3.org/TR/css-ui-4/#issue-74a40dd9 However, by using the Selection.selectAllChildren() API, button elements do get a selection highlight (their text contents don't get copied to the clipboard; that is expected). See Bug 1546366. Until bug 1546366 is addressed, this patch ensures that button elements in DevTools never get a selection highlight by unsetting any applied styles with the `::selection` pseudo-element. Differential Revision: https://phabricator.services.mozilla.com/D28627
devtools/client/themes/common.css
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -86,16 +86,21 @@ html|button, html|select, html|input {
   font-size: var(--theme-body-font-size);
 }
 
 /* Devtools rely on the old Gecko/HTML4 button hit testing */
 html|button > * {
   pointer-events: none;
 }
 
+/* Prevent buttons from having a text selection highlight. Bug 1546366 */
+button::selection {
+  all: unset;
+}
+
 /* Autocomplete Popup */
 .devtools-autocomplete-popup {
   overflow: hidden;
 
   /* Devtools autocompletes display technical english keywords and should be displayed
      using LTR direction. */
   direction: ltr !important;
 }