Bug 1398725 - Adds tooltip to offset parent indicator and moves ComputedProperty.js to boxmodel/components directory. r=gl
authorDanielle Leblanc-Cyr <danielleleb12@gmail.com>
Tue, 05 Mar 2019 11:49:12 -0500
changeset 462396 cb76b90f829c7687c981c4dcb1fde868167ce765
parent 462395 cbdb07ca9e95c649184ed26084d0d7a7ca1abbda
child 462397 996a48b306521112d483b3bd8bede1e4fa23d3fa
child 462511 01c2d53e22c42738e5cc7ea6bda4cdfe14270226
push id35651
push usershindli@mozilla.com
push dateTue, 05 Mar 2019 21:41:37 +0000
treeherdermozilla-central@996a48b30652 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1398725
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1398725 - Adds tooltip to offset parent indicator and moves ComputedProperty.js to boxmodel/components directory. r=gl
devtools/client/inspector/boxmodel/components/BoxModelProperties.js
devtools/client/inspector/boxmodel/components/ComputedProperty.js
devtools/client/inspector/boxmodel/components/moz.build
devtools/client/inspector/layout/components/ComputedProperty.js
devtools/client/inspector/layout/components/moz.build
devtools/client/locales/en-US/boxmodel.properties
--- a/devtools/client/inspector/boxmodel/components/BoxModelProperties.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModelProperties.js
@@ -4,17 +4,17 @@
 
 "use strict";
 
 const { createFactory, 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");
 
-const ComputedProperty = createFactory(require("devtools/client/inspector/layout/components/ComputedProperty"));
+const ComputedProperty = createFactory(require("devtools/client/inspector/boxmodel/components/ComputedProperty"));
 
 const Types = require("../types");
 
 const BOXMODEL_STRINGS_URI = "devtools/client/locales/boxmodel.properties";
 const BOXMODEL_L10N = new LocalizationHelper(BOXMODEL_STRINGS_URI);
 
 class BoxModelProperties extends PureComponent {
   static get propTypes() {
rename from devtools/client/inspector/layout/components/ComputedProperty.js
rename to devtools/client/inspector/boxmodel/components/ComputedProperty.js
--- a/devtools/client/inspector/layout/components/ComputedProperty.js
+++ b/devtools/client/inspector/boxmodel/components/ComputedProperty.js
@@ -2,26 +2,30 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 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;
 });
 loader.lazyGetter(this, "MODE", function() {
   return require("devtools/client/shared/components/reps/reps").MODE;
 });
 
 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 {
       name: PropTypes.string.isRequired,
       onHideBoxModelHighlighter: PropTypes.func,
       onShowBoxModelHighlighterForNode: PropTypes.func,
       referenceElement: PropTypes.object,
       referenceElementType: PropTypes.string,
@@ -51,17 +55,23 @@ class ComputedProperty extends PureCompo
     } = this.props;
 
     if (!referenceElement) {
       return null;
     }
 
     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,
           object: translateNodeFrontToGrip(referenceElement),
           onInspectIconClick: () => setSelectedNode(referenceElement,
             { reason: "box-model" }),
           onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(referenceElement),
           onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
--- a/devtools/client/inspector/boxmodel/components/moz.build
+++ b/devtools/client/inspector/boxmodel/components/moz.build
@@ -5,9 +5,10 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
     'BoxModel.js',
     'BoxModelEditable.js',
     'BoxModelInfo.js',
     'BoxModelMain.js',
     'BoxModelProperties.js',
+    'ComputedProperty.js',
 )
--- a/devtools/client/inspector/layout/components/moz.build
+++ b/devtools/client/inspector/layout/components/moz.build
@@ -2,11 +2,10 @@
 # vim: set filetype=python:
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
     'Accordion.css',
     'Accordion.js',
-    'ComputedProperty.js',
     'LayoutApp.js',
 )
--- a/devtools/client/locales/en-US/boxmodel.properties
+++ b/devtools/client/locales/en-US/boxmodel.properties
@@ -24,8 +24,15 @@ boxmodel.geometryButton.tooltip=Edit pos
 # for showing and collapsing the properties underneath the box model in the layout view
 boxmodel.propertiesLabel=Box Model Properties
 
 # LOCALIZATION NOTE: (boxmodel.offsetParent) This label is displayed inside the list of
 # properties, below the box model, in the layout view. It is displayed next to the
 # 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
+