Backed out 5 changesets (bug 1345119) dor mochitest failure in test_inspector_getOffsetParent.html
authorIris Hsiao <ihsiao@mozilla.com>
Fri, 24 Mar 2017 15:01:47 +0800
changeset 349394 4f4ae3322be2
parent 349393 bc2abb9359fc
child 349395 d47b335bd9a5
child 349502 4c987b7ed54a
push id88416
push userihsiao@mozilla.com
push dateFri, 24 Mar 2017 07:02:00 +0000
treeherdermozilla-inbound@4f4ae3322be2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1345119
milestone55.0a1
backs outc9be65ad95f6
4e4817e5b6d4
6a01debcc43c
2c6f67f420d0
ba020c15393d
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
Backed out 5 changesets (bug 1345119) dor mochitest failure in test_inspector_getOffsetParent.html Backed out changeset c9be65ad95f6 (bug 1345119) Backed out changeset 4e4817e5b6d4 (bug 1345119) Backed out changeset 6a01debcc43c (bug 1345119) Backed out changeset 2c6f67f420d0 (bug 1345119) Backed out changeset ba020c15393d (bug 1345119)
devtools/client/framework/selection.js
devtools/client/inspector/boxmodel/actions/box-model.js
devtools/client/inspector/boxmodel/actions/index.js
devtools/client/inspector/boxmodel/box-model.js
devtools/client/inspector/boxmodel/components/BoxModel.js
devtools/client/inspector/boxmodel/components/BoxModelApp.js
devtools/client/inspector/boxmodel/components/BoxModelMain.js
devtools/client/inspector/boxmodel/reducers/box-model.js
devtools/client/inspector/boxmodel/types.js
devtools/client/inspector/computed/computed.js
devtools/client/inspector/grids/components/GridItem.js
devtools/client/inspector/grids/grid-inspector.js
devtools/client/inspector/inspector.js
devtools/client/inspector/layout/components/App.js
devtools/client/inspector/layout/layout.js
devtools/client/themes/boxmodel.css
devtools/server/actors/inspector.js
devtools/server/tests/mochitest/chrome.ini
devtools/server/tests/mochitest/inspector_getOffsetParent.html
devtools/server/tests/mochitest/test_inspector_getOffsetParent.html
devtools/shared/specs/inspector.js
--- a/devtools/client/framework/selection.js
+++ b/devtools/client/framework/selection.js
@@ -52,17 +52,16 @@ var EventEmitter = require("devtools/sha
 /**
  * A Selection object. Hold a reference to a node.
  * Includes some helpers, fire some helpful events.
  */
 function Selection(walker) {
   EventEmitter.decorate(this);
 
   this._onMutations = this._onMutations.bind(this);
-  this.setNodeFront = this.setNodeFront.bind(this);
   this.setWalker(walker);
 }
 
 exports.Selection = Selection;
 
 Selection.prototype = {
   _walker: null,
 
--- a/devtools/client/inspector/boxmodel/actions/box-model.js
+++ b/devtools/client/inspector/boxmodel/actions/box-model.js
@@ -2,17 +2,16 @@
  * 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 {
   UPDATE_GEOMETRY_EDITOR_ENABLED,
   UPDATE_LAYOUT,
-  UPDATE_OFFSET_PARENT,
 } = require("./index");
 
 module.exports = {
 
   /**
    * Update the geometry editor's enabled state.
    *
    * @param  {Boolean} enabled
@@ -30,19 +29,9 @@ module.exports = {
    */
   updateLayout(layout) {
     return {
       type: UPDATE_LAYOUT,
       layout,
     };
   },
 
-  /**
-   * Update the offset parent state with the new DOM node.
-   */
-  updateOffsetParent(offsetParent) {
-    return {
-      type: UPDATE_OFFSET_PARENT,
-      offsetParent,
-    };
-  }
-
 };
--- a/devtools/client/inspector/boxmodel/actions/index.js
+++ b/devtools/client/inspector/boxmodel/actions/index.js
@@ -9,12 +9,9 @@ const { createEnum } = require("devtools
 createEnum([
 
   // Update the geometry editor's enabled state.
   "UPDATE_GEOMETRY_EDITOR_ENABLED",
 
   // Update the layout state with the latest layout properties.
   "UPDATE_LAYOUT",
 
-  // Update the offset parent state with the new DOM node.
-  "UPDATE_OFFSET_PARENT",
-
 ], module.exports);
--- a/devtools/client/inspector/boxmodel/box-model.js
+++ b/devtools/client/inspector/boxmodel/box-model.js
@@ -8,17 +8,16 @@ const { Task } = require("devtools/share
 const { getCssProperties } = require("devtools/shared/fronts/css-properties");
 const { ReflowFront } = require("devtools/shared/fronts/reflow");
 
 const { InplaceEditor } = require("devtools/client/shared/inplace-editor");
 
 const {
   updateGeometryEditorEnabled,
   updateLayout,
-  updateOffsetParent,
 } = require("./actions/box-model");
 
 const EditingSession = require("./utils/editing-session");
 
 const NUMERIC = /^-?[\d\.]+$/;
 
 /**
  * A singleton instance of the box model controllers.
@@ -163,25 +162,16 @@ BoxModel.prototype = {
 
       // Update the layout properties with whether or not the element's position is
       // editable with the geometry editor.
       let isPositionEditable = yield this.inspector.pageStyle.isPositionEditable(node);
       layout = Object.assign({}, layout, {
         isPositionEditable,
       });
 
-      const actorCanGetOffSetParent
-        = yield this.inspector.target.actorHasMethod("domwalker", "getOffsetParent");
-
-      if (actorCanGetOffSetParent) {
-        // Update the redux store with the latest offset parent DOM node
-        let offsetParent = yield this.inspector.walker.getOffsetParent(node);
-        this.store.dispatch(updateOffsetParent(offsetParent));
-      }
-
       // Update the redux store with the latest layout properties and update the box
       // model view.
       this.store.dispatch(updateLayout(layout));
 
       // If a subsequent request has been made, wait for that one instead.
       if (this._lastRequest != lastRequest) {
         return this._lastRequest;
       }
--- a/devtools/client/inspector/boxmodel/components/BoxModel.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModel.js
@@ -14,50 +14,44 @@ const BoxModelProperties = createFactory
 const Types = require("../types");
 
 module.exports = createClass({
 
   displayName: "BoxModel",
 
   propTypes: {
     boxModel: PropTypes.shape(Types.boxModel).isRequired,
-    setSelectedNode: PropTypes.func.isRequired,
     showBoxModelProperties: PropTypes.bool.isRequired,
     onHideBoxModelHighlighter: PropTypes.func.isRequired,
     onShowBoxModelEditor: PropTypes.func.isRequired,
     onShowBoxModelHighlighter: PropTypes.func.isRequired,
-    onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
     onToggleGeometryEditor: PropTypes.func.isRequired,
   },
 
   mixins: [ addons.PureRenderMixin ],
 
   render() {
     let {
       boxModel,
-      setSelectedNode,
       showBoxModelProperties,
       onHideBoxModelHighlighter,
       onShowBoxModelEditor,
       onShowBoxModelHighlighter,
-      onShowBoxModelHighlighterForNode,
       onToggleGeometryEditor,
     } = this.props;
 
     return dom.div(
       {
         className: "boxmodel-container",
       },
       BoxModelMain({
         boxModel,
-        setSelectedNode,
         onHideBoxModelHighlighter,
         onShowBoxModelEditor,
         onShowBoxModelHighlighter,
-        onShowBoxModelHighlighterForNode,
       }),
       BoxModelInfo({
         boxModel,
         onToggleGeometryEditor,
       }),
       showBoxModelProperties ?
         BoxModelProperties({
           boxModel,
--- a/devtools/client/inspector/boxmodel/components/BoxModelApp.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModelApp.js
@@ -20,22 +20,20 @@ const BOXMODEL_STRINGS_URI = "devtools/c
 const BOXMODEL_L10N = new LocalizationHelper(BOXMODEL_STRINGS_URI);
 
 const BoxModelApp = createClass({
 
   displayName: "BoxModelApp",
 
   propTypes: {
     boxModel: PropTypes.shape(Types.boxModel).isRequired,
-    setSelectedNode: PropTypes.func.isRequired,
     showBoxModelProperties: PropTypes.bool.isRequired,
     onHideBoxModelHighlighter: PropTypes.func.isRequired,
     onShowBoxModelEditor: PropTypes.func.isRequired,
     onShowBoxModelHighlighter: PropTypes.func.isRequired,
-    onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
     onToggleGeometryEditor: PropTypes.func.isRequired,
   },
 
   mixins: [ addons.PureRenderMixin ],
 
   render() {
     return Accordion({
       items: [
--- a/devtools/client/inspector/boxmodel/components/BoxModelMain.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModelMain.js
@@ -2,20 +2,16 @@
  * 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 { addons, createClass, createFactory, DOM: dom, PropTypes } =
   require("devtools/client/shared/vendor/react");
 
-// Reps
-const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
-const Rep = createFactory(REPS.Rep);
-
 const { LocalizationHelper } = require("devtools/shared/l10n");
 
 const BoxModelEditable = createFactory(require("./BoxModelEditable"));
 
 const Types = require("../types");
 
 const BOXMODEL_STRINGS_URI = "devtools/client/locales/boxmodel.properties";
 const BOXMODEL_L10N = new LocalizationHelper(BOXMODEL_STRINGS_URI);
@@ -24,21 +20,19 @@ const SHARED_STRINGS_URI = "devtools/cli
 const SHARED_L10N = new LocalizationHelper(SHARED_STRINGS_URI);
 
 module.exports = createClass({
 
   displayName: "BoxModelMain",
 
   propTypes: {
     boxModel: PropTypes.shape(Types.boxModel).isRequired,
-    setSelectedNode: PropTypes.func.isRequired,
     onHideBoxModelHighlighter: PropTypes.func.isRequired,
     onShowBoxModelEditor: PropTypes.func.isRequired,
     onShowBoxModelHighlighter: PropTypes.func.isRequired,
-    onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
   },
 
   mixins: [ addons.PureRenderMixin ],
 
   getBorderOrPaddingValue(property) {
     let { layout } = this.props.boxModel;
     return layout[property] ? parseFloat(layout[property]) : "-";
   },
@@ -93,90 +87,34 @@ module.exports = createClass({
     let { layout } = this.props.boxModel;
 
     if (layout.position === "static") {
       return "-";
     }
     return layout[property] ? parseFloat(layout[property]) : "-";
   },
 
-  /**
-   * While waiting for a reps fix in https://github.com/devtools-html/reps/issues/92,
-   * translate nodeFront to a grip-like object that can be used with an ElementNode rep.
-   *
-   * @params  {NodeFront} nodeFront
-   *          The NodeFront for which we want to create a grip-like object.
-   * @returns {Object} a grip-like object that can be used with Reps.
-   */
-  translateNodeFrontToGrip(nodeFront) {
-    let {
-      attributes
-    } = nodeFront;
-
-    // The main difference between NodeFront and grips is that attributes are treated as
-    // a map in grips and as an array in NodeFronts.
-    let attributesMap = {};
-    for (let { name, value } of attributes) {
-      attributesMap[name] = value;
-    }
-
-    return {
-      actor: nodeFront.actorID,
-      preview: {
-        attributes: attributesMap,
-        attributesLength: attributes.length,
-        // nodeName is already lowerCased in Node grips
-        nodeName: nodeFront.nodeName.toLowerCase(),
-        nodeType: nodeFront.nodeType,
-      }
-    };
-  },
-
   onHighlightMouseOver(event) {
     let region = event.target.getAttribute("data-box");
-
     if (!region) {
-      let el = event.target;
-
-      do {
-        el = el.parentNode;
-
-        if (el && el.getAttribute("data-box")) {
-          region = el.getAttribute("data-box");
-          break;
-        }
-      } while (el.parentNode);
-
       this.props.onHideBoxModelHighlighter();
     }
 
-    if (region === "offset-parent") {
-      this.props.onHideBoxModelHighlighter();
-      this.props.onShowBoxModelHighlighterForNode(this.props.boxModel.offsetParent);
-      return;
-    }
-
     this.props.onShowBoxModelHighlighter({
       region,
       showOnly: region,
       onlyRegionArea: true,
     });
   },
 
   render() {
-    let {
-        boxModel,
-        setSelectedNode,
-        onShowBoxModelEditor,
-    } = this.props;
-    let { layout, offsetParent } = boxModel;
+    let { boxModel, onShowBoxModelEditor } = this.props;
+    let { layout } = boxModel;
     let { height, width, position } = layout;
 
-    let displayOffsetParent = offsetParent && layout.position === "absolute";
-
     let borderTop = this.getBorderOrPaddingValue("border-top-width");
     let borderRight = this.getBorderOrPaddingValue("border-right-width");
     let borderBottom = this.getBorderOrPaddingValue("border-bottom-width");
     let borderLeft = this.getBorderOrPaddingValue("border-left-width");
 
     let paddingTop = this.getBorderOrPaddingValue("padding-top");
     let paddingRight = this.getBorderOrPaddingValue("padding-right");
     let paddingBottom = this.getBorderOrPaddingValue("padding-bottom");
@@ -232,33 +170,16 @@ module.exports = createClass({
       );
 
     return dom.div(
       {
         className: "boxmodel-main",
         onMouseOver: this.onHighlightMouseOver,
         onMouseOut: this.props.onHideBoxModelHighlighter,
       },
-      displayOffsetParent ?
-        dom.span(
-          {
-            className: "boxmodel-offset-parent",
-            "data-box": "offset-parent",
-          },
-          Rep(
-            {
-              defaultRep: offsetParent,
-              mode: MODE.TINY,
-              object: this.translateNodeFrontToGrip(offsetParent),
-              onInspectIconClick: () => setSelectedNode(offsetParent, "box-model"),
-            }
-          )
-        )
-        :
-        null,
       displayPosition ?
         dom.span(
           {
             className: "boxmodel-legend",
             "data-box": "position",
             title: BOXMODEL_L10N.getFormatStr("boxmodel.position", position),
           },
           BOXMODEL_L10N.getFormatStr("boxmodel.position", position)
--- a/devtools/client/inspector/boxmodel/reducers/box-model.js
+++ b/devtools/client/inspector/boxmodel/reducers/box-model.js
@@ -2,45 +2,37 @@
  * 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 {
   UPDATE_GEOMETRY_EDITOR_ENABLED,
   UPDATE_LAYOUT,
-  UPDATE_OFFSET_PARENT,
 } = require("../actions/index");
 
 const INITIAL_BOX_MODEL = {
   geometryEditorEnabled: false,
   layout: {},
-  offsetParent: null,
 };
 
 let reducers = {
 
   [UPDATE_GEOMETRY_EDITOR_ENABLED](boxModel, { enabled }) {
     return Object.assign({}, boxModel, {
       geometryEditorEnabled: enabled,
     });
   },
 
   [UPDATE_LAYOUT](boxModel, { layout }) {
     return Object.assign({}, boxModel, {
       layout,
     });
   },
 
-  [UPDATE_OFFSET_PARENT](boxModel, { offsetParent }) {
-    return Object.assign({}, boxModel, {
-      offsetParent,
-    });
-  },
-
 };
 
 module.exports = function (boxModel = INITIAL_BOX_MODEL, action) {
   let reducer = reducers[action.type];
   if (!reducer) {
     return boxModel;
   }
   return reducer(boxModel, action);
--- a/devtools/client/inspector/boxmodel/types.js
+++ b/devtools/client/inspector/boxmodel/types.js
@@ -12,12 +12,9 @@ const { PropTypes } = require("devtools/
 exports.boxModel = {
 
   // Whether or not the geometry editor is enabled
   geometryEditorEnabled: PropTypes.boolean,
 
   // The layout information of the current selected node
   layout: PropTypes.object,
 
-  // The offset parent for the selected node
-  offsetParent: PropTypes.object,
-
 };
--- a/devtools/client/inspector/computed/computed.js
+++ b/devtools/client/inspector/computed/computed.js
@@ -613,37 +613,30 @@ CssComputedView.prototype = {
     this.inspector.emit("computed-view-sourcelinks-updated");
   },
 
   /**
    * Render the box model view.
    */
   createBoxModelView: function () {
     let {
-      setSelectedNode,
-      onShowBoxModelHighlighterForNode,
-    } = this.inspector.getCommonComponentProps();
-
-    let {
       onHideBoxModelHighlighter,
       onShowBoxModelEditor,
       onShowBoxModelHighlighter,
       onToggleGeometryEditor,
     } = this.inspector.boxmodel.getComponentProps();
 
     let provider = createElement(
       Provider,
       { store: this.store },
       BoxModelApp({
-        setSelectedNode,
         showBoxModelProperties: false,
         onHideBoxModelHighlighter,
         onShowBoxModelEditor,
         onShowBoxModelHighlighter,
-        onShowBoxModelHighlighterForNode,
         onToggleGeometryEditor,
       })
     );
     ReactDOM.render(provider, this.boxModelWrapper);
   },
 
   /**
    * The CSS as displayed by the UI.
--- a/devtools/client/inspector/grids/components/GridItem.js
+++ b/devtools/client/inspector/grids/components/GridItem.js
@@ -1,16 +1,15 @@
 /* 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/. */
 
 "use strict";
 
-const { addons, createClass, createFactory, DOM: dom, PropTypes } =
-  require("devtools/client/shared/vendor/react");
+const { addons, createClass, createFactory, DOM: dom, PropTypes } = require("devtools/client/shared/vendor/react");
 const { findDOMNode } = require("devtools/client/shared/vendor/react-dom");
 
 // Reps
 const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
 const Rep = createFactory(REPS.Rep);
 const ElementNode = REPS.ElementNode;
 
 const Types = require("../types");
@@ -133,17 +132,17 @@ module.exports = createClass({
         ),
         Rep(
           {
             defaultRep: ElementNode,
             mode: MODE.TINY,
             object: this.translateNodeFrontToGrip(nodeFront),
             onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
             onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
-            onInspectIconClick: () => setSelectedNode(nodeFront, "layout-panel"),
+            onInspectIconClick: () => setSelectedNode(nodeFront),
           }
         )
       ),
       dom.div(
         {
           className: "grid-color-swatch",
           style: {
             backgroundColor: grid.color,
--- a/devtools/client/inspector/grids/grid-inspector.js
+++ b/devtools/client/inspector/grids/grid-inspector.js
@@ -37,22 +37,25 @@ const GRID_COLORS = [
 function GridInspector(inspector, window) {
   this.document = window.document;
   this.highlighters = inspector.highlighters;
   this.inspector = inspector;
   this.store = inspector.store;
   this.walker = this.inspector.walker;
 
   this.getSwatchColorPickerTooltip = this.getSwatchColorPickerTooltip.bind(this);
+  this.setSelectedNode = this.setSelectedNode.bind(this);
   this.updateGridPanel = this.updateGridPanel.bind(this);
 
   this.onGridLayoutChange = this.onGridLayoutChange.bind(this);
   this.onHighlighterChange = this.onHighlighterChange.bind(this);
   this.onMarkupMutation = this.onMarkupMutation.bind(this);
   this.onSetGridOverlayColor = this.onSetGridOverlayColor.bind(this);
+  this.onShowBoxModelHighlighterForNode =
+    this.onShowBoxModelHighlighterForNode.bind(this);
   this.onShowGridAreaHighlight = this.onShowGridAreaHighlight.bind(this);
   this.onShowGridCellHighlight = this.onShowGridCellHighlight.bind(this);
   this.onSidebarSelect = this.onSidebarSelect.bind(this);
   this.onToggleGridHighlighter = this.onToggleGridHighlighter.bind(this);
   this.onToggleShowGridLineNumbers = this.onToggleShowGridLineNumbers.bind(this);
   this.onToggleShowInfiniteLines = this.onToggleShowInfiniteLines.bind(this);
 
   this.init();
@@ -110,17 +113,19 @@ GridInspector.prototype = {
     this.store = null;
     this.swatchColorPickerTooltip = null;
     this.walker = null;
   },
 
   getComponentProps() {
     return {
       getSwatchColorPickerTooltip: this.getSwatchColorPickerTooltip,
+      setSelectedNode: this.setSelectedNode,
       onSetGridOverlayColor: this.onSetGridOverlayColor,
+      onShowBoxModelHighlighterForNode: this.onShowBoxModelHighlighterForNode,
       onShowGridAreaHighlight: this.onShowGridAreaHighlight,
       onShowGridCellHighlight: this.onShowGridCellHighlight,
       onToggleGridHighlighter: this.onToggleGridHighlighter,
       onToggleShowGridLineNumbers: this.onToggleShowGridLineNumbers,
       onToggleShowInfiniteLines: this.onToggleShowInfiniteLines,
     };
   },
 
@@ -213,16 +218,26 @@ GridInspector.prototype = {
     let showGridLineNumbers = Services.prefs.getBoolPref(SHOW_GRID_LINE_NUMBERS);
     let showInfinteLines = Services.prefs.getBoolPref(SHOW_INFINITE_LINES_PREF);
 
     dispatch(updateShowGridLineNumbers(showGridLineNumbers));
     dispatch(updateShowInfiniteLines(showInfinteLines));
   },
 
   /**
+   * Set the inspector selection.
+   *
+   * @param {NodeFront} nodeFront
+   *        The NodeFront corresponding to the new selection.
+   */
+  setSelectedNode(nodeFront) {
+    this.inspector.selection.setNodeFront(nodeFront, "layout-panel");
+  },
+
+  /**
    * Updates the grid panel by dispatching the new grid data. This is called when the
    * layout view becomes visible or the view needs to be updated with new grid data.
    *
    * @param  {Array|null} gridFronts
    *         Optional array of all GridFront in the current page.
    */
   updateGridPanel: Task.async(function* (gridFronts) {
     // Stop refreshing if the inspector or store is already destroyed.
@@ -313,16 +328,30 @@ GridInspector.prototype = {
       if (grid.nodeFront === node && grid.highlighted) {
         let highlighterSettings = this.getGridHighlighterSettings(node);
         this.highlighters.showGridHighlighter(node, highlighterSettings);
       }
     }
   },
 
   /**
+   * Shows the box-model highlighter on the element corresponding to the provided
+   * NodeFront.
+   *
+   * @param  {NodeFront} nodeFront
+   *         The node to highlight.
+   * @param  {Object} options
+   *         Options passed to the highlighter actor.
+   */
+  onShowBoxModelHighlighterForNode(nodeFront, options) {
+    let toolbox = this.inspector.toolbox;
+    toolbox.highlighterUtils.highlightNodeFront(nodeFront, options);
+  },
+
+  /**
    * Highlights the grid area in the CSS Grid Highlighter for the given grid.
    *
    * @param  {NodeFront} node
    *         The NodeFront of the grid container element for which the grid
    *         highlighter is highlighted for.
    * @param  {String} gridAreaName
    *         The name of the grid area for which the grid highlighter
    *         is highlighted for.
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -108,18 +108,16 @@ function Inspector(toolbox) {
   this._updateSearchResultsLabel = this._updateSearchResultsLabel.bind(this);
   this.onNewSelection = this.onNewSelection.bind(this);
   this.onDetached = this.onDetached.bind(this);
   this.onPaneToggleButtonClicked = this.onPaneToggleButtonClicked.bind(this);
   this._onMarkupFrameLoad = this._onMarkupFrameLoad.bind(this);
   this.onPanelWindowResize = this.onPanelWindowResize.bind(this);
   this.onSidebarShown = this.onSidebarShown.bind(this);
   this.onSidebarHidden = this.onSidebarHidden.bind(this);
-  this.onShowBoxModelHighlighterForNode =
-    this.onShowBoxModelHighlighterForNode.bind(this);
 
   this._target.on("will-navigate", this._onBeforeNavigate);
   this._detectingActorFeatures = this._detectActorFeatures();
 }
 
 Inspector.prototype = {
   /**
    * open is effectively an asynchronous constructor
@@ -1947,42 +1945,17 @@ Inspector.prototype = {
    * This method is here for the benefit of copying links.
    */
   copyAttributeLink: function (link) {
     // When the inspector menu was setup on click (see _getNodeLinkMenuItems), we
     // already checked that resolveRelativeURL existed.
     this.inspector.resolveRelativeURL(link, this.selection.nodeFront).then(url => {
       clipboardHelper.copyString(url);
     }, console.error);
-  },
-
-  /**
-   * Returns an object containing the shared handler functions used in the box
-   * model and grid React components.
-   */
-  getCommonComponentProps() {
-    return {
-      setSelectedNode: this.selection.setNodeFront,
-      onShowBoxModelHighlighterForNode: this.onShowBoxModelHighlighterForNode,
-    };
-  },
-
-  /**
-   * Shows the box-model highlighter on the element corresponding to the provided
-   * NodeFront.
-   *
-   * @param  {NodeFront} nodeFront
-   *         The node to highlight.
-   * @param  {Object} options
-   *         Options passed to the highlighter actor.
-   */
-  onShowBoxModelHighlighterForNode(nodeFront, options) {
-    let toolbox = this.toolbox;
-    toolbox.highlighterUtils.highlightNodeFront(nodeFront, options);
-  },
+  }
 };
 
 /**
  * Create a fake toolbox when running the inspector standalone, either in a chrome tab or
  * in a content tab.
  *
  * @param {Target} target to debug
  * @param {Function} createThreadClient
--- a/devtools/client/inspector/layout/components/App.js
+++ b/devtools/client/inspector/layout/components/App.js
@@ -35,17 +35,16 @@ const App = createClass({
     highlighterSettings: PropTypes.shape(GridTypes.highlighterSettings).isRequired,
     setSelectedNode: PropTypes.func.isRequired,
     showBoxModelProperties: PropTypes.bool.isRequired,
     showGridOutline: PropTypes.bool.isRequired,
     onHideBoxModelHighlighter: PropTypes.func.isRequired,
     onSetGridOverlayColor: PropTypes.func.isRequired,
     onShowBoxModelEditor: PropTypes.func.isRequired,
     onShowBoxModelHighlighter: PropTypes.func.isRequired,
-    onShowBoxModelHighlighterForNode: PropTypes.func.isRequired,
     onToggleGridHighlighter: PropTypes.func.isRequired,
     onToggleShowGridLineNumbers: PropTypes.func.isRequired,
     onToggleShowInfiniteLines: PropTypes.func.isRequired,
   },
 
   mixins: [ addons.PureRenderMixin ],
 
   render() {
--- a/devtools/client/inspector/layout/layout.js
+++ b/devtools/client/inspector/layout/layout.js
@@ -28,30 +28,27 @@ function LayoutView(inspector, window) {
 LayoutView.prototype = {
 
   init() {
     if (!this.inspector) {
       return;
     }
 
     let {
-      setSelectedNode,
-      onShowBoxModelHighlighterForNode,
-    } = this.inspector.getCommonComponentProps();
-
-    let {
       onHideBoxModelHighlighter,
       onShowBoxModelEditor,
       onShowBoxModelHighlighter,
       onToggleGeometryEditor,
     } = this.inspector.boxmodel.getComponentProps();
 
     let {
       getSwatchColorPickerTooltip,
+      setSelectedNode,
       onSetGridOverlayColor,
+      onShowBoxModelHighlighterForNode,
       onShowGridAreaHighlight,
       onShowGridCellHighlight,
       onToggleGridHighlighter,
       onToggleShowGridLineNumbers,
       onToggleShowInfiniteLines,
     } = this.inspector.gridInspector.getComponentProps();
 
     let app = App({
--- a/devtools/client/themes/boxmodel.css
+++ b/devtools/client/themes/boxmodel.css
@@ -318,17 +318,8 @@
 .boxmodel-properties-header {
   display: flex;
   padding: 2px 0;
 }
 
 .boxmodel-properties-wrapper {
   padding: 0 9px;
 }
-
-/* Box Model Main - Offset Parent */
-
-.boxmodel-offset-parent {
-  position: absolute;
-  top: -20px;
-  right: -10px;
-  color: var(--theme-highlight-purple);
-}
--- a/devtools/server/actors/inspector.js
+++ b/devtools/server/actors/inspector.js
@@ -2642,31 +2642,16 @@ var WalkerActor = protocol.ActorClassWit
    */
   getLayoutInspector: function () {
     if (!this.layoutActor) {
       this.layoutActor = new LayoutActor(this.conn, this.tabActor, this);
     }
 
     return this.layoutActor;
   },
-
-  /**
-   * Returns the offset parent DOMNode of the given node if it exists, otherwise, it
-   * returns null. However, if the offset parent is statically positioned, there is no
-   * offset parent and null is returned.
-   */
-  getOffsetParent: function (node) {
-    let offsetParent = node.rawNode.offsetParent;
-
-    if (!offsetParent || CssLogic.getComputedStyle(offsetParent).position === "static") {
-      return null;
-    }
-
-    return this._ref(offsetParent);
-  },
 });
 
 /**
  * Server side of the inspector actor, which is used to create
  * inspector-related actors, including the walker.
  */
 exports.InspectorActor = protocol.ActorClassWithSpec(inspectorSpec, {
   initialize: function (conn, tabActor) {
--- a/devtools/server/tests/mochitest/chrome.ini
+++ b/devtools/server/tests/mochitest/chrome.ini
@@ -5,17 +5,16 @@ support-files =
   animation-data.html
   Debugger.Source.prototype.element.js
   Debugger.Source.prototype.element-2.js
   Debugger.Source.prototype.element.html
   director-helpers.js
   hello-actor.js
   inspector_css-properties.html
   inspector_getImageData.html
-  inspector_getOffsetParent.html
   inspector-delay-image-response.sjs
   inspector-eyedropper.html
   inspector-helpers.js
   inspector-search-data.html
   inspector-styles-data.css
   inspector-styles-data.html
   inspector-traversal-data.html
   large-image.jpg
@@ -51,17 +50,16 @@ support-files =
 [test_inspector-changeattrs.html]
 [test_inspector-changevalue.html]
 [test_inspector-dead-nodes.html]
 [test_inspector-duplicate-node.html]
 [test_inspector_getImageData.html]
 [test_inspector_getImageDataFromURL.html]
 [test_inspector_getImageData-wait-for-load.html]
 [test_inspector_getNodeFromActor.html]
-[test_inspector_getOffsetParent.html]
 [test_inspector-hide.html]
 [test_inspector-insert.html]
 [test_inspector-mutations-attr.html]
 [test_inspector-mutations-events.html]
 [test_inspector-mutations-childlist.html]
 [test_inspector-mutations-frameload.html]
 [test_inspector-mutations-value.html]
 [test_inspector-pick-color.html]
deleted file mode 100644
--- a/devtools/server/tests/mochitest/inspector_getOffsetParent.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<html>
-<head>
-<body>
-    <div id="relative_parent" style="position: relative">
-        <div id="absolute_child" style="position: absolute"></div>
-    </div>
-    <div id="static"></div>
-    <div id="no_parent" style="position: absolute"></div>
-    <div id="fixed" style="position: fixed"></div>
-    <script>
-       "use strict";
-
-       window.onload = () => {
-         window.opener.postMessage("ready", "*");
-       };
-     </script>
-</body>
-</html>
deleted file mode 100644
--- a/devtools/server/tests/mochitest/test_inspector_getOffsetParent.html
+++ /dev/null
@@ -1,121 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<!--
-https://bugzilla.mozilla.org/show_bug.cgi?id=1345119
--->
-<head>
-  <meta charset="utf-8">
-  <title>Test for Bug 1345119</title>
-
-  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-  <script type="application/javascript" src="inspector-helpers.js"></script>
-  <script type="application/javascript">
-"use strict";
-
-window.onload = function () {
-  SimpleTest.waitForExplicitFinish();
-  runNextTest();
-};
-
-var gWalker;
-var gBodyNode;
-
-addTest(function setup() {
-  let url = document.getElementById("inspectorContent").href;
-  attachURL(url, function (err, client, tab, doc) {
-    let {InspectorFront} = require("devtools/shared/fronts/inspector");
-    let inspector = InspectorFront(client, tab);
-
-    promiseDone(inspector.getWalker().then(walker => {
-      gWalker = walker;
-      return gWalker.querySelector(gWalker.rootNode, "body");
-    }).then(node => {
-      gBodyNode = node;
-    }).then(runNextTest));
-  });
-});
-
-addTest(function () {
-  info("Try to get the offset parent for a node that is absolutely positioned inside a " +
-    "relative node");
-  gWalker.querySelector(gWalker.rootNode, "#absolute_child").then(node => {
-    return gWalker.getOffsetParent(node);
-  }).then(offsetParent => {
-    ok(offsetParent, "The node has an offset parent");
-    gWalker.querySelector(gWalker.rootNode, "#relative_parent").then(parent => {
-      ok(offsetParent === parent, "The offset parent is the correct node");
-      runNextTest();
-    });
-  });
-});
-
-addTest(function () {
-  info("Try to get the offset parent for a node that is absolutely positioned outside a" +
-    " relative node");
-  gWalker.querySelector(gWalker.rootNode, "#no_parent").then(node => {
-    return gWalker.getOffsetParent(node);
-  }).then(offsetParent => {
-    ok(offsetParent === gBodyNode, "The node's offset parent is the body");
-    runNextTest();
-  });
-});
-
-addTest(function () {
-  info("Try to get the offset parent for a relatively positioned node");
-  gWalker.querySelector(gWalker.rootNode, "#relative_parent").then(node => {
-    return gWalker.getOffsetParent(node);
-  }).then(offsetParent => {
-    ok(offsetParent === gBodyNode, "The node's offset parent is the body");
-    runNextTest();
-  });
-});
-
-addTest(function () {
-  info("Try to get the offset parent for a statically positioned node");
-  gWalker.querySelector(gWalker.rootNode, "#static").then(node => {
-    return gWalker.getOffsetParent(node);
-  }).then(offsetParent => {
-    ok(offsetParent === gBodyNode, "The node's offset parent is the body");
-    runNextTest();
-  });
-});
-
-addTest(function () {
-  info("Try to get the offset parent for a fixed positioned node");
-  gWalker.querySelector(gWalker.rootNode, "#fixed").then(node => {
-    return gWalker.getOffsetParent(node);
-  }).then(offsetParent => {
-    ok(offsetParent === gBodyNode, "The node's offset parent is the body");
-    runNextTest();
-  });
-});
-
-addTest(function () {
-  info("Try to get the offset parent for the body");
-  gWalker.querySelector(gWalker.rootNode, "body").then(node => {
-    return gWalker.getOffsetParent(node);
-  }).then(offsetParent => {
-    ok(!offsetParent, "The body has no offset parent");
-    runNextTest();
-  });
-});
-
-addTest(function () {
-  gWalker = null;
-  gBodyNode = null;
-  runNextTest();
-});
-  </script>
-</head>
-<body>
-<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1345119">Mozilla Bug 1345119</a>
-<a id="inspectorContent" target="_blank" href="inspector_getOffsetParent.html">Test Document</a>
-<p id="display"></p>
-<div id="content" style="display: none">
-
-</div>
-<pre id="test">
-</pre>
-</body>
-</html>
--- a/devtools/shared/specs/inspector.js
+++ b/devtools/shared/specs/inspector.js
@@ -369,25 +369,17 @@ const walkerSpec = generateActorSpec({
         node: RetVal("nullable:disconnectedNode")
       }
     },
     getLayoutInspector: {
       request: {},
       response: {
         actor: RetVal("layout")
       }
-    },
-    getOffsetParent: {
-      request: {
-        node: Arg(0, "domnode")
-      },
-      response: {
-        node: RetVal("nullable:domnode")
-      }
-    },
+    }
   }
 });
 
 exports.walkerSpec = walkerSpec;
 
 const inspectorSpec = generateActorSpec({
   typeName: "inspector",