Bug 1764077 - [devtools] Add an option to disable 'drag to update' feature in Rule View r=nchevobbe,fluent-reviewers,flod

We should have a way to disable the feature. The RuleView will dynamically update whenever the preference is flipped

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

browser/app/profile/firefox.js

@@ -2319,6 +2319,8 @@ pref("devtools.inspector.ruleview.inline-compatibility-warning.enabled", false);
 pref("devtools.inspector.compatibility.enabled", true);
 // Enable overflow debugging in the inspector.
 pref("devtools.overflow.debugging.enabled", true);
+// Enable drag to edit properties in the inspector rule view.
+pref("devtools.inspector.draggable_properties", true);
 
 // Grid highlighter preferences
 pref("devtools.gridinspector.gridOutlineMaxColumns", 50);

devtools/client/framework/toolbox-options.html

@@ -48,6 +48,11 @@
                  data-pref="devtools.markup.collapseAttributes"/>
           <span data-l10n-id="options-collapse-attrs-label"></span>
         </label>
+        <label data-l10n-id="options-inspector-draggable-properties-tooltip">
+          <input type="checkbox"
+                 data-pref="devtools.inspector.draggable_properties"/>
+          <span data-l10n-id="options-inspector-draggable-properties-label"></span>
+        </label>
         <label>
           <span data-l10n-id="options-default-color-unit-label"></span>
           <select id="defaultColorUnitMenuList"

devtools/client/inspector/rules/rules.js

@@ -71,6 +71,7 @@ loader.lazyRequireGetter(
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 const PREF_UA_STYLES = "devtools.inspector.showUserAgentStyles";
 const PREF_DEFAULT_COLOR_UNIT = "devtools.defaultColorUnit";
+const PREF_DRAGGABLE = "devtools.inspector.draggable_properties";
 const FILTER_CHANGED_TIMEOUT = 150;
 // Removes the flash-out class from an element after 1 second.
 const PROPERTY_FLASHING_DURATION = 1000;
@@ -241,6 +242,7 @@ function CssRuleView(inspector, document, store) {
   this._handleDefaultColorUnitPrefChange = this._handleDefaultColorUnitPrefChange.bind(
     this
   );
+  this._handleDraggablePrefChange = this._handleDraggablePrefChange.bind(this);
 
   this._prefObserver = new PrefObserver("devtools.");
   this._prefObserver.on(PREF_UA_STYLES, this._handleUAStylePrefChange);
@@ -248,6 +250,7 @@ function CssRuleView(inspector, document, store) {
     PREF_DEFAULT_COLOR_UNIT,
     this._handleDefaultColorUnitPrefChange
   );
+  this._prefObserver.on(PREF_DRAGGABLE, this._handleDraggablePrefChange);
 
   this.pseudoClassCheckboxes = this._createPseudoClassCheckboxes();
   this.showUserAgentStyles = Services.prefs.getBoolPref(PREF_UA_STYLES);
@@ -704,6 +707,13 @@ CssRuleView.prototype = {
     this._handlePrefChange(PREF_DEFAULT_COLOR_UNIT);
   },
 
+  _handleDraggablePrefChange: function() {
+    // This event is consumed by text-property-editor instances in order to
+    // update their draggable behavior. Preferences observer are costly, so
+    // we are forwarding the preference update via the EventEmitter.
+    this.emit("draggable-preference-updated");
+  },
+
   _handlePrefChange: function(pref) {
     // Reselect the currently selected element
     const refreshOnPrefs = [PREF_UA_STYLES, PREF_DEFAULT_COLOR_UNIT];
@@ -823,6 +833,7 @@ CssRuleView.prototype = {
       PREF_DEFAULT_COLOR_UNIT,
       this._handleDefaultColorUnitPrefChange
     );
+    this._prefObserver.off(PREF_DRAGGABLE, this._handleDraggablePrefChange);
     this._prefObserver.destroy();
 
     this._outputParser = null;

devtools/client/inspector/rules/test/browser_rules_edit-size-property-dragging.js

@@ -33,12 +33,22 @@ const TEST_URI = `
 const DRAGGABLE_VALUE_CLASSNAME = "ruleview-propertyvalue-draggable";
 
 add_task(async function() {
+  await pushPref("devtools.inspector.draggable_properties", true);
+
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
 
   const { inspector, view } = await openRuleView();
   await selectNode("#test", inspector);
 
   testDraggingClassIsAddedWhenNeeded(view);
+
+  // Check that toggling the feature updates the UI immediately.
+  await pushPref("devtools.inspector.draggable_properties", false);
+  testDraggingClassIsRemovedAfterPrefChange(view);
+
+  await pushPref("devtools.inspector.draggable_properties", true);
+  testDraggingClassIsAddedWhenNeeded(view);
+
   await testIncrementAngleValue(view);
   await testPressingEscapeWhileDragging(view);
   await testUpdateDisabledValue(view);
@@ -46,9 +56,7 @@ add_task(async function() {
   await testDraggingClassIsAddedOnValueUpdate(view);
 });
 
-function testDraggingClassIsAddedWhenNeeded(view) {
-  info("Testing class is added or not on different property values");
-  const properties = [
+const PROPERTIES = [
   {
     name: "border",
     value: "1px solid red",
@@ -109,8 +117,23 @@ function testDraggingClassIsAddedWhenNeeded(view) {
     value: "90deg",
     shouldBeDraggable: true,
   },
-  ];
-  runIsDraggableTest(view, properties);
+];
+
+function testDraggingClassIsAddedWhenNeeded(view) {
+  info("Testing class is added or not on different property values");
+  runIsDraggableTest(view, PROPERTIES);
+}
+
+function testDraggingClassIsRemovedAfterPrefChange(view) {
+  info("Testing class is removed if the feature is disabled");
+  runIsDraggableTest(
+    view,
+    // Create a temporary copy of the test PROPERTIES, where shouldBeDraggable is
+    // always false.
+    PROPERTIES.map(prop =>
+      Object.assign({}, prop, { shouldBeDraggable: false })
+    )
+  );
 }
 
 async function testIncrementAngleValue(view) {

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

@@ -133,6 +133,9 @@ function TextPropertyEditor(ruleEditor, property) {
   this.getGridlineNames = this.getGridlineNames.bind(this);
   this.update = this.update.bind(this);
   this.updatePropertyState = this.updatePropertyState.bind(this);
+  this._onDraggablePreferenceChanged = this._onDraggablePreferenceChanged.bind(
+    this
+  );
   this._onEnableChanged = this._onEnableChanged.bind(this);
   this._onEnableClicked = this._onEnableClicked.bind(this);
   this._onExpandClicked = this._onExpandClicked.bind(this);
@@ -374,6 +377,10 @@ TextPropertyEditor.prototype = {
         }
       });
 
+      this.ruleView.on(
+        "draggable-preference-updated",
+        this._onDraggablePreferenceChanged
+      );
       if (this._isDraggableProperty(this.prop)) {
         this._addDraggingCapability();
       }
@@ -982,6 +989,18 @@ TextPropertyEditor.prototype = {
     return li;
   },
 
+  /**
+   * Handle updates to the preference which disables/enables the feature to
+   * edit size properties on drag.
+   */
+  _onDraggablePreferenceChanged: function() {
+    if (this._isDraggableProperty(this.prop)) {
+      this._addDraggingCapability();
+    } else {
+      this._removeDraggingCapacity();
+    }
+  },
+
   /**
    * Stop clicks propogating down the tree from the enable / disable checkbox.
    */
@@ -1128,6 +1147,11 @@ TextPropertyEditor.prototype = {
       }
     }
 
+    this.ruleView.off(
+      "draggable-preference-updated",
+      this._onDraggablePreferenceChanged
+    );
+
     this.element.remove();
     this.ruleEditor.rule.editClosestTextProperty(this.prop, direction);
     this.nameSpan.textProperty = null;
@@ -1335,6 +1359,15 @@ TextPropertyEditor.prototype = {
    * @returns {Boolean}
    */
   _isDraggableProperty: function(textProperty) {
+    // Check if the feature is explicitly disabled.
+    if (
+      !Services.prefs.getBoolPref(
+        "devtools.inspector.draggable_properties",
+        false
+      )
+    ) {
+      return false;
+    }
     // temporary way of fixing the bug when editing inline styles
     // otherwise the textPropertyEditor object is destroyed on each value edit
     // See Bug 1755024

devtools/client/locales/en-US/toolbox-options.ftl

@@ -39,6 +39,11 @@ options-collapse-attrs-label = Truncate DOM attributes
 options-collapse-attrs-tooltip =
     .title = Truncate long attributes in the inspector
 
+# The label for the checkbox option to enable the "drag to update" feature
+options-inspector-draggable-properties-label = Click and drag to edit size values
+options-inspector-draggable-properties-tooltip =
+    .title = Click and drag to edit size values in the inspector rules view.
+
 ## "Default Color Unit" options for the Inspector
 
 options-default-color-unit-label = Default color unit