Can't interact with reps' "expand" icon if some text is selected

[Nicolas Chevobbe]

From Bug 1449865

STR:

1. Run this code in the console:

var map = new Map(); 
for (var i = 0; i < 20; i++) { 
  map.set('foo' + i, 'bar' + i); 
} 
map;

2. select a word in the console, eg the "map" in the code above
3. try to expand the reps using the "arrow" icon

=> It's not possible.
We first need to unselect by simply clicking elsewhere.
Note that expanding clicking on "Map" seems to work.

[Nicolas Chevobbe]

The issue lies in https://github.com/devtools-html/devtools-core/blob/b6819f649da535d42005ee06403bd44efe38633a/packages/devtools-reps/src/object-inspector/component.js#L364

Here we check that there's no selection to expand the node, to prevent expanding when the user simply select a word.
But when some text is selected and the arrow is clicked, the text isn't unselected, and the if statement evals to true and causes the issue.

A simple check on the target should fix this

diff --git a/packages/devtools-reps/src/object-inspector/component.js b/packages/devtools-reps/src/object-inspector/component.js
index bcc1ca0..964b56f 100644
--- a/packages/devtools-reps/src/object-inspector/component.js
+++ b/packages/devtools-reps/src/object-inspector/component.js
@@ -361,10 +361,14 @@ class ObjectInspector extends Component {
         e.stopPropagation();
 
         // If the user selected text, bail out.
-        if (Utils.selection.documentHasSelection()) {
+        if (Utils.selection.documentHasSelection() && !e.target.matches("img.arrow")) {
           return;
         }
 
+        if (window && window.getSelection) {
+          window.getSelection().removeAllRanges();
+        }
+
         this.setExpanded(item, !expanded);
       },
     };

[Julien Wajsberg]

But when some text is selected and the arrow is clicked, the text isn't unselected,

I'd like to understand why this happens. Do you know more? Because maybe that's actually our root issue here...

On a side note, I tried removing that code here:
https://github.com/devtools-html/devtools-core/blob/ff27d20fb51df0444d4405fe673d0714ab4da5b9/packages/devtools-reps/src/object-inspector/utils/selection.js#L18-L28

This didn't fix this error (I thought it would :) ) but I couldn't see any behavior change, so maybe it's obsolete now.

[Nicolas Chevobbe]

I'd like to understand why this happens. Do you know more? Because maybe that's actually our root issue here...

That's a standard behavior. If you go to data:text/html,<meta charset=utf8><p>Select me<button>Click me</button></p><img src="https://blog.mozilla.org/opendesign/files/2017/01/Mozilla-12jan-1500px_logo.jpg">, select the text and then click on the button and/or on the image, the text is still selected.

[Nicolas Chevobbe]

On a side note, I tried removing that code here

Good catch. The arrow element isn't an svg element anymore so this might be unnecessary