merge fx-team to mozilla-central a=merge

devtools/client/debugger/test/mochitest/browser_dbg_instruments-pane-collapse.js

@@ -13,11 +13,14 @@ var gTab, gPanel, gDebugger;
 var gPrefs, gOptions;
 
 function test() {
-  let options = {
-    source: TAB_URL,
-    line: 1
-  };
-  initDebugger(TAB_URL, options).then(([aTab,, aPanel]) => {
+  Task.spawn(function* () {
+    let options = {
+      source: TAB_URL,
+      line: 1
+    };
+
+    let [aTab,, aPanel] = yield initDebugger(TAB_URL, options);
+
     gTab = aTab;
     gPanel = aPanel;
     gDebugger = gPanel.panelWin;
@@ -28,7 +31,7 @@ function test() {
 
     gDebugger.DebuggerView.toggleInstrumentsPane({ visible: true, animated: false });
 
-    testInstrumentsPaneCollapse();
+    yield testInstrumentsPaneCollapse();
     testPanesStartupPref();
 
     closeDebuggerAndFinish(gPanel);
@@ -50,7 +53,7 @@ function testPanesState() {
     "The options menu item should not be checked.");
 }
 
-function testInstrumentsPaneCollapse() {
+function* testInstrumentsPaneCollapse () {
   let instrumentsPane =
     gDebugger.document.getElementById("instruments-pane");
   let instrumentsPaneToggleButton =
@@ -69,8 +72,13 @@ function testInstrumentsPaneCollapse() {
      !instrumentsPaneToggleButton.classList.contains("pane-collapsed"),
     "The instruments pane should at this point be visible.");
 
+  // Trigger reflow to make sure the UI is in required state.
+  gDebugger.document.documentElement.getBoundingClientRect();
+
   gDebugger.DebuggerView.toggleInstrumentsPane({ visible: false, animated: true });
 
+  yield once(instrumentsPane, "transitionend");
+
   is(gPrefs.panesVisibleOnStartup, false,
     "The debugger view panes should still initially be preffed as hidden.");
   isnot(gOptions._showPanesOnStartupItem.getAttribute("checked"), "true",
@@ -83,7 +91,8 @@ function testInstrumentsPaneCollapse() {
     "The instruments pane has an incorrect left margin after collapsing.");
   is(instrumentsPane.style.marginRight, margin,
     "The instruments pane has an incorrect right margin after collapsing.");
-  ok(instrumentsPane.hasAttribute("animated"),
+
+  ok(!instrumentsPane.hasAttribute("animated"),
     "The instruments pane has an incorrect attribute after an animated collapsing.");
   ok(instrumentsPane.classList.contains("pane-collapsed") &&
      instrumentsPaneToggleButton.classList.contains("pane-collapsed"),

devtools/client/framework/toolbox.js

@@ -335,6 +335,7 @@ Toolbox.prototype = {
   get splitConsole() {
     return this._splitConsole;
   },
+
   /**
    * Get the focused state of the split console
    */
@@ -1267,6 +1268,16 @@ Toolbox.prototype = {
       // backward compatibility with existing extensions do a check
       // for a promise return value.
       let built = definition.build(iframe.contentWindow, this);
+
+      // Set the dir attribute on the documents of panels using HTML.
+      let docEl = iframe.contentWindow && iframe.contentWindow.document.documentElement;
+      if (docEl && docEl.namespaceURI === HTML_NS) {
+        let top = this.win.top;
+        let topDocEl = top.document.documentElement;
+        let isRtl = top.getComputedStyle(topDocEl).direction === "rtl";
+        docEl.setAttribute("dir", isRtl ? "rtl" : "ltr");
+      }
+
       if (!(typeof built.then == "function")) {
         let panel = built;
         iframe.panel = panel;

devtools/client/inspector/markup/markup.js

@@ -430,8 +430,6 @@ MarkupView.prototype = {
   /**
    * Hide the box model highlighter on a given node front
    *
-   * @param  {NodeFront} nodeFront
-   *         The node to hide the highlighter for
    * @param  {Boolean} forceHide
    *         See toolbox-highlighter-utils/unhighlight
    * @return {Promise} Resolves when the highlighter for this nodeFront is

devtools/client/inspector/rules/test/browser.ini

@@ -199,6 +199,7 @@ subsuite = clipboard
 [browser_rules_selector-highlighter_01.js]
 [browser_rules_selector-highlighter_02.js]
 [browser_rules_selector-highlighter_03.js]
+[browser_rules_selector-highlighter_04.js]
 [browser_rules_selector_highlight.js]
 [browser_rules_strict-search-filter-computed-list_01.js]
 [browser_rules_strict-search-filter_01.js]

devtools/client/inspector/rules/test/browser_rules_selector-highlighter_02.js

@@ -76,9 +76,3 @@ add_task(function* () {
   is(HighlighterFront.options.selector, "body",
     "The right selector option is passed to the highlighter (2)");
 });
-
-function* clickSelectorIcon(icon, view) {
-  let onToggled = view.once("ruleview-selectorhighlighter-toggled");
-  EventUtils.synthesizeMouseAtCenter(icon, {}, view.styleWindow);
-  yield onToggled;
-}

devtools/client/inspector/rules/test/browser_rules_selector-highlighter_03.js

@@ -76,9 +76,3 @@ add_task(function* () {
   ok(!HighlighterFront.isShown,
     "The highlighter is hidden now that the same selector was clicked");
 });
-
-function* clickSelectorIcon(icon, view) {
-  let onToggled = view.once("ruleview-selectorhighlighter-toggled");
-  EventUtils.synthesizeMouseAtCenter(icon, {}, view.styleWindow);
-  yield onToggled;
-}

devtools/client/inspector/rules/test/browser_rules_selector-highlighter_04.js

@@ -0,0 +1,53 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the selector highlighter is shown when clicking on a selector icon
+// for the 'element {}' rule
+
+// Note that in this test, we mock the highlighter front, merely testing the
+// behavior of the style-inspector UI for now
+
+const TEST_URI = `
+<p>Testing the selector highlighter for the 'element {}' rule</p>
+`;
+
+add_task(function* () {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
+
+  // Mock the highlighter front to get the reference of the NodeFront
+  let HighlighterFront = {
+    isShown: false,
+    nodeFront: null,
+    options: null,
+    show: function (nodeFront, options) {
+      this.nodeFront = nodeFront;
+      this.options = options;
+      this.isShown = true;
+    },
+    hide: function () {
+      this.nodeFront = null;
+      this.options = null;
+      this.isShown = false;
+    }
+  };
+  // Inject the mock highlighter in the rule-view
+  view.selectorHighlighter = HighlighterFront;
+
+  info("Checking that the right NodeFront reference and options are passed");
+  yield selectNode("p", inspector);
+  let icon = getRuleViewSelectorHighlighterIcon(view, "element");
+
+  yield clickSelectorIcon(icon, view);
+  is(HighlighterFront.nodeFront.tagName, "P",
+     "The right NodeFront is passed to the highlighter (1)");
+  is(HighlighterFront.options.selector, "body > p:nth-child(1)",
+     "The right selector option is passed to the highlighter (1)");
+  ok(HighlighterFront.isShown, "The toggle event says the highlighter is visible");
+
+  yield clickSelectorIcon(icon, view);
+  ok(!HighlighterFront.isShown, "The toggle event says the highlighter is not visible");
+});

devtools/client/inspector/rules/test/head.js

@@ -817,6 +817,17 @@ function waitForStyleModification(inspector) {
   });
 }
 
+/**
+ * Click on the selector icon
+ * @param {DOMNode} icon
+ * @param {CSSRuleView} view
+ */
+function* clickSelectorIcon(icon, view) {
+  let onToggled = view.once("ruleview-selectorhighlighter-toggled");
+  EventUtils.synthesizeMouseAtCenter(icon, {}, view.styleWindow);
+  yield onToggled;
+}
+
 /**
  * Make sure window is properly focused before sending a key event.
  * @param {Window} win

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

@@ -149,9 +149,10 @@ RuleEditor.prototype = {
       });
     }
 
-    if (this.rule.domRule.type !== CSSRule.KEYFRAME_RULE &&
-        this.rule.domRule.selectors) {
-      let selector = this.rule.domRule.selectors.join(", ");
+    if (this.rule.domRule.type !== CSSRule.KEYFRAME_RULE) {
+      let selector = this.rule.domRule.selectors
+               ? this.rule.domRule.selectors.join(", ")
+               : this.ruleView.inspector.selectionCssSelector;
 
       let selectorHighlighter = createChild(header, "span", {
         class: "ruleview-selectorhighlighter" +

devtools/client/memory/memory.xhtml

@@ -4,9 +4,6 @@
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "DTD/xhtml1-strict.dtd">
   %htmlDTD;
-  <!ENTITY % globalDTD
-    SYSTEM "chrome://global/locale/global.dtd">
-  %globalDTD;
 ]>
 
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
@@ -19,7 +16,7 @@
     <link rel="stylesheet" href="chrome://devtools/skin/components-frame.css" type="text/css"/>
     <link rel="stylesheet" href="chrome://devtools/skin/components-h-split-box.css" type="text/css"/>
   </head>
-  <body class="theme-body" dir="&locale.dir;">
+  <body class="theme-body">
     <div id="app"></div>
 
     <script type="application/javascript;version=1.8"

devtools/client/netmonitor/test/browser_net_pane-collapse.js

@@ -34,16 +34,21 @@ add_task(function* () {
      !detailsPaneToggleButton.classList.contains("pane-collapsed"),
     "The details pane should at this point be visible.");
 
+  // Trigger reflow to make sure the UI is in required state.
+  document.documentElement.getBoundingClientRect();
+
   NetMonitorView.toggleDetailsPane({ visible: false, animated: true });
 
+  yield once(detailsPane, "transitionend");
+
   let margin = -(width + 1) + "px";
   is(width, Prefs.networkDetailsWidth,
     "The details pane has an incorrect width after collapsing.");
   is(detailsPane.style.marginLeft, margin,
     "The details pane has an incorrect left margin after collapsing.");
   is(detailsPane.style.marginRight, margin,
     "The details pane has an incorrect right margin after collapsing.");
-  ok(detailsPane.hasAttribute("animated"),
+  ok(!detailsPane.hasAttribute("animated"),
     "The details pane has an incorrect attribute after an animated collapsing.");
   ok(detailsPane.classList.contains("pane-collapsed") &&
      detailsPaneToggleButton.classList.contains("pane-collapsed"),

devtools/client/shared/components/sidebar-toggle.css

@@ -7,26 +7,26 @@
   display: block;
 }
 
-.sidebar-toggle:-moz-locale-dir(ltr)::before,
-.sidebar-toggle.pane-collapsed:-moz-locale-dir(rtl)::before {
+.sidebar-toggle::before,
+.sidebar-toggle.pane-collapsed:dir(rtl)::before {
   background-image: var(--theme-pane-collapse-image);
 }
 
-.sidebar-toggle.pane-collapsed:-moz-locale-dir(ltr)::before,
-.sidebar-toggle:-moz-locale-dir(rtl)::before {
+.sidebar-toggle.pane-collapsed::before,
+.sidebar-toggle:dir(rtl)::before {
   background-image: var(--theme-pane-expand-image);
 }
 
 /* Rotate button icon 90deg if the toolbox container is
   in vertical mode (sidebar displayed under the main panel) */
 @media (max-width: 700px) {
-  .sidebar-toggle:-moz-locale-dir(ltr)::before {
+  .sidebar-toggle::before {
     transform: rotate(90deg);
   }
 
   /* Since RTL swaps the used images, we need to flip them
      the other way round */
-  .sidebar-toggle:-moz-locale-dir(rtl)::before {
+  .sidebar-toggle:dir(rtl)::before {
     transform: rotate(-90deg);
   }
 }

devtools/client/shared/developer-toolbar.js

@@ -29,7 +29,7 @@ loader.lazyRequireGetter(this, "util", "gcli/util/util");
 loader.lazyRequireGetter(this, "ConsoleServiceListener", "devtools/server/actors/utils/webconsole-utils", true);
 loader.lazyRequireGetter(this, "gDevTools", "devtools/client/framework/devtools", true);
 loader.lazyRequireGetter(this, "gDevToolsBrowser", "devtools/client/framework/devtools-browser", true);
-loader.lazyRequireGetter(this, "nodeConstants", "devtools/shared/dom-node-constants", true);
+loader.lazyRequireGetter(this, "nodeConstants", "devtools/shared/dom-node-constants");
 loader.lazyRequireGetter(this, "EventEmitter", "devtools/shared/event-emitter");
 
 /**

devtools/client/shared/widgets/view-helpers.js

@@ -252,6 +252,11 @@ const ViewHelpers = exports.ViewHelpers = {
     // Add a class to the pane to handle min-widths, margins and animations.
     pane.classList.add("generic-toggled-pane");
 
+    // Avoid toggles in the middle of animation.
+    if (pane.hasAttribute("animated")) {
+      return;
+    }
+
     // Avoid useless toggles.
     if (flags.visible == !pane.classList.contains("pane-collapsed")) {
       if (flags.callback) {
@@ -283,23 +288,36 @@ const ViewHelpers = exports.ViewHelpers = {
         pane.style.marginLeft = -width + "px";
         pane.style.marginRight = -width + "px";
         pane.style.marginBottom = -height + "px";
-        pane.classList.add("pane-collapsed");
       }
 
       // Wait for the animation to end before calling afterToggle()
       if (flags.animated) {
-        pane.addEventListener("transitionend", function onEvent() {
-          pane.removeEventListener("transitionend", onEvent, false);
+        let options = {
+          useCapture: false,
+          once: true
+        };
+
+        pane.addEventListener("transitionend", () => {
           // Prevent unwanted transitions: if the panel is hidden and the layout
           // changes margins will be updated and the panel will pop out.
           pane.removeAttribute("animated");
+
+          if (!flags.visible) {
+            pane.classList.add("pane-collapsed");
+          }
           if (flags.callback) {
             flags.callback();
           }
-        }, false);
-      } else if (flags.callback) {
+        }, options);
+      } else {
+        if (!flags.visible) {
+          pane.classList.add("pane-collapsed");
+        }
+
         // Invoke the callback immediately since there's no transition.
-        flags.callback();
+        if (flags.callback) {
+          flags.callback();
+        }
       }
     };
 

devtools/client/themes/rules.css

@@ -325,7 +325,7 @@
   display: inline-block;
 }
 
-.ruleview-expander.theme-twisty:-moz-locale-dir(rtl) {
+.ruleview-expander.theme-twisty:dir(rtl) {
   /* for preventing .theme-twisty's wrong direction in rtl; Bug 1296648 */
   transform: none;
 }

devtools/client/themes/widgets.css

@@ -282,23 +282,23 @@
 /* RTL support: move the images that were on the left to the right,
  * and move images that were on the right to the left.
  */
-.breadcrumbs-widget-item:-moz-locale-dir(rtl) {
+.breadcrumbs-widget-item:dir(rtl) {
   padding: 0 20px 0 8px;
 }
 
-.breadcrumbs-widget-item:-moz-locale-dir(rtl),
-.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
+.breadcrumbs-widget-item:dir(rtl),
+.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:dir(rtl) {
   background-position: center right;
 }
 
-#breadcrumb-separator-before:-moz-locale-dir(rtl),
-#breadcrumb-separator-after:-moz-locale-dir(rtl),
-#breadcrumb-separator-normal:-moz-locale-dir(rtl) {
+#breadcrumb-separator-before:dir(rtl),
+#breadcrumb-separator-after:dir(rtl),
+#breadcrumb-separator-normal:dir(rtl) {
   transform: scaleX(-1);
 }
 
-#breadcrumb-separator-before:-moz-locale-dir(rtl):after,
-#breadcrumb-separator-after:-moz-locale-dir(rtl):after {
+#breadcrumb-separator-before:dir(rtl):after,
+#breadcrumb-separator-after:dir(rtl):after {
   transform: translateX(-5px) rotate(45deg);
 }