Bug 1158781 - Make sure attributes gets focused when clicked in the inspector. r=bgrins

This used to work fine, but regressed when bug 1153635 got fixed.
This fixes the issue and introduces a new test to prevent further regressions.

--HG--
extra : transplant_source : %A5Y%B5%9B%11u%F5p%9B%DA%FA%99%3F%D9%E5%3C%5Ex%AF.

browser/devtools/markupview/markup-view.js

@@ -1829,7 +1829,15 @@ MarkupContainer.prototype = {
     this.hovered = false;
     this.markup.navigate(this);
     event.stopPropagation();
-    event.preventDefault();
+
+    // Preventing the default behavior will avoid the body to gain focus on
+    // mouseup (through bubbling) when clicking on a non focusable node in the
+    // line. So, if the click happened outside of a focusable element, do
+    // prevent the default behavior, so that the tagname or textcontent gains
+    // focus.
+    if (!target.closest(".open [tabindex]")) {
+      event.preventDefault();
+    }
 
     // Start dragging the container after a delay.
     this.markup._dragStartEl = target;

browser/devtools/markupview/test/browser_markupview_keybindings_03.js

@@ -8,7 +8,7 @@
 // the first focusable element in the corresponding MarkupContainer so that the
 // keyboard can be used immediately.
 
-const TEST_URL = "data:text/html;charset=utf8,<div></div>Text node";
+const TEST_URL = "data:text/html;charset=utf8,<div class='test-class'></div>Text node";
 
 add_task(function*() {
   let {inspector, toolbox} = yield addTab(TEST_URL).then(openInspector);
@@ -31,4 +31,18 @@ add_task(function*() {
   is(inspector.markup.doc.activeElement,
      getContainerForNodeFront(divFront, inspector).editor.tag,
      "The currently focused element is the div's tagname");
+
+  info("Click on the test-class attribute, to make sure it gets focused");
+  let editor = getContainerForNodeFront(divFront, inspector).editor;
+  let attributeEditor = editor.attrElements.get("class").querySelector(".editable");
+
+  let onFocus = once(attributeEditor, "focus");
+  EventUtils.synthesizeMouseAtCenter(attributeEditor, {type: "mousedown"},
+    inspector.markup.doc.defaultView);
+  EventUtils.synthesizeMouseAtCenter(attributeEditor, {type: "mouseup"},
+    inspector.markup.doc.defaultView);
+  yield onFocus;
+
+  is(inspector.markup.doc.activeElement, attributeEditor,
+     "The currently focused element is the div's class attribute");
 });