Bug 1398725 - Adds tooltip to offset parent indicator and moves ComputedProperty.js to boxmodel/components directory. r=gl

--HG--
rename : devtools/client/inspector/layout/components/ComputedProperty.js => devtools/client/inspector/boxmodel/components/ComputedProperty.js

devtools/client/inspector/boxmodel/components/BoxModelProperties.js

@@ -9,7 +9,7 @@ const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { LocalizationHelper } = require("devtools/shared/l10n");
 
-const ComputedProperty = createFactory(require("devtools/client/inspector/layout/components/ComputedProperty"));
+const ComputedProperty = createFactory(require("devtools/client/inspector/boxmodel/components/ComputedProperty"));
 
 const Types = require("../types");
 

devtools/client/inspector/boxmodel/components/ComputedProperty.js

@@ -7,6 +7,7 @@
 const { PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const { LocalizationHelper } = require("devtools/shared/l10n");
 
 loader.lazyGetter(this, "Rep", function() {
   return require("devtools/client/shared/components/reps/reps").REPS.Rep;
@@ -17,6 +18,9 @@ loader.lazyGetter(this, "MODE", function() {
 
 loader.lazyRequireGetter(this, "translateNodeFrontToGrip", "devtools/client/inspector/shared/utils", true);
 
+const BOXMODEL_STRINGS_URI = "devtools/client/locales/boxmodel.properties";
+const BOXMODEL_L10N = new LocalizationHelper(BOXMODEL_STRINGS_URI);
+
 class ComputedProperty extends PureComponent {
   static get propTypes() {
     return {
@@ -56,7 +60,13 @@ class ComputedProperty extends PureComponent {
 
     return (
       dom.div({ className: "reference-element" },
-        dom.span({ className: "reference-element-type" }, referenceElementType),
+        dom.span(
+          {
+            className: "reference-element-type",
+            title: BOXMODEL_L10N.getStr("boxmodel.offsetParent.title"),
+          },
+          referenceElementType
+        ),
         Rep({
           defaultRep: referenceElement,
           mode: MODE.TINY,

devtools/client/inspector/boxmodel/components/moz.build

@@ -10,4 +10,5 @@ DevToolsModules(
     'BoxModelInfo.js',
     'BoxModelMain.js',
     'BoxModelProperties.js',
+    'ComputedProperty.js',
 )

devtools/client/inspector/layout/components/moz.build

@@ -7,6 +7,5 @@
 DevToolsModules(
     'Accordion.css',
     'Accordion.js',
-    'ComputedProperty.js',
     'LayoutApp.js',
 )

devtools/client/locales/en-US/boxmodel.properties

@@ -29,3 +29,10 @@ boxmodel.propertiesLabel=Box Model Properties
 # position property, when position is absolute, relative, sticky. This label tells users
 # what the DOM node previewed next to it is: an offset parent for the position element.
 boxmodel.offsetParent=offset
+
+# LOCALIZATION NOTE: (boxmodel.offsetParent.title) This label is displayed as a
+# tooltip that appears when hovering over the offset label, inside the list of properties,
+# below the box model, in the layout view. This label tells users
+# what the DOM node previewed next to it is: an offset parent for the position element.
+boxmodel.offsetParent.title=Offset parent of the selected element
+