Bug 1491811 - Rules: replace custom checkbox with -moz-appearance:checkbox r=fvsch

***
Bug 1491811 - Get screenshots of Rule View with native checkboxes

Differential Revision: https://phabricator.services.mozilla.com/D49305

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/rules/components/Declaration.js

@@ -38,7 +38,7 @@ class Declaration extends PureComponent {
     this.valueSpanRef = createRef();
 
     this.onComputedExpanderClick = this.onComputedExpanderClick.bind(this);
-    this.onToggleDeclarationClick = this.onToggleDeclarationClick.bind(this);
+    this.onToggleDeclarationChange = this.onToggleDeclarationChange.bind(this);
   }
 
   componentDidMount() {
@@ -90,7 +90,7 @@ class Declaration extends PureComponent {
     });
   }
 
-  onToggleDeclarationClick(event) {
+  onToggleDeclarationChange(event) {
     event.stopPropagation();
     const { id, ruleId } = this.props.declaration;
     this.props.onToggleDeclaration(ruleId, id);
@@ -236,12 +236,12 @@ class Declaration extends PureComponent {
       { className: declarationClassName },
       dom.div(
         { className: "ruleview-propertycontainer" },
-        dom.div({
-          className:
-            "ruleview-enableproperty theme-checkbox" +
-            (isEnabled ? " checked" : ""),
-          onClick: this.onToggleDeclarationClick,
-          tabIndex: -1,
+        dom.input({
+          type: "checkbox",
+          className: "ruleview-enableproperty",
+          checked: isEnabled,
+          onChange: this.onToggleDeclarationChange,
+          "aria-labelledby": this.props.declaration.id,
         }),
         dom.span(
           { className: "ruleview-namecontainer" },
@@ -250,6 +250,7 @@ class Declaration extends PureComponent {
               className: "ruleview-propertyname theme-fg-color3",
               ref: this.nameSpanRef,
               tabIndex: 0,
+              id: this.props.declaration.id,
             },
             name
           ),

devtools/client/inspector/rules/views/rule-editor.js

@@ -253,7 +253,15 @@ RuleEditor.prototype = {
         this._ruleViewIsEditing = this.ruleView.isEditing;
       });
 
-      code.addEventListener("click", () => {
+      code.addEventListener("click", event => {
+        // Bail if this is a checkbox because an editor is not necessary.
+        if (
+          event.target.localName === "input" &&
+          event.target.type === "checkbox"
+        ) {
+          return;
+        }
+
         const selection = this.doc.defaultView.getSelection();
         if (selection.isCollapsed && !this._ruleViewIsEditing) {
           this.newProperty();

devtools/client/inspector/rules/views/text-property-editor.js

@@ -111,7 +111,7 @@ function TextPropertyEditor(ruleEditor, property) {
   this.getGridlineNames = this.getGridlineNames.bind(this);
   this.update = this.update.bind(this);
   this.updatePropertyState = this.updatePropertyState.bind(this);
-  this._onEnableClicked = this._onEnableClicked.bind(this);
+  this._onEnableChanged = this._onEnableChanged.bind(this);
   this._onExpandClicked = this._onExpandClicked.bind(this);
   this._onNameDone = this._onNameDone.bind(this);
   this._onStartEditing = this._onStartEditing.bind(this);
@@ -159,9 +159,10 @@ TextPropertyEditor.prototype = {
     });
 
     // The enable checkbox will disable or enable the rule.
-    this.enable = createChild(this.container, "div", {
-      class: "ruleview-enableproperty theme-checkbox",
-      tabindex: "-1",
+    this.enable = createChild(this.container, "input", {
+      type: "checkbox",
+      class: "ruleview-enableproperty",
+      "aria-labelledby": this.prop.id,
     });
 
     this.nameContainer = createChild(this.container, "span", {
@@ -173,6 +174,7 @@ TextPropertyEditor.prototype = {
     this.nameSpan = createChild(this.nameContainer, "span", {
       class: "ruleview-propertyname theme-fg-color3",
       tabindex: this.ruleEditor.isEditable ? "0" : "-1",
+      id: this.prop.id,
     });
 
     appendText(this.nameContainer, ": ");
@@ -243,7 +245,7 @@ TextPropertyEditor.prototype = {
 
     // Only bind event handlers if the rule is editable.
     if (this.ruleEditor.isEditable) {
-      this.enable.addEventListener("click", this._onEnableClicked, true);
+      this.enable.addEventListener("change", this._onEnableChanged, true);
 
       this.nameContainer.addEventListener("click", event => {
         // Clicks within the name shouldn't propagate any further.
@@ -913,7 +915,7 @@ TextPropertyEditor.prototype = {
   /**
    * Handles clicks on the disabled property.
    */
-  _onEnableClicked: function(event) {
+  _onEnableChanged: function(event) {
     const checked = this.enable.hasAttribute("checked");
     if (checked) {
       this.enable.removeAttribute("checked");

devtools/client/themes/common.css

@@ -659,37 +659,6 @@ checkbox:-moz-focusring {
   visibility: hidden;
 }
 
-.theme-checkbox {
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-  border: 0;
-  padding: 0;
-  outline: none;
-  background-image: url("chrome://devtools/skin/images/checkbox.svg");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 14px 14px;
-  /* Using fill to paint the border, and stroke for the tick */
-  -moz-context-properties: fill, stroke;
-  fill: rgba(0,0,0,.3);
-  stroke: transparent;
-}
-
-.theme-dark .theme-checkbox {
-  fill: rgba(255,255,255,.4);
-}
-
-.theme-checkbox.checked,
-.theme-checkbox[checked] {
-  stroke: rgba(0,0,0,.6);
-}
-
-.theme-dark .theme-checkbox.checked,
-.theme-dark .theme-checkbox[checked] {
-  stroke: rgba(255,255,255,.8);
-}
-
 /* Throbbers */
 .devtools-throbber::before {
   content: "";

devtools/client/themes/rules.css

@@ -345,11 +345,58 @@
 
 .ruleview-enableproperty {
   position: relative;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+:root[platform="mac"] .ruleview-enableproperty {
+  left: -29px;
+  box-sizing: border-box;
+  margin-inline-start: 3px;
+  margin-inline-end: 9px;
+  width: 12px;
+  height: 12px;
+}
+
+/* The SVG checkbox on Windows and Linux */
+:root[platform="win"] .ruleview-enableproperty,
+:root[platform="linux"] .ruleview-enableproperty {
+  -moz-appearance: none;
   float: left;
-  left: -38px;
+  left: -27px;
   box-sizing: content-box;
-  border-left: 10px solid transparent;
-  background-clip: content-box;
+  margin-inline-start: 0;
+  margin-inline-end: 10px;
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 0;
+  padding: 0;
+  outline: none;
+  background: url("chrome://devtools/skin/images/checkbox.svg") center no-repeat content-box;
+  /* Using fill to paint the border, and stroke for the tick */
+  -moz-context-properties: fill, stroke;
+  fill: rgba(0,0,0,.3);
+  stroke: transparent;
+}
+
+:root[platform="win"].theme-dark .ruleview-enableproperty,
+:root[platform="linux"].theme-dark .ruleview-enableproperty {
+  fill: rgba(255,255,255,.4);
+}
+
+:root[platform="win"] .ruleview-enableproperty[checked],
+:root[platform="linux"] .ruleview-enableproperty[checked] {
+  stroke: rgba(0,0,0,.6);
+}
+
+:root[platform="win"].theme-dark .ruleview-enableproperty[checked],
+:root[platform="linux"].theme-dark .ruleview-enableproperty[checked] {
+  stroke: rgba(255,255,255,.8);
+}
+
+:root[platform="mac"] .ruleview-enableproperty {
+  -moz-appearance: checkbox;
 }
 
 .ruleview-warning,
@@ -378,8 +425,10 @@
   stroke: var(--theme-icon-color);
 }
 
-.ruleview-rule:not(:hover) .ruleview-enableproperty {
-  visibility: hidden;
+.ruleview-rule:not(:hover) .ruleview-enableproperty:not(:focus) {
+  /* Use opacity to hide the checkbox instead of visibility:hidden,
+     so that it's possible to focus it with the keyboard. */
+  opacity: 0;
 }
 
 .ruleview-expander {