diff --git a/devtools/client/inspector/layout/actions/index.js b/devtools/client/inspector/layout/actions/index.js
index d694e37400a2..bf11969f238b 100644
--- a/devtools/client/inspector/layout/actions/index.js
+++ b/devtools/client/inspector/layout/actions/index.js
@@ -17,9 +17,6 @@ createEnum([
// Update the entire grids state with the new list of grids.
"UPDATE_GRIDS",
- // Update the layout state with the latest layout properties.
- "UPDATE_LAYOUT",
-
// Update the grid highlighter's show grid line numbers state.
"UPDATE_SHOW_GRID_LINE_NUMBERS",
diff --git a/devtools/client/inspector/layout/actions/moz.build b/devtools/client/inspector/layout/actions/moz.build
index 5e157a4bd728..09b7039d19de 100644
--- a/devtools/client/inspector/layout/actions/moz.build
+++ b/devtools/client/inspector/layout/actions/moz.build
@@ -5,7 +5,6 @@
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
DevToolsModules(
- 'box-model.js',
'grids.js',
'highlighter-settings.js',
'index.js',
diff --git a/devtools/client/inspector/layout/components/App.js b/devtools/client/inspector/layout/components/App.js
index d8dd19582d0c..cbcb2bebc271 100644
--- a/devtools/client/inspector/layout/components/App.js
+++ b/devtools/client/inspector/layout/components/App.js
@@ -11,9 +11,10 @@ const { connect } = require("devtools/client/shared/vendor/react-redux");
const { LocalizationHelper } = require("devtools/shared/l10n");
const Accordion = createFactory(require("./Accordion"));
-const BoxModel = createFactory(require("./BoxModel"));
const Grid = createFactory(require("./Grid"));
+const BoxModel = createFactory(require("devtools/client/inspector/boxmodel/components/BoxModel"));
+
const Types = require("../types");
const { getStr } = require("../utils/l10n");
diff --git a/devtools/client/inspector/layout/components/moz.build b/devtools/client/inspector/layout/components/moz.build
index 7ad90ba4572b..551eaa5eda51 100644
--- a/devtools/client/inspector/layout/components/moz.build
+++ b/devtools/client/inspector/layout/components/moz.build
@@ -8,12 +8,6 @@ DevToolsModules(
'Accordion.css',
'Accordion.js',
'App.js',
- 'BoxModel.js',
- 'BoxModelEditable.js',
- 'BoxModelInfo.js',
- 'BoxModelMain.js',
- 'BoxModelProperties.js',
- 'ComputedProperty.js',
'Grid.js',
'GridDisplaySettings.js',
'GridItem.js',
diff --git a/devtools/client/inspector/layout/layout.js b/devtools/client/inspector/layout/layout.js
index d9c6ba201be7..2d6f1fe0cf60 100644
--- a/devtools/client/inspector/layout/layout.js
+++ b/devtools/client/inspector/layout/layout.js
@@ -6,18 +6,12 @@
const Services = require("Services");
const { Task } = require("devtools/shared/task");
-const { getCssProperties } = require("devtools/shared/fronts/css-properties");
-const { ReflowFront } = require("devtools/shared/fronts/reflow");
-const { InplaceEditor } = require("devtools/client/shared/inplace-editor");
const { createFactory, createElement } = require("devtools/client/shared/vendor/react");
const { Provider } = require("devtools/client/shared/vendor/react-redux");
const SwatchColorPickerTooltip = require("devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip");
-const {
- updateLayout,
-} = require("./actions/box-model");
const {
updateGridColor,
updateGridHighlighted,
@@ -30,13 +24,10 @@ const {
const App = createFactory(require("./components/App"));
-const EditingSession = require("./utils/editing-session");
-
const { LocalizationHelper } = require("devtools/shared/l10n");
const INSPECTOR_L10N =
new LocalizationHelper("devtools/client/locales/inspector.properties");
-const NUMERIC = /^-?[\d\.]+$/;
const SHOW_GRID_LINE_NUMBERS = "devtools.gridinspector.showGridLineNumbers";
const SHOW_INFINITE_LINES_PREF = "devtools.gridinspector.showInfiniteLines";
@@ -59,11 +50,8 @@ function LayoutView(inspector, window) {
this.store = inspector.store;
this.walker = this.inspector.walker;
- this.updateBoxModel = this.updateBoxModel.bind(this);
-
this.onGridLayoutChange = this.onGridLayoutChange.bind(this);
this.onHighlighterChange = this.onHighlighterChange.bind(this);
- this.onNewSelection = this.onNewSelection.bind(this);
this.onSidebarSelect = this.onSidebarSelect.bind(this);
this.init();
@@ -80,13 +68,18 @@ LayoutView.prototype = {
return;
}
+ let {
+ onHideBoxModelHighlighter,
+ onShowBoxModelEditor,
+ onShowBoxModelHighlighter,
+ } = this.inspector.boxmodel.getComponentProps();
+
this.layoutInspector = yield this.inspector.walker.getLayoutInspector();
this.loadHighlighterSettings();
this.highlighters.on("grid-highlighter-hidden", this.onHighlighterChange);
this.highlighters.on("grid-highlighter-shown", this.onHighlighterChange);
- this.inspector.selection.on("new-node-front", this.onNewSelection);
this.inspector.sidebar.on("select", this.onSidebarSelect);
// Create a shared SwatchColorPicker instance to be reused by all GridItem components.
@@ -112,13 +105,9 @@ LayoutView.prototype = {
*/
showBoxModelProperties: true,
- /**
- * Hides the box-model highlighter on the currently selected element.
- */
- onHideBoxModelHighlighter: () => {
- let toolbox = this.inspector.toolbox;
- toolbox.highlighterUtils.unhighlight();
- },
+ onHideBoxModelHighlighter,
+ onShowBoxModelEditor,
+ onShowBoxModelHighlighter,
/**
* Handler for a change in the grid overlay color picker for a grid container.
@@ -143,88 +132,6 @@ LayoutView.prototype = {
}
},
- /**
- * Shows the inplace editor when a box model editable value is clicked on the
- * box model panel.
- *
- * @param {DOMNode} element
- * The element that was clicked.
- * @param {Event} event
- * The event object.
- * @param {String} property
- * The name of the property.
- */
- onShowBoxModelEditor: (element, event, property) => {
- let session = new EditingSession({
- inspector: this.inspector,
- doc: this.document,
- elementRules: this.elementRules,
- });
- let initialValue = session.getProperty(property);
-
- let editor = new InplaceEditor({
- element: element,
- initial: initialValue,
- contentType: InplaceEditor.CONTENT_TYPES.CSS_VALUE,
- property: {
- name: property
- },
- start: self => {
- self.elt.parentNode.classList.add("boxmodel-editing");
- },
- change: value => {
- if (NUMERIC.test(value)) {
- value += "px";
- }
-
- let properties = [
- { name: property, value: value }
- ];
-
- if (property.substring(0, 7) == "border-") {
- let bprop = property.substring(0, property.length - 5) + "style";
- let style = session.getProperty(bprop);
- if (!style || style == "none" || style == "hidden") {
- properties.push({ name: bprop, value: "solid" });
- }
- }
-
- session.setProperties(properties).catch(e => console.error(e));
- },
- done: (value, commit) => {
- editor.elt.parentNode.classList.remove("boxmodel-editing");
- if (!commit) {
- session.revert().then(() => {
- session.destroy();
- }, e => console.error(e));
- return;
- }
-
- let node = this.inspector.selection.nodeFront;
- this.inspector.pageStyle.getLayout(node, {
- autoMargins: true,
- }).then(layout => {
- this.store.dispatch(updateLayout(layout));
- }, e => console.error(e));
- },
- contextMenu: this.inspector.onTextBoxContextMenu,
- cssProperties: getCssProperties(this.inspector.toolbox)
- }, event);
- },
-
- /**
- * Shows the box-model highlighter on the currently selected element.
- *
- * @param {Object} options
- * Options passed to the highlighter actor.
- */
- onShowBoxModelHighlighter: (options = {}) => {
- let toolbox = this.inspector.toolbox;
- let nodeFront = this.inspector.selection.nodeFront;
-
- toolbox.highlighterUtils.highlightNodeFront(nodeFront, options);
- },
-
/**
* Handler for a change in the input checkboxes in the GridList component.
* Toggles on/off the grid highlighter for the provided grid container element.
@@ -309,16 +216,9 @@ LayoutView.prototype = {
destroy() {
this.highlighters.off("grid-highlighter-hidden", this.onHighlighterChange);
this.highlighters.off("grid-highlighter-shown", this.onHighlighterChange);
- this.inspector.selection.off("new-node-front", this.onNewSelection);
this.inspector.sidebar.off("select", this.onSidebarSelect);
this.layoutInspector.off("grid-layout-changed", this.onGridLayoutChange);
- if (this.reflowFront) {
- this.untrackReflows();
- this.reflowFront.destroy();
- this.reflowFront = null;
- }
-
this.document = null;
this.inspector = null;
this.layoutInspector = null;
@@ -372,16 +272,6 @@ LayoutView.prototype = {
this.inspector.sidebar.getCurrentTabID() === "layoutview";
},
- /**
- * Returns true if the layout panel is visible and the current node is valid to
- * be displayed in the view.
- */
- isPanelVisibleAndNodeValid() {
- return this.isPanelVisible() &&
- this.inspector.selection.isConnected() &&
- this.inspector.selection.isElementNode();
- },
-
/**
* Load the grid highligher display settings into the store from the stored preferences.
*/
@@ -395,72 +285,6 @@ LayoutView.prototype = {
dispatch(updateShowInfiniteLines(showInfinteLines));
},
- /**
- * Starts listening to reflows in the current tab.
- */
- trackReflows() {
- if (!this.reflowFront) {
- let { target } = this.inspector;
- if (target.form.reflowActor) {
- this.reflowFront = ReflowFront(target.client,
- target.form);
- } else {
- return;
- }
- }
-
- this.reflowFront.on("reflows", this.updateBoxModel);
- this.reflowFront.start();
- },
-
- /**
- * Stops listening to reflows in the current tab.
- */
- untrackReflows() {
- if (!this.reflowFront) {
- return;
- }
-
- this.reflowFront.off("reflows", this.updateBoxModel);
- this.reflowFront.stop();
- },
-
- /**
- * Updates the box model panel by dispatching the new layout data.
- */
- updateBoxModel() {
- let lastRequest = Task.spawn((function* () {
- if (!(this.isPanelVisible() &&
- this.inspector.selection.isConnected() &&
- this.inspector.selection.isElementNode())) {
- return null;
- }
-
- let node = this.inspector.selection.nodeFront;
- let layout = yield this.inspector.pageStyle.getLayout(node, {
- autoMargins: true,
- });
- let styleEntries = yield this.inspector.pageStyle.getApplied(node, {});
- this.elementRules = styleEntries.map(e => e.rule);
-
- // 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;
- }
-
- this._lastRequest = null;
-
- this.inspector.emit("boxmodel-view-updated");
- return null;
- }).bind(this)).catch(console.error);
-
- this._lastRequest = lastRequest;
- },
-
/**
* 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.
@@ -526,17 +350,6 @@ LayoutView.prototype = {
this.store.dispatch(updateGridHighlighted(nodeFront, highlighted));
},
- /**
- * Selection 'new-node-front' event handler.
- */
- onNewSelection: function () {
- if (!this.isPanelVisibleAndNodeValid()) {
- return;
- }
-
- this.updateBoxModel();
- },
-
/**
* Handler for the inspector sidebar select event. Starts listening for
* "grid-layout-changed" if the layout panel is visible. Otherwise, stop
@@ -546,17 +359,10 @@ LayoutView.prototype = {
onSidebarSelect() {
if (!this.isPanelVisible()) {
this.layoutInspector.off("grid-layout-changed", this.onGridLayoutChange);
- this.untrackReflows();
return;
}
- if (this.inspector.selection.isConnected() &&
- this.inspector.selection.isElementNode()) {
- this.trackReflows();
- }
-
this.layoutInspector.on("grid-layout-changed", this.onGridLayoutChange);
- this.updateBoxModel();
this.updateGridPanel();
},
diff --git a/devtools/client/inspector/layout/reducers/moz.build b/devtools/client/inspector/layout/reducers/moz.build
index 50e631af17b1..34867f4e837f 100644
--- a/devtools/client/inspector/layout/reducers/moz.build
+++ b/devtools/client/inspector/layout/reducers/moz.build
@@ -5,7 +5,6 @@
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
DevToolsModules(
- 'box-model.js',
'grids.js',
'highlighter-settings.js',
)
diff --git a/devtools/client/inspector/layout/types.js b/devtools/client/inspector/layout/types.js
index b9c286200ca0..0c0cd3b77473 100644
--- a/devtools/client/inspector/layout/types.js
+++ b/devtools/client/inspector/layout/types.js
@@ -6,16 +6,6 @@
const { PropTypes } = require("devtools/client/shared/vendor/react");
-/**
- * The box model data for the current selected node.
- */
-exports.boxModel = {
-
- // The layout information of the current selected node
- layout: PropTypes.object,
-
-};
-
/**
* A single grid container in the document.
*/
diff --git a/devtools/client/inspector/layout/utils/moz.build b/devtools/client/inspector/layout/utils/moz.build
index 537f779cc3cb..e3053b63fab6 100644
--- a/devtools/client/inspector/layout/utils/moz.build
+++ b/devtools/client/inspector/layout/utils/moz.build
@@ -5,6 +5,5 @@
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
DevToolsModules(
- 'editing-session.js',
'l10n.js',
)
diff --git a/devtools/client/inspector/moz.build b/devtools/client/inspector/moz.build
index 1c5f3e58dd4c..8f1679fd2b39 100644
--- a/devtools/client/inspector/moz.build
+++ b/devtools/client/inspector/moz.build
@@ -3,6 +3,7 @@
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
DIRS += [
+ 'boxmodel',
'components',
'computed',
'fonts',
diff --git a/devtools/client/inspector/reducers.js b/devtools/client/inspector/reducers.js
index 6c09e49c49e4..a6818664560e 100644
--- a/devtools/client/inspector/reducers.js
+++ b/devtools/client/inspector/reducers.js
@@ -7,6 +7,6 @@
// This file exposes the Redux reducers of the box model, grid and grid highlighter
// settings.
-exports.boxModel = require("devtools/client/inspector/layout/reducers/box-model");
+exports.boxModel = require("devtools/client/inspector/boxmodel/reducers/box-model");
exports.grids = require("devtools/client/inspector/layout/reducers/grids");
exports.highlighterSettings = require("devtools/client/inspector/layout/reducers/highlighter-settings");
diff --git a/devtools/client/inspector/test/browser_inspector_textbox-menu.js b/devtools/client/inspector/test/browser_inspector_textbox-menu.js
index a5e0e75622d8..b3e9ca68515c 100644
--- a/devtools/client/inspector/test/browser_inspector_textbox-menu.js
+++ b/devtools/client/inspector/test/browser_inspector_textbox-menu.js
@@ -66,7 +66,7 @@ add_task(function* () {
info("Testing the box-model region");
let margin = inspector.panelDoc.querySelector(
- ".old-boxmodel-margin.old-boxmodel-top > span");
+ ".boxmodel-margin.boxmodel-top > span");
EventUtils.synthesizeMouseAtCenter(margin, {}, inspector.panelWin);
yield checkTextBox(inspector.panelDoc.activeElement, toolbox);
});
diff --git a/devtools/client/inspector/test/shared-head.js b/devtools/client/inspector/test/shared-head.js
index a953d547e7f5..c42690a2813e 100644
--- a/devtools/client/inspector/test/shared-head.js
+++ b/devtools/client/inspector/test/shared-head.js
@@ -52,7 +52,15 @@ var openInspectorSidebarTab = Task.async(function* (id) {
let {toolbox, inspector, testActor} = yield openInspector();
info("Selecting the " + id + " sidebar");
- inspector.sidebar.select(id);
+
+ if (id === "computedview" || id === "layoutview") {
+ // The layout and computed views should wait until the box-model widget is ready.
+ let onBoxModelViewReady = inspector.once("boxmodel-view-updated");
+ inspector.sidebar.select(id);
+ yield onBoxModelViewReady;
+ } else {
+ inspector.sidebar.select(id);
+ }
return {
toolbox,
diff --git a/devtools/client/jar.mn b/devtools/client/jar.mn
index 628a336e45c0..b68d20740c14 100644
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -177,7 +177,6 @@ devtools.jar:
skin/images/noise.png (themes/images/noise.png)
skin/images/dropmarker.svg (themes/images/dropmarker.svg)
skin/boxmodel.css (themes/boxmodel.css)
- skin/deprecated-boxmodel.css (themes/deprecated-boxmodel.css)
skin/images/geometry-editor.svg (themes/images/geometry-editor.svg)
skin/images/pause.svg (themes/images/pause.svg)
skin/images/play.svg (themes/images/play.svg)
diff --git a/devtools/client/shared/browser-loader.js b/devtools/client/shared/browser-loader.js
index ab7505beee9b..3aef74a99bf9 100644
--- a/devtools/client/shared/browser-loader.js
+++ b/devtools/client/shared/browser-loader.js
@@ -12,6 +12,8 @@ const Services = devtools.require("Services");
const { AppConstants } = devtools.require("resource://gre/modules/AppConstants.jsm");
const BROWSER_BASED_DIRS = [
+ "resource://devtools/client/inspector/boxmodel",
+ "resource://devtools/client/inspector/computed",
"resource://devtools/client/inspector/layout",
"resource://devtools/client/jsonview",
"resource://devtools/client/shared/vendor",
diff --git a/devtools/client/themes/deprecated-boxmodel.css b/devtools/client/themes/deprecated-boxmodel.css
deleted file mode 100644
index e1f6d1432e20..000000000000
--- a/devtools/client/themes/deprecated-boxmodel.css
+++ /dev/null
@@ -1,259 +0,0 @@
-/* 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/ */
-
-/**
- * THIS STYLESHEET IS FOR THE DEPRECATED BOX MODEL MODULE (deprecated-box-model.js) AND
- * SHOULD NO LONGER BE MODIFIED.
- */
-
-#old-boxmodel-wrapper {
- border-bottom-style: solid;
- border-bottom-width: 1px;
- border-color: var(--theme-splitter-color);
- -moz-user-select: none;
-}
-
-#old-boxmodel-container {
- /* The view will grow bigger as the window gets resized, until 400px */
- max-width: 400px;
- margin: 0px auto;
- padding: 0;
-}
-
-/* Header */
-
-#old-boxmodel-header,
-#old-boxmodel-info {
- display: flex;
- align-items: center;
- padding: 4px 17px;
-}
-
-#old-layout-geometry-editor {
- visibility: hidden;
-}
-
-#old-layout-geometry-editor::before {
- background: url(images/geometry-editor.svg) no-repeat center center / 16px 16px;
-}
-
-/* Main: contains the box-model regions */
-
-#old-boxmodel-main {
- position: relative;
- box-sizing: border-box;
- /* The regions are semi-transparent, so the white background is partly
- visible */
- background-color: white;
- color: var(--theme-selection-color);
- /* Make sure there is some space between the window's edges and the regions */
- margin: 0 14px 4px 14px;
- width: calc(100% - 2 * 14px);
-}
-
-.old-boxmodel-margin,
-.old-boxmodel-size {
- color: var(--theme-highlight-blue);
-}
-
-/* Regions are 3 nested elements with wide borders and outlines */
-
-#old-boxmodel-content {
- height: 18px;
-}
-
-#old-boxmodel-margins,
-#old-boxmodel-borders,
-#old-boxmodel-padding {
- border-color: hsla(210,100%,85%,0.2);
- border-width: 18px;
- border-style: solid;
- outline: dotted 1px hsl(210,100%,85%);
-}
-
-#old-boxmodel-margins {
- /* This opacity applies to all of the regions, since they are nested */
- opacity: .8;
-}
-
-/* Regions colors */
-
-#old-boxmodel-margins {
- border-color: #edff64;
-}
-
-#old-boxmodel-borders {
- border-color: #444444;
-}
-
-#old-boxmodel-padding {
- border-color: #6a5acd;
-}
-
-#old-boxmodel-content {
- background-color: #87ceeb;
-}
-
-.theme-firebug #old-boxmodel-main,
-.theme-firebug #old-boxmodel-borders,
-.theme-firebug #old-boxmodel-content {
- border-style: solid;
-}
-
-.theme-firebug #old-boxmodel-main,
-.theme-firebug #old-boxmodel-header {
- font-family: var(--proportional-font-family);
-}
-
-.theme-firebug #old-boxmodel-main {
- color: var(--theme-body-color);
- font-size: var(--theme-toolbar-font-size);
-}
-
-.theme-firebug #old-boxmodel-header {
- font-size: var(--theme-toolbar-font-size);
-}
-
-/* Editable region sizes are contained in absolutely positioned
*/
-
-#old-boxmodel-main > p {
- position: absolute;
- pointer-events: none;
- margin: 0;
- text-align: center;
-}
-
-#old-boxmodel-main > p > span,
-#old-boxmodel-main > p > input {
- vertical-align: middle;
- pointer-events: auto;
-}
-
-/* Coordinates for the region sizes */
-
-.old-boxmodel-top,
-.old-boxmodel-bottom {
- width: calc(100% - 2px);
- text-align: center;
-}
-
-.old-boxmodel-padding.old-boxmodel-top {
- top: 37px;
-}
-
-.old-boxmodel-padding.old-boxmodel-bottom {
- bottom: 38px;
-}
-
-.old-boxmodel-border.old-boxmodel-top {
- top: 19px;
-}
-
-.old-boxmodel-border.old-boxmodel-bottom {
- bottom: 20px;
-}
-
-.old-boxmodel-margin.old-boxmodel-top {
- top: 1px;
-}
-
-.old-boxmodel-margin.old-boxmodel-bottom {
- bottom: 2px;
-}
-
-.old-boxmodel-size,
-.old-boxmodel-margin.old-boxmodel-left,
-.old-boxmodel-margin.old-boxmodel-right,
-.old-boxmodel-border.old-boxmodel-left,
-.old-boxmodel-border.old-boxmodel-right,
-.old-boxmodel-padding.old-boxmodel-left,
-.old-boxmodel-padding.old-boxmodel-right {
- top: 22px;
- line-height: 80px;
-}
-
-.old-boxmodel-size {
- width: calc(100% - 2px);
-}
-
-.old-boxmodel-margin.old-boxmodel-right,
-.old-boxmodel-margin.old-boxmodel-left,
-.old-boxmodel-border.old-boxmodel-left,
-.old-boxmodel-border.old-boxmodel-right,
-.old-boxmodel-padding.old-boxmodel-right,
-.old-boxmodel-padding.old-boxmodel-left {
- width: 21px;
-}
-
-.old-boxmodel-padding.old-boxmodel-left {
- left: 35px;
-}
-
-.old-boxmodel-padding.old-boxmodel-right {
- right: 35px;
-}
-
-.old-boxmodel-border.old-boxmodel-left {
- left: 16px;
-}
-
-.old-boxmodel-border.old-boxmodel-right {
- right: 17px;
-}
-
-.old-boxmodel-margin.old-boxmodel-right {
- right: 0;
-}
-
-.old-boxmodel-margin.old-boxmodel-left {
- left: 0;
-}
-
-.old-boxmodel-rotate.old-boxmodel-left:not(.old-boxmodel-editing) {
- transform: rotate(-90deg);
-}
-
-.old-boxmodel-rotate.old-boxmodel-right:not(.old-boxmodel-editing) {
- transform: rotate(90deg);
-}
-
-/* Legend: displayed inside regions */
-
-.old-boxmodel-legend {
- position: absolute;
- margin: 2px 6px;
- z-index: 1;
-}
-
-.old-boxmodel-legend[data-box="margin"] {
- color: var(--theme-highlight-blue);
-}
-
-/* Editable fields */
-
-.old-boxmodel-editable {
- border: 1px dashed transparent;
- -moz-user-select: none;
-}
-
-.old-boxmodel-editable:hover {
- border-bottom-color: hsl(0, 0%, 50%);
-}
-
-/* Make sure the content size doesn't appear as editable like the other sizes */
-
-.old-boxmodel-size > span {
- cursor: default;
-}
-
-/* Box Model Info: contains the position and size of the element */
-
-#old-boxmodel-element-size {
- flex: 1;
-}
-
-#old-boxmodel-position-group {
- display: flex;
- align-items: center;
-}
diff --git a/devtools/server/tests/unit/test_frameactor_wasm-01.js b/devtools/server/tests/unit/test_frameactor_wasm-01.js
index 63376ae9efce..bc941b32283a 100644
--- a/devtools/server/tests/unit/test_frameactor_wasm-01.js
+++ b/devtools/server/tests/unit/test_frameactor_wasm-01.js
@@ -8,13 +8,9 @@
var gDebuggee;
var gClient;
var gThreadClient;
-var gOldPref;
function run_test()
{
- gOldPref = Services.prefs.getBoolPref("javascript.options.wasm");
- Services.prefs.setBoolPref("javascript.options.wasm", true);
-
if (typeof WebAssembly == "undefined") {
return; // wasm is not enabled for this platform
}
@@ -49,7 +45,6 @@ function test_pause_frame()
do_check_eq(location.column > 0, true);
do_check_eq(location.source.url.endsWith(" > wasm"), true);
- Services.prefs.setBoolPref("javascript.options.wasm", gOldPref);
finishClient(gClient);
});
});
@@ -58,7 +53,7 @@ function test_pause_frame()
// WebAssembly bytecode was generated by running:
// js -e 'print(wasmTextToBinary("(module(import \"a\" \"b\")(func(export \"c\")call 0))"))'
var m = new WebAssembly.Module(new Uint8Array([
- 0,97,115,109,13,0,0,0,1,132,128,128,128,0,1,96,0,0,2,135,128,128,128,0,1,1,97,1,
+ 0,97,115,109,1,0,0,0,1,132,128,128,128,0,1,96,0,0,2,135,128,128,128,0,1,1,97,1,
98,0,0,3,130,128,128,128,0,1,0,6,129,128,128,128,0,0,7,133,128,128,128,0,1,1,99,
0,1,10,138,128,128,128,0,1,132,128,128,128,0,0,16,0,11
]));
diff --git a/dom/base/CustomElementRegistry.cpp b/dom/base/CustomElementRegistry.cpp
index 2fcd326e11bb..362c43ff8ca9 100644
--- a/dom/base/CustomElementRegistry.cpp
+++ b/dom/base/CustomElementRegistry.cpp
@@ -172,7 +172,7 @@ NS_INTERFACE_MAP_END
CustomElementRegistry::IsCustomElementEnabled(JSContext* aCx, JSObject* aObject)
{
return Preferences::GetBool("dom.webcomponents.customelements.enabled") ||
- Preferences::GetBool("dom.webcomponents.enabled");
+ nsContentUtils::IsWebComponentsEnabled();
}
/* static */ already_AddRefed
diff --git a/dom/base/nsContentUtils.cpp b/dom/base/nsContentUtils.cpp
index c09827e9497b..27d92cef1109 100644
--- a/dom/base/nsContentUtils.cpp
+++ b/dom/base/nsContentUtils.cpp
@@ -285,6 +285,7 @@ bool nsContentUtils::sIsPerformanceTimingEnabled = false;
bool nsContentUtils::sIsResourceTimingEnabled = false;
bool nsContentUtils::sIsUserTimingLoggingEnabled = false;
bool nsContentUtils::sIsExperimentalAutocompleteEnabled = false;
+bool nsContentUtils::sIsWebComponentsEnabled = false;
bool nsContentUtils::sEncodeDecodeURLHash = false;
bool nsContentUtils::sGettersDecodeURLHash = false;
bool nsContentUtils::sPrivacyResistFingerprinting = false;
@@ -512,10 +513,11 @@ nsContentUtils::Init()
sSecurityManager->GetSystemPrincipal(&sSystemPrincipal);
MOZ_ASSERT(sSystemPrincipal);
- // We use the constructor here because we want infallible initialization; we
- // apparently don't care whether sNullSubjectPrincipal has a sane URI or not.
- RefPtr nullPrincipal = new nsNullPrincipal();
- nullPrincipal->Init();
+ RefPtr nullPrincipal = nsNullPrincipal::Create();
+ if (!nullPrincipal) {
+ return NS_ERROR_FAILURE;
+ }
+
nullPrincipal.forget(&sNullSubjectPrincipal);
nsresult rv = CallGetService(NS_IOSERVICE_CONTRACTID, &sIOService);
@@ -582,6 +584,9 @@ nsContentUtils::Init()
Preferences::AddBoolVarCache(&sIsExperimentalAutocompleteEnabled,
"dom.forms.autocomplete.experimental", false);
+ Preferences::AddBoolVarCache(&sIsWebComponentsEnabled,
+ "dom.webcomponents.enabled", false);
+
Preferences::AddBoolVarCache(&sEncodeDecodeURLHash,
"dom.url.encode_decode_hash", false);
diff --git a/dom/base/nsContentUtils.h b/dom/base/nsContentUtils.h
index af250c46c05b..e7889f9d1cbe 100644
--- a/dom/base/nsContentUtils.h
+++ b/dom/base/nsContentUtils.h
@@ -2806,6 +2806,9 @@ public:
const mozilla::dom::Sequence& aTransfer,
JS::MutableHandle aValue);
+ static bool
+ IsWebComponentsEnabled() { return sIsWebComponentsEnabled; }
+
private:
static bool InitializeEventTable();
@@ -2912,6 +2915,7 @@ private:
static bool sIsUserTimingLoggingEnabled;
static bool sIsFrameTimingPrefEnabled;
static bool sIsExperimentalAutocompleteEnabled;
+ static bool sIsWebComponentsEnabled;
static bool sEncodeDecodeURLHash;
static bool sGettersDecodeURLHash;
static bool sPrivacyResistFingerprinting;
diff --git a/dom/base/nsDocument.cpp b/dom/base/nsDocument.cpp
index f926212d9d05..708ca29b3103 100644
--- a/dom/base/nsDocument.cpp
+++ b/dom/base/nsDocument.cpp
@@ -104,6 +104,7 @@
#include "nsIScriptSecurityManager.h"
#include "nsIPermissionManager.h"
#include "nsIPrincipal.h"
+#include "nsNullPrincipal.h"
#include "nsIDOMWindow.h"
#include "nsPIDOMWindow.h"
@@ -2736,7 +2737,7 @@ nsDocument::InitCSP(nsIChannel* aChannel)
if (cspSandboxFlags & SANDBOXED_ORIGIN) {
// If the new CSP sandbox flags do not have the allow-same-origin flag
// reset the document principal to a null principal
- principal = do_CreateInstance("@mozilla.org/nullprincipal;1");
+ principal = nsNullPrincipal::Create();
SetPrincipal(principal);
}
@@ -5941,7 +5942,7 @@ nsDocument::IsWebComponentsEnabled(JSContext* aCx, JSObject* aObject)
{
JS::Rooted obj(aCx, aObject);
- if (Preferences::GetBool("dom.webcomponents.enabled")) {
+ if (nsContentUtils::IsWebComponentsEnabled()) {
return true;
}
@@ -5957,7 +5958,7 @@ nsDocument::IsWebComponentsEnabled(JSContext* aCx, JSObject* aObject)
bool
nsDocument::IsWebComponentsEnabled(dom::NodeInfo* aNodeInfo)
{
- if (Preferences::GetBool("dom.webcomponents.enabled")) {
+ if (nsContentUtils::IsWebComponentsEnabled()) {
return true;
}
diff --git a/dom/base/nsGlobalWindow.cpp b/dom/base/nsGlobalWindow.cpp
index 5f867545f177..3a9887d6bde9 100644
--- a/dom/base/nsGlobalWindow.cpp
+++ b/dom/base/nsGlobalWindow.cpp
@@ -9406,21 +9406,16 @@ public:
nsAutoString addonId;
if (NS_SUCCEEDED(pc->GetAddonId(addonId)) && !addonId.IsEmpty()) {
// We want to nuke all references to the add-on compartment.
- js::NukeCrossCompartmentWrappers(cx, js::AllCompartments(),
- js::SingleCompartment(cpt),
- win->IsInnerWindow() ? js::DontNukeWindowReferences
- : js::NukeWindowReferences);
-
- // Now mark the compartment as nuked and non-scriptable.
- auto compartmentPrivate = xpc::CompartmentPrivate::Get(cpt);
- compartmentPrivate->wasNuked = true;
- compartmentPrivate->scriptability.Block();
+ xpc::NukeAllWrappersForCompartment(cx, cpt,
+ win->IsInnerWindow() ? js::DontNukeWindowReferences
+ : js::NukeWindowReferences);
} else {
// We only want to nuke wrappers for the chrome->content case
js::NukeCrossCompartmentWrappers(cx, BrowserCompartmentMatcher(),
js::SingleCompartment(cpt),
win->IsInnerWindow() ? js::DontNukeWindowReferences
- : js::NukeWindowReferences);
+ : js::NukeWindowReferences,
+ js::NukeIncomingReferences);
}
}
}
diff --git a/dom/base/test/test_postMessages.html b/dom/base/test/test_postMessages.html
index 13a284270083..f4cd87432fb9 100644
--- a/dom/base/test/test_postMessages.html
+++ b/dom/base/test/test_postMessages.html
@@ -11,8 +11,7 @@