Backed out 16 changesets (bug 1494162, bug 1464192) for failures in test_css-logic-getCssPath.html CLOSED TREE

Backed out changeset 0d5a593adfda (bug 1494162)
Backed out changeset ea5d67d3c2ae (bug 1494162)
Backed out changeset 98c531e6f8d4 (bug 1494162)
Backed out changeset 973fbb5bbadc (bug 1464192)
Backed out changeset bbbf97a5802e (bug 1494162)
Backed out changeset c1dac4bffc06 (bug 1494162)
Backed out changeset c90d929f87f2 (bug 1494162)
Backed out changeset f90da1a0201b (bug 1494162)
Backed out changeset ee129a8c5e00 (bug 1494162)
Backed out changeset 10143ae649e5 (bug 1494162)
Backed out changeset f700e44ea63f (bug 1494162)
Backed out changeset cb2b02dc4b47 (bug 1494162)
Backed out changeset 4880d9571aa7 (bug 1494162)
Backed out changeset b9e187182a0f (bug 1494162)
Backed out changeset f077ffe76ca5 (bug 1494162)
Backed out changeset ef609de4cd5c (bug 1494162)

devtools/client/inspector/animation/reducers/animations.js

@@ -14,7 +14,7 @@ const {
   UPDATE_SIDEBAR_SIZE,
 } = require("../actions/index");
 
-loader.lazyRequireGetter(this, "TimeScale", "devtools/client/inspector/animation/utils/timescale");
+const TimeScale = require("../utils/timescale");
 
 const INITIAL_STATE = {
   animations: [],

devtools/client/inspector/flexbox/flexbox.js

@@ -4,8 +4,8 @@
 
 "use strict";
 
+const { throttle } = require("devtools/client/inspector/shared/utils");
 const flags = require("devtools/shared/flags");
-const { throttle } = require("devtools/shared/throttle");
 
 const {
   clearFlexbox,

devtools/client/inspector/grids/grid-inspector.js

@@ -5,8 +5,8 @@
 "use strict";
 
 const Services = require("Services");
+const { throttle } = require("devtools/client/inspector/shared/utils");
 const flags = require("devtools/shared/flags");
-const { throttle } = require("devtools/shared/throttle");
 
 const {
   updateGridColor,

devtools/client/inspector/markup/markup.js

@@ -6,7 +6,6 @@
 
 const promise = require("promise");
 const Services = require("Services");
-const flags = require("devtools/shared/flags");
 const nodeConstants = require("devtools/shared/dom-node-constants");
 const nodeFilterConstants = require("devtools/shared/dom-node-filter-constants");
 const EventEmitter = require("devtools/shared/event-emitter");
@@ -15,6 +14,7 @@ const {PluralForm} = require("devtools/shared/plural-form");
 const AutocompletePopup = require("devtools/client/shared/autocomplete-popup");
 const KeyShortcuts = require("devtools/client/shared/key-shortcuts");
 const {scrollIntoViewIfNeeded} = require("devtools/client/shared/scroll");
+const {HTMLTooltip} = require("devtools/client/shared/widgets/tooltip/HTMLTooltip");
 const {PrefObserver} = require("devtools/client/shared/prefs");
 const MarkupElementContainer = require("devtools/client/inspector/markup/views/element-container");
 const MarkupReadOnlyContainer = require("devtools/client/inspector/markup/views/read-only-container");
@@ -22,7 +22,6 @@ const MarkupTextContainer = require("devtools/client/inspector/markup/views/text
 const RootContainer = require("devtools/client/inspector/markup/views/root-container");
 
 loader.lazyRequireGetter(this, "SlottedNodeContainer", "devtools/client/inspector/markup/views/slotted-node-container");
-loader.lazyRequireGetter(this, "HTMLTooltip", "devtools/client/shared/widgets/tooltip/HTMLTooltip", true);
 loader.lazyRequireGetter(this, "UndoStack", "devtools/client/shared/undo", true);
 
 const INSPECTOR_L10N =
@@ -124,16 +123,8 @@ function MarkupView(inspector, frame, controllerWindow) {
   this.toolbox.on("picker-canceled", this._onToolboxPickerCanceled);
   this.toolbox.on("picker-node-hovered", this._onToolboxPickerHover);
 
-  if (flags.testing) {
-    // In tests, we start listening immediately to avoid having to simulate a mousemove.
-    this._initTooltips();
-  } else {
-    this._elt.addEventListener("mousemove", () => {
-      this._initTooltips();
-    }, { once: true });
-  }
-
   this._onNewSelection();
+  this._initTooltips();
 
   this._prefObserver = new PrefObserver("devtools.markup");
   this._prefObserver.on(ATTR_COLLAPSE_ENABLED_PREF, this._onCollapseAttributesPrefChange);
@@ -150,18 +141,6 @@ MarkupView.prototype = {
 
   _selectedContainer: null,
 
-  get eventDetailsTooltip() {
-    if (!this._eventDetailsTooltip) {
-      // This tooltip will be attached to the toolbox document.
-      this._eventDetailsTooltip = new HTMLTooltip(this.toolbox.doc, {
-        type: "arrow",
-        consumeOutsideClicks: false,
-      });
-    }
-
-    return this._eventDetailsTooltip;
-  },
-
   get toolbox() {
     return this.inspector.toolbox;
   },
@@ -189,6 +168,10 @@ MarkupView.prototype = {
 
   _initTooltips: function() {
     // The tooltips will be attached to the toolbox document.
+    this.eventDetailsTooltip = new HTMLTooltip(this.toolbox.doc, {
+      type: "arrow",
+      consumeOutsideClicks: false,
+    });
     this.imagePreviewTooltip = new HTMLTooltip(this.toolbox.doc, {
       type: "arrow",
       useXulWrapper: true,
@@ -197,7 +180,8 @@ MarkupView.prototype = {
   },
 
   _enableImagePreviewTooltip: function() {
-    this.imagePreviewTooltip.startTogglingOnHover(this._elt, this._isImagePreviewTarget);
+    this.imagePreviewTooltip.startTogglingOnHover(this._elt,
+      this._isImagePreviewTarget);
   },
 
   _disableImagePreviewTooltip: function() {
@@ -1919,21 +1903,11 @@ MarkupView.prototype = {
 
     this._hoveredContainer = null;
 
-    if (this._eventDetailsTooltip) {
-      this._eventDetailsTooltip.destroy();
-      this._eventDetailsTooltip = null;
-    }
-
     if (this.htmlEditor) {
       this.htmlEditor.destroy();
       this.htmlEditor = null;
     }
 
-    if (this.imagePreviewTooltip) {
-      this.imagePreviewTooltip.destroy();
-      this.imagePreviewTooltip = null;
-    }
-
     if (this._undo) {
       this._undo.destroy();
       this._undo = null;
@@ -1967,6 +1941,12 @@ MarkupView.prototype = {
     }
     this._containers = null;
 
+    this.eventDetailsTooltip.destroy();
+    this.eventDetailsTooltip = null;
+
+    this.imagePreviewTooltip.destroy();
+    this.imagePreviewTooltip = null;
+
     this.controllerWindow = null;
     this.doc = null;
     this.highlighters = null;

devtools/client/inspector/markup/views/element-container.js

@@ -4,19 +4,21 @@
 
 "use strict";
 
+const PREVIEW_MAX_DIM_PREF = "devtools.inspector.imagePreviewTooltipSize";
+
 const promise = require("promise");
 const Services = require("Services");
+const nodeConstants = require("devtools/shared/dom-node-constants");
+const clipboardHelper = require("devtools/shared/platform/clipboard");
+const {setImageTooltip, setBrokenImageTooltip} =
+      require("devtools/client/shared/widgets/tooltip/ImageTooltipHelper");
 const MarkupContainer = require("devtools/client/inspector/markup/views/markup-container");
 const ElementEditor = require("devtools/client/inspector/markup/views/element-editor");
-const {ELEMENT_NODE} = require("devtools/shared/dom-node-constants");
 const {extend} = require("devtools/shared/extend");
 
-loader.lazyRequireGetter(this, "setEventTooltip", "devtools/client/shared/widgets/tooltip/EventTooltipHelper", true);
-loader.lazyRequireGetter(this, "setImageTooltip", "devtools/client/shared/widgets/tooltip/ImageTooltipHelper", true);
-loader.lazyRequireGetter(this, "setBrokenImageTooltip", "devtools/client/shared/widgets/tooltip/ImageTooltipHelper", true);
-loader.lazyRequireGetter(this, "clipboardHelper", "devtools/shared/platform/clipboard");
-
-const PREVIEW_MAX_DIM_PREF = "devtools.inspector.imagePreviewTooltipSize";
+// Lazy load this module as _buildEventTooltipContent is only called on click
+loader.lazyRequireGetter(this, "setEventTooltip",
+  "devtools/client/shared/widgets/tooltip/EventTooltipHelper", true);
 
 /**
  * An implementation of MarkupContainer for Elements that can contain
@@ -32,7 +34,7 @@ function MarkupElementContainer(markupView, node) {
   MarkupContainer.prototype.initialize.call(this, markupView, node,
     "elementcontainer");
 
-  if (node.nodeType === ELEMENT_NODE) {
+  if (node.nodeType === nodeConstants.ELEMENT_NODE) {
     this.editor = new ElementEditor(this, node);
   } else {
     throw new Error("Invalid node for MarkupElementContainer");

devtools/client/inspector/markup/views/element-editor.js

@@ -6,16 +6,17 @@
 
 const Services = require("Services");
 const TextEditor = require("devtools/client/inspector/markup/views/text-editor");
+const {
+  getAutocompleteMaxWidth,
+  flashElementOn,
+  flashElementOff,
+  parseAttributeValues,
+} = require("devtools/client/inspector/markup/utils");
 const { truncateString } = require("devtools/shared/inspector/utils");
 const { editableField, InplaceEditor } = require("devtools/client/shared/inplace-editor");
 const { parseAttribute } = require("devtools/client/shared/node-attribute-parser");
 const { getCssProperties } = require("devtools/shared/fronts/css-properties");
 
-loader.lazyRequireGetter(this, "flashElementOn", "devtools/client/inspector/markup/utils", true);
-loader.lazyRequireGetter(this, "flashElementOff", "devtools/client/inspector/markup/utils", true);
-loader.lazyRequireGetter(this, "getAutocompleteMaxWidth", "devtools/client/inspector/markup/utils", true);
-loader.lazyRequireGetter(this, "parseAttributeValues", "devtools/client/inspector/markup/utils", true);
-
 const {LocalizationHelper} = require("devtools/shared/l10n");
 const INSPECTOR_L10N =
   new LocalizationHelper("devtools/client/locales/inspector.properties");

devtools/client/inspector/markup/views/text-editor.js

@@ -4,14 +4,13 @@
 
 "use strict";
 
-const { editableField } = require("devtools/client/shared/inplace-editor");
-const { LocalizationHelper } = require("devtools/shared/l10n");
-
-loader.lazyRequireGetter(this, "getAutocompleteMaxWidth", "devtools/client/inspector/markup/utils", true);
-loader.lazyRequireGetter(this, "getCssProperties", "devtools/shared/fronts/css-properties", true);
+const {getAutocompleteMaxWidth} = require("devtools/client/inspector/markup/utils");
+const {editableField} = require("devtools/client/shared/inplace-editor");
+const {getCssProperties} = require("devtools/shared/fronts/css-properties");
+const {LocalizationHelper} = require("devtools/shared/l10n");
 
 const INSPECTOR_L10N =
-  new LocalizationHelper("devtools/client/locales/inspector.properties");
+      new LocalizationHelper("devtools/client/locales/inspector.properties");
 
 /**
  * Creates a simple text editor node, used for TEXT and COMMENT

devtools/client/inspector/rules/models/element-style.js

@@ -7,11 +7,10 @@
 const promise = require("promise");
 const Rule = require("devtools/client/inspector/rules/models/rule");
 const UserProperties = require("devtools/client/inspector/rules/models/user-properties");
+const { promiseWarn } = require("devtools/client/inspector/shared/utils");
+const { getCssProperties, isCssVariable } = require("devtools/shared/fronts/css-properties");
 const { ELEMENT_STYLE } = require("devtools/shared/specs/styles");
 
-loader.lazyRequireGetter(this, "promiseWarn", "devtools/client/inspector/shared/utils", true);
-loader.lazyRequireGetter(this, "isCssVariable", "devtools/shared/fronts/css-properties", true);
-
 /**
  * ElementStyle is responsible for the following:
  *   Keeps track of which properties are overridden.
@@ -22,7 +21,7 @@ loader.lazyRequireGetter(this, "isCssVariable", "devtools/shared/fronts/css-prop
  * @param  {CssRuleView} ruleView
  *         The instance of the rule-view panel.
  * @param  {Object} store
- *         The ElementStyle can use this object to store metadatas
+ *         The ElementStyle can use this object to store metadata
  *         that might outlast the rule view, particularly the current
  *         set of disabled properties.
  * @param  {PageStyleFront} pageStyle
@@ -38,7 +37,7 @@ function ElementStyle(element, ruleView, store, pageStyle, showUserAgentStyles)
   this.pageStyle = pageStyle;
   this.showUserAgentStyles = showUserAgentStyles;
   this.rules = [];
-  this.cssProperties = this.ruleView.cssProperties;
+  this.cssProperties = getCssProperties(this.ruleView.inspector.toolbox);
   this.variables = new Map();
 
   // We don't want to overwrite this.store.userProperties so we only create it

devtools/client/inspector/rules/models/rule.js

@@ -10,11 +10,10 @@ const promise = require("promise");
 const CssLogic = require("devtools/shared/inspector/css-logic");
 const {ELEMENT_STYLE} = require("devtools/shared/specs/styles");
 const TextProperty = require("devtools/client/inspector/rules/models/text-property");
+const {promiseWarn} = require("devtools/client/inspector/shared/utils");
+const {parseNamedDeclarations} = require("devtools/shared/css/parsing-utils");
 const Services = require("Services");
 
-loader.lazyRequireGetter(this, "promiseWarn", "devtools/client/inspector/shared/utils", true);
-loader.lazyRequireGetter(this, "parseNamedDeclarations", "devtools/shared/css/parsing-utils", true);
-
 const STYLE_INSPECTOR_PROPERTIES = "devtools/shared/locales/styleinspector.properties";
 const {LocalizationHelper} = require("devtools/shared/l10n");
 const STYLE_INSPECTOR_L10N = new LocalizationHelper(STYLE_INSPECTOR_PROPERTIES);

devtools/client/inspector/rules/models/text-property.js

@@ -6,7 +6,8 @@
 
 "use strict";
 
-loader.lazyRequireGetter(this, "escapeCSSComment", "devtools/shared/css/parsing-utils", true);
+const {escapeCSSComment} = require("devtools/shared/css/parsing-utils");
+const {getCssProperties} = require("devtools/shared/fronts/css-properties");
 
 /**
  * TextProperty is responsible for the following:
@@ -41,9 +42,11 @@ function TextProperty(rule, name, value, priority, enabled = true,
   this.priority = priority;
   this.enabled = !!enabled;
   this.invisible = invisible;
-  this.cssProperties = this.rule.elementStyle.ruleView.cssProperties;
   this.panelDoc = this.rule.elementStyle.ruleView.inspector.panelDoc;
 
+  const toolbox = this.rule.elementStyle.ruleView.inspector.toolbox;
+  this.cssProperties = getCssProperties(toolbox);
+
   this.updateComputed();
 }
 

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

@@ -29,11 +29,10 @@ const {
 const promise = require("promise");
 const Services = require("Services");
 const EventEmitter = require("devtools/shared/event-emitter");
+const {Tools} = require("devtools/client/definitions");
+const {gDevTools} = require("devtools/client/framework/devtools");
 const CssLogic = require("devtools/shared/inspector/css-logic");
 
-loader.lazyRequireGetter(this, "Tools", "devtools/client/definitions", true);
-loader.lazyRequireGetter(this, "gDevTools", "devtools/client/framework/devtools", true);
-
 const STYLE_INSPECTOR_PROPERTIES = "devtools/shared/locales/styleinspector.properties";
 const {LocalizationHelper} = require("devtools/shared/l10n");
 const STYLE_INSPECTOR_L10N = new LocalizationHelper(STYLE_INSPECTOR_PROPERTIES);

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

@@ -5,18 +5,23 @@
 "use strict";
 
 const Services = require("Services");
+
 const { l10n } = require("devtools/shared/inspector/css-logic");
-const { InplaceEditor, editableField } = require("devtools/client/shared/inplace-editor");
+const {getCssProperties} = require("devtools/shared/fronts/css-properties");
+const {InplaceEditor, editableField} =
+      require("devtools/client/shared/inplace-editor");
 const {
   createChild,
   appendText,
   advanceValidate,
-  blurOnMultipleProperties,
+  blurOnMultipleProperties
 } = require("devtools/client/inspector/shared/utils");
+const {
+  parseDeclarations,
+  parseSingleValue,
+} = require("devtools/shared/css/parsing-utils");
 
 loader.lazyRequireGetter(this, "openContentLink", "devtools/client/shared/link", true);
-loader.lazyRequireGetter(this, "parseDeclarations", "devtools/shared/css/parsing-utils", true);
-loader.lazyRequireGetter(this, "parseSingleValue", "devtools/shared/css/parsing-utils", true);
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 
@@ -70,7 +75,6 @@ const GENERIC_FONT_FAMILIES = [
 function TextPropertyEditor(ruleEditor, property) {
   this.ruleEditor = ruleEditor;
   this.ruleView = this.ruleEditor.ruleView;
-  this.cssProperties = this.ruleView.cssProperties;
   this.doc = this.ruleEditor.doc;
   this.popup = this.ruleView.popup;
   this.prop = property;
@@ -82,6 +86,7 @@ function TextPropertyEditor(ruleEditor, property) {
 
   this.toolbox = this.ruleView.inspector.toolbox;
   this.telemetry = this.toolbox.telemetry;
+  this.cssProperties = getCssProperties(this.toolbox);
 
   this.getGridlineNames = this.getGridlineNames.bind(this);
   this.update = this.update.bind(this);

devtools/client/inspector/shared/utils.js

@@ -6,11 +6,11 @@
 
 "use strict";
 
+const {parseDeclarations} = require("devtools/shared/css/parsing-utils");
 const promise = require("promise");
-
-loader.lazyRequireGetter(this, "KeyCodes", "devtools/client/shared/keycodes", true);
-loader.lazyRequireGetter(this, "getCSSLexer", "devtools/shared/css/lexer", true);
-loader.lazyRequireGetter(this, "parseDeclarations", "devtools/shared/css/parsing-utils", true);
+const {getCSSLexer} = require("devtools/shared/css/lexer");
+const {KeyCodes} = require("devtools/client/shared/keycodes");
+const {throttle} = require("devtools/shared/throttle");
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 
@@ -199,4 +199,5 @@ exports.blurOnMultipleProperties = blurOnMultipleProperties;
 exports.createChild = createChild;
 exports.getSelectorFromGrip = getSelectorFromGrip;
 exports.promiseWarn = promiseWarn;
+exports.throttle = throttle;
 exports.translateNodeFrontToGrip = translateNodeFrontToGrip;

devtools/client/shared/redux/create-store.js

@@ -7,10 +7,9 @@ const { createStore, applyMiddleware } = require("devtools/client/shared/vendor/
 const { thunk } = require("./middleware/thunk");
 const { waitUntilService } = require("./middleware/wait-service");
 const { task } = require("./middleware/task");
+const { log } = require("./middleware/log");
 const { promise } = require("./middleware/promise");
-
-loader.lazyRequireGetter(this, "history", "devtools/client/shared/redux/middleware/history", true);
-loader.lazyRequireGetter(this, "log", "devtools/client/shared/redux/middleware/log", true);
+const { history } = require("./middleware/history");
 
 /**
  * This creates a dispatcher with all the standard middleware in place

devtools/server/actors/inspector/node.js

@@ -12,9 +12,9 @@ const { nodeSpec, nodeListSpec } = require("devtools/shared/specs/node");
 
 loader.lazyRequireGetter(this, "colorUtils", "devtools/shared/css/color", true);
 
-loader.lazyImporter(this, "getCssPath", "resource://gre/modules/css-selector.js");
-loader.lazyImporter(this, "getXPath", "resource://gre/modules/css-selector.js");
-loader.lazyImporter(this, "findCssSelector", "resource://gre/modules/css-selector.js");
+loader.lazyRequireGetter(this, "getCssPath", "devtools/shared/inspector/css-logic", true);
+loader.lazyRequireGetter(this, "getXPath", "devtools/shared/inspector/css-logic", true);
+loader.lazyRequireGetter(this, "findCssSelector", "devtools/shared/inspector/css-logic", true);
 
 loader.lazyRequireGetter(this, "isAfterPseudoElement", "devtools/shared/layout/utils", true);
 loader.lazyRequireGetter(this, "isAnonymous", "devtools/shared/layout/utils", true);

devtools/server/actors/thread.js

@@ -18,7 +18,7 @@ const { assert, dumpn } = DevToolsUtils;
 const { DevToolsWorker } = require("devtools/shared/worker/worker");
 const { threadSpec } = require("devtools/shared/specs/script");
 
-loader.lazyImporter(this, "findCssSelector", "resource://gre/modules/css-selector.js");
+loader.lazyRequireGetter(this, "findCssSelector", "devtools/shared/inspector/css-logic", true);
 loader.lazyRequireGetter(this, "BreakpointActor", "devtools/server/actors/breakpoint", true);
 loader.lazyRequireGetter(this, "setBreakpointAtEntryPoints", "devtools/server/actors/breakpoint", true);
 loader.lazyRequireGetter(this, "EnvironmentActor", "devtools/server/actors/environment", true);

devtools/shared/inspector/css-logic.js

@@ -6,6 +6,7 @@
 
 "use strict";
 
+const { getTabPrefs } = require("devtools/shared/indentation");
 const InspectorUtils = require("InspectorUtils");
 
 const MAX_DATA_URL_LENGTH = 40;
@@ -46,9 +47,11 @@ const MAX_DATA_URL_LENGTH = 40;
 
 const Services = require("Services");
 
-loader.lazyRequireGetter(this, "getCSSLexer", "devtools/shared/css/lexer", true);
-loader.lazyRequireGetter(this, "getTabPrefs", "devtools/shared/indentation", true);
+loader.lazyImporter(this, "findCssSelector", "resource://gre/modules/css-selector.js");
+loader.lazyImporter(this, "getCssPath", "resource://gre/modules/css-selector.js");
+loader.lazyImporter(this, "getXPath", "resource://gre/modules/css-selector.js");
 
+const CSSLexer = require("devtools/shared/css/lexer");
 const {LocalizationHelper} = require("devtools/shared/l10n");
 const styleInspectorL10N =
   new LocalizationHelper("devtools/shared/locales/styleinspector.properties");
@@ -187,7 +190,7 @@ function prettifyCSS(text, ruleCount) {
   // minified file.
   let indent = "";
   let indentLevel = 0;
-  const tokens = getCSSLexer(text);
+  const tokens = CSSLexer.getCSSLexer(text);
   let result = "";
   let pushbackToken = undefined;
 
@@ -359,6 +362,28 @@ function prettifyCSS(text, ruleCount) {
 
 exports.prettifyCSS = prettifyCSS;
 
+/**
+ * Find a unique CSS selector for a given element
+ * @returns a string such that ele.ownerDocument.querySelector(reply) === ele
+ * and ele.ownerDocument.querySelectorAll(reply).length === 1
+ */
+exports.findCssSelector = findCssSelector;
+
+/**
+ * Get the full CSS path for a given element.
+ * @returns a string that can be used as a CSS selector for the element. It might not
+ * match the element uniquely. It does however, represent the full path from the root
+ * node to the element.
+ */
+exports.getCssPath = getCssPath;
+
+/**
+ * Get the xpath for a given element.
+ * @param {DomNode} ele
+ * @returns a string that can be used as an XPath to find the element uniquely.
+ */
+exports.getXPath = getXPath;
+
 /**
  * Given a node, check to see if it is a ::before or ::after element.
  * If so, return the node that is accessible from within the document