Bug 1523305 - Show Font Editor in read-only mode for pseudo-elements. r=gl

Adds a new `disabled` property to the Font Editor Redux store applicable to all input fields.
When inspecting a pseudo-element, this `disabled` property is set to true.
This allows the pseudo-element to be inspected, but prevents editing font property values because it's currently not possible to write them back to CSS rules other than element inline styles.

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

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

devtools/client/inspector/fonts/actions/font-editor.js

@@ -7,6 +7,7 @@
 const {
   APPLY_FONT_VARIATION_INSTANCE,
   RESET_EDITOR,
+  SET_FONT_EDITOR_DISABLED,
   UPDATE_AXIS_VALUE,
   UPDATE_CUSTOM_INSTANCE,
   UPDATE_EDITOR_STATE,
@@ -22,6 +23,13 @@ module.exports = {
     };
   },
 
+  setEditorDisabled(disabled = false) {
+    return {
+      type: SET_FONT_EDITOR_DISABLED,
+      disabled,
+    };
+  },
+
   applyInstance(name, values) {
     return {
       type: APPLY_FONT_VARIATION_INSTANCE,

devtools/client/inspector/fonts/actions/index.js

@@ -7,25 +7,24 @@
 const { createEnum } = require("devtools/client/shared/enum");
 
 createEnum([
-
-  // Update the custom font variation instance with the current axes values.
-  "UPDATE_CUSTOM_INSTANCE",
-
   // Reset font editor to intial state.
   "RESET_EDITOR",
 
+  // Set the font editor disabled state which prevents users from interacting with inputs.
+  "SET_FONT_EDITOR_DISABLED",
+
   // Apply the variation settings of a font instance.
   "APPLY_FONT_VARIATION_INSTANCE",
 
+  // Update the custom font variation instance with the current axes values.
+  "UPDATE_CUSTOM_INSTANCE",
+
   // Update the value of a variable font axis.
   "UPDATE_AXIS_VALUE",
 
   // Update font editor with applicable fonts and user-defined CSS font properties.
   "UPDATE_EDITOR_STATE",
 
-  // Toggle the visibiltiy of the font editor
-  "UPDATE_EDITOR_VISIBILITY",
-
   // Update the list of fonts.
   "UPDATE_FONTS",
 

devtools/client/inspector/fonts/components/FontAxis.js

@@ -15,6 +15,7 @@ class FontAxis extends PureComponent {
   static get propTypes() {
     return {
       axis: PropTypes.shape(Types.fontVariationAxis),
+      disabled: PropTypes.bool.isRequired,
       onChange: PropTypes.func.isRequired,
       value: PropTypes.string.isRequired,
     };
@@ -51,6 +52,7 @@ class FontAxis extends PureComponent {
 
     return FontPropertyValue({
       className: "font-control-axis",
+      disabled: this.props.disabled,
       label: axis.name,
       min: axis.minValue,
       minLabel: true,

devtools/client/inspector/fonts/components/FontEditor.js

@@ -54,6 +54,7 @@ class FontEditor extends PureComponent {
       return FontAxis({
         key: axis.tag,
         axis,
+        disabled: this.props.fontEditor.disabled,
         onChange: this.props.onPropertyChange,
         minLabel: true,
         maxLabel: true,
@@ -143,6 +144,7 @@ class FontEditor extends PureComponent {
   renderFontSize(value) {
     return value !== null && FontSize({
       key: `${this.props.fontEditor.id}:font-size`,
+      disabled: this.props.fontEditor.disabled,
       onChange: this.props.onPropertyChange,
       value,
     });
@@ -151,6 +153,7 @@ class FontEditor extends PureComponent {
   renderLineHeight(value) {
     return value !== null && LineHeight({
       key: `${this.props.fontEditor.id}:line-height`,
+      disabled: this.props.fontEditor.disabled,
       onChange: this.props.onPropertyChange,
       value,
     });
@@ -159,6 +162,7 @@ class FontEditor extends PureComponent {
   renderFontStyle(value) {
     return value && FontStyle({
       onChange: this.props.onPropertyChange,
+      disabled: this.props.fontEditor.disabled,
       value,
     });
   }
@@ -166,6 +170,7 @@ class FontEditor extends PureComponent {
   renderFontWeight(value) {
     return value !== null && FontWeight({
       onChange: this.props.onPropertyChange,
+      disabled: this.props.fontEditor.disabled,
       value,
     });
   }

devtools/client/inspector/fonts/components/FontPropertyValue.js

@@ -24,6 +24,7 @@ class FontPropertyValue extends PureComponent {
       autoIncrement: PropTypes.bool,
       className: PropTypes.string,
       defaultValue: PropTypes.number,
+      disabled: PropTypes.bool.isRequired,
       label: PropTypes.string.isRequired,
       min: PropTypes.number.isRequired,
       // Whether to show the `min` prop value as a label.
@@ -375,12 +376,13 @@ class FontPropertyValue extends PureComponent {
     return dom.select(
       {
         className: "font-value-select",
+        disabled: this.props.disabled,
         onChange: this.onUnitChange,
+        value: this.props.unit,
       },
       options.map(unit => {
         return dom.option(
           {
-            selected: unit === this.props.unit,
             value: unit,
           },
           unit
@@ -450,6 +452,7 @@ class FontPropertyValue extends PureComponent {
         onMouseMove: this.onMouseMove,
         onMouseUp: this.onMouseUp,
         className: "font-value-slider",
+        disabled: this.props.disabled,
         name: this.props.name,
         title: this.props.label,
         type: "range",
@@ -463,6 +466,7 @@ class FontPropertyValue extends PureComponent {
         max: this.props.autoIncrement ? null : this.props.max,
         name: this.props.name,
         className: "font-value-input",
+        disabled: this.props.disabled,
         type: "number",
       }
     );
@@ -470,6 +474,7 @@ class FontPropertyValue extends PureComponent {
     return dom.label(
       {
         className: `font-control ${this.props.className}`,
+        disabled: this.props.disabled,
       },
       dom.div(
         {

devtools/client/inspector/fonts/components/FontSize.js

@@ -15,6 +15,7 @@ const { getUnitFromValue, getStepForUnit } = require("../utils/font-utils");
 class FontSize extends PureComponent {
   static get propTypes() {
     return {
+      disabled: PropTypes.bool.isRequired,
       onChange: PropTypes.func.isRequired,
       value: PropTypes.string.isRequired,
     };
@@ -59,6 +60,7 @@ class FontSize extends PureComponent {
 
     return FontPropertyValue({
       autoIncrement: true,
+      disabled: this.props.disabled,
       label: getStr("fontinspector.fontSizeLabel"),
       min: 0,
       max: this.historicMax[unit],

devtools/client/inspector/fonts/components/FontStyle.js

@@ -13,6 +13,7 @@ const { getStr } = require("../utils/l10n");
 class FontStyle extends PureComponent {
   static get propTypes() {
     return {
+      disabled: PropTypes.bool.isRequired,
       onChange: PropTypes.func.isRequired,
       value: PropTypes.string.isRequired,
     };
@@ -47,6 +48,7 @@ class FontStyle extends PureComponent {
           {
             checked: this.props.value === "italic" || this.props.value === "oblique",
             className: "devtools-checkbox-toggle",
+            disabled: this.props.disabled,
             name: this.name,
             onChange: this.onToggle,
             type: "checkbox",

devtools/client/inspector/fonts/components/FontWeight.js

@@ -14,6 +14,7 @@ const { getStr } = require("../utils/l10n");
 class FontWeight extends PureComponent {
   static get propTypes() {
     return {
+      disabled: PropTypes.bool.isRequired,
       onChange: PropTypes.func.isRequired,
       value: PropTypes.string.isRequired,
     };
@@ -21,6 +22,7 @@ class FontWeight extends PureComponent {
 
   render() {
     return FontPropertyValue({
+      disabled: this.props.disabled,
       label: getStr("fontinspector.fontWeightLabel"),
       min: 100,
       max: 900,

devtools/client/inspector/fonts/components/LineHeight.js

@@ -15,6 +15,7 @@ const { getUnitFromValue, getStepForUnit } = require("../utils/font-utils");
 class LineHeight extends PureComponent {
   static get propTypes() {
     return {
+      disabled: PropTypes.bool.isRequired,
       onChange: PropTypes.func.isRequired,
       value: PropTypes.string.isRequired,
     };
@@ -62,6 +63,7 @@ class LineHeight extends PureComponent {
 
     return FontPropertyValue({
       autoIncrement: true,
+      disabled: this.props.disabled,
       label: getStr("fontinspector.lineHeightLabelCapitalized"),
       min: 0,
       max: this.historicMax[unit],

devtools/client/inspector/fonts/fonts.js

@@ -25,11 +25,11 @@ const { updateFonts } = require("./actions/fonts");
 const {
   applyInstance,
   resetFontEditor,
+  setEditorDisabled,
   updateAxis,
   updateCustomInstance,
   updateFontEditor,
   updateFontProperty,
-  updateWarningMessage,
 } = require("./actions/font-editor");
 const { updatePreviewText } = require("./actions/font-options");
 
@@ -549,8 +549,7 @@ class FontInspector {
     return this.inspector &&
            this.inspector.selection.nodeFront &&
            this.inspector.selection.isConnected() &&
-           this.inspector.selection.isElementNode() &&
+           this.inspector.selection.isElementNode();
-           !this.inspector.selection.isPseudoElementNode();
   }
 
   /**
@@ -794,13 +793,6 @@ class FontInspector {
    */
   async refreshFontEditor() {
     if (!this.store || !this.isSelectedNodeValid()) {
-      if (this.inspector.selection.isPseudoElementNode()) {
-        const noPseudoWarning = getStr("fontinspector.noPseduoWarning");
-        this.store.dispatch(resetFontEditor());
-        this.store.dispatch(updateWarningMessage(noPseudoWarning));
-        return;
-      }
-
       // If the selection is a TextNode, switch selection to be its parent node.
       if (this.inspector.selection.isTextNode()) {
         const selection = this.inspector.selection;
@@ -865,6 +857,9 @@ class FontInspector {
     });
 
     this.store.dispatch(updateFontEditor(fonts, properties, node.actorID));
+    const isPseudo = this.inspector.selection.isPseudoElementNode();
+    this.store.dispatch(setEditorDisabled(isPseudo));
+
     this.inspector.emit("fonteditor-updated");
     // Listen to manual changes in the Rule view that could update the Font Editor state
     this.ruleView.on("property-value-updated", this.onRulePropertyUpdated);

devtools/client/inspector/fonts/reducers/font-editor.js

@@ -10,6 +10,7 @@ const { parseFontVariationAxes } = require("../utils/font-utils");
 const {
   APPLY_FONT_VARIATION_INSTANCE,
   RESET_EDITOR,
+  SET_FONT_EDITOR_DISABLED,
   UPDATE_AXIS_VALUE,
   UPDATE_CUSTOM_INSTANCE,
   UPDATE_EDITOR_STATE,
@@ -22,6 +23,8 @@ const INITIAL_STATE = {
   axes: {},
   // Copy of the most recent axes values. Used to revert from a named instance.
   customInstanceValues: [],
+  // When true, prevent users from interacting with inputs in the font editor.
+  disabled: false,
   // Fonts used on the selected element.
   fonts: [],
   // Current selected font variation instance.
@@ -75,6 +78,10 @@ const reducers = {
     return newState;
   },
 
+  [SET_FONT_EDITOR_DISABLED](state, { disabled }) {
+    return { ...state, disabled };
+  },
+
   [UPDATE_EDITOR_STATE](state, { fonts, properties, id }) {
     const axes = parseFontVariationAxes(properties["font-variation-settings"]);
 

devtools/client/locales/en-US/font-inspector.properties

@@ -49,10 +49,6 @@ fontinspector.showMore=Show more
 # LOCALIZATION NOTE (fontinspector.showLess): Label for an expanded list of fonts.
 fontinspector.showLess=Show less
 
-# LOCALIZATION NOTE (fontinspector.noPseduoWarning): Warning message shown when the
-# selected element is a pseudo-element that the font editor cannot work with.
-fontinspector.noPseduoWarning=Pseudo-elements are not currently supported.
-
 # LOCALIZATION NOTE (fontinspector.lineHeightLabelCapitalized): Label for the UI to change the line height in the font editor.
 fontinspector.lineHeightLabelCapitalized=Line Height
 

devtools/client/themes/common.css

@@ -826,6 +826,10 @@ checkbox:-moz-focusring {
   transition: background-color .1s ease-out;
 }
 
+.devtools-checkbox-toggle[disabled]{
+  opacity: 0.5;
+}
+
 /* For right-to-left layout, the toggle thumb goes in the opposite direction. */
 html[dir="rtl"] .devtools-checkbox-toggle {
   --x-pos: -.15em;

devtools/client/themes/fonts.css

@@ -254,6 +254,13 @@
   background-color: var(--input-background-color);
 }
 
+/* Styles for disabled input fields */
+.font-value-input[disabled],
+.font-value-select[disabled],
+.font-value-slider[disabled] {
+  opacity: 0.5;
+}
+
 /* Do not use browser "invalid" state */
 .font-value-slider:-moz-ui-invalid,
 .font-value-input:-moz-ui-invalid {