diff --git a/devtools/client/inspector/components/deprecated-box-model.js b/devtools/client/inspector/components/deprecated-box-model.js deleted file mode 100644 index 874a79939c97..000000000000 --- a/devtools/client/inspector/components/deprecated-box-model.js +++ /dev/null @@ -1,912 +0,0 @@ -/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */ -/* vim: set ft=javascript ts=2 et sw=2 tw=80: */ -/* 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 MODULE IS DEPRECATED. - * - * To continue any work related to the box model view, see the new react/redux - * implementation in devtools/client/inspector/layout/. - */ - -"use strict"; - -const {Task} = require("devtools/shared/task"); -const {InplaceEditor, editableItem} = - require("devtools/client/shared/inplace-editor"); -const {ReflowFront} = require("devtools/shared/fronts/reflow"); -const {LocalizationHelper} = require("devtools/shared/l10n"); -const {getCssProperties} = require("devtools/shared/fronts/css-properties"); -const {KeyCodes} = require("devtools/client/shared/keycodes"); -const EditingSession = require("devtools/client/inspector/layout/utils/editing-session"); - -const STRINGS_URI = "devtools/client/locales/shared.properties"; -const STRINGS_INSPECTOR = "devtools/shared/locales/styleinspector.properties"; -const SHARED_L10N = new LocalizationHelper(STRINGS_URI); -const INSPECTOR_L10N = new LocalizationHelper(STRINGS_INSPECTOR); -const NUMERIC = /^-?[\d\.]+$/; -const LONG_TEXT_ROTATE_LIMIT = 3; - -/** - * The box model view - * @param {InspectorPanel} inspector - * An instance of the inspector-panel currently loaded in the toolbox - * @param {Document} document - * The document that will contain the box model view. - */ -function BoxModelView(inspector, document) { - this.inspector = inspector; - this.doc = document; - this.wrapper = this.doc.getElementById("old-boxmodel-wrapper"); - this.container = this.doc.getElementById("old-boxmodel-container"); - this.expander = this.doc.getElementById("old-boxmodel-expander"); - this.sizeLabel = this.doc.querySelector(".old-boxmodel-size > span"); - this.sizeHeadingLabel = this.doc.getElementById("old-boxmodel-element-size"); - this._geometryEditorHighlighter = null; - this._cssProperties = getCssProperties(inspector.toolbox); - - this.init(); -} - -BoxModelView.prototype = { - init: function () { - this.update = this.update.bind(this); - - this.onNewSelection = this.onNewSelection.bind(this); - this.inspector.selection.on("new-node-front", this.onNewSelection); - - this.onNewNode = this.onNewNode.bind(this); - this.inspector.sidebar.on("computedview-selected", this.onNewNode); - - this.onSidebarSelect = this.onSidebarSelect.bind(this); - this.inspector.sidebar.on("select", this.onSidebarSelect); - - this.onToggleExpander = this.onToggleExpander.bind(this); - this.expander.addEventListener("click", this.onToggleExpander); - let header = this.doc.getElementById("old-boxmodel-header"); - header.addEventListener("dblclick", this.onToggleExpander); - - this.onFilterComputedView = this.onFilterComputedView.bind(this); - this.inspector.on("computed-view-filtered", - this.onFilterComputedView); - - this.onPickerStarted = this.onPickerStarted.bind(this); - this.onMarkupViewLeave = this.onMarkupViewLeave.bind(this); - this.onMarkupViewNodeHover = this.onMarkupViewNodeHover.bind(this); - this.onWillNavigate = this.onWillNavigate.bind(this); - this.onKeyDown = this.onKeyDown.bind(this); - this.onLevelClick = this.onLevelClick.bind(this); - this.setAriaActive = this.setAriaActive.bind(this); - this.getEditBoxes = this.getEditBoxes.bind(this); - this.makeFocusable = this.makeFocusable.bind(this); - this.makeUnfocasable = this.makeUnfocasable.bind(this); - this.moveFocus = this.moveFocus.bind(this); - this.onFocus = this.onFocus.bind(this); - - this.borderLayout = this.doc.getElementById("old-boxmodel-borders"); - this.boxModel = this.doc.getElementById("old-boxmodel-wrapper"); - this.marginLayout = this.doc.getElementById("old-boxmodel-margins"); - this.paddingLayout = this.doc.getElementById("old-boxmodel-padding"); - - this.layouts = { - "margin": new Map([ - [KeyCodes.DOM_VK_ESCAPE, this.marginLayout], - [KeyCodes.DOM_VK_DOWN, this.borderLayout], - [KeyCodes.DOM_VK_UP, null], - ["click", this.marginLayout] - ]), - "border": new Map([ - [KeyCodes.DOM_VK_ESCAPE, this.borderLayout], - [KeyCodes.DOM_VK_DOWN, this.paddingLayout], - [KeyCodes.DOM_VK_UP, this.marginLayout], - ["click", this.borderLayout] - ]), - "padding": new Map([ - [KeyCodes.DOM_VK_ESCAPE, this.paddingLayout], - [KeyCodes.DOM_VK_DOWN, null], - [KeyCodes.DOM_VK_UP, this.borderLayout], - ["click", this.paddingLayout] - ]) - }; - - this.boxModel.addEventListener("click", this.onLevelClick, true); - this.boxModel.addEventListener("focus", this.onFocus, true); - this.boxModel.addEventListener("keydown", this.onKeyDown, true); - - this.initBoxModelHighlighter(); - - // Store for the different dimensions of the node. - // 'selector' refers to the element that holds the value; - // 'property' is what we are measuring; - // 'value' is the computed dimension, computed in update(). - this.map = { - position: { - selector: "#old-boxmodel-element-position", - property: "position", - value: undefined - }, - marginTop: { - selector: ".old-boxmodel-margin.old-boxmodel-top > span", - property: "margin-top", - value: undefined - }, - marginBottom: { - selector: ".old-boxmodel-margin.old-boxmodel-bottom > span", - property: "margin-bottom", - value: undefined - }, - marginLeft: { - selector: ".old-boxmodel-margin.old-boxmodel-left > span", - property: "margin-left", - value: undefined - }, - marginRight: { - selector: ".old-boxmodel-margin.old-boxmodel-right > span", - property: "margin-right", - value: undefined - }, - paddingTop: { - selector: ".old-boxmodel-padding.old-boxmodel-top > span", - property: "padding-top", - value: undefined - }, - paddingBottom: { - selector: ".old-boxmodel-padding.old-boxmodel-bottom > span", - property: "padding-bottom", - value: undefined - }, - paddingLeft: { - selector: ".old-boxmodel-padding.old-boxmodel-left > span", - property: "padding-left", - value: undefined - }, - paddingRight: { - selector: ".old-boxmodel-padding.old-boxmodel-right > span", - property: "padding-right", - value: undefined - }, - borderTop: { - selector: ".old-boxmodel-border.old-boxmodel-top > span", - property: "border-top-width", - value: undefined - }, - borderBottom: { - selector: ".old-boxmodel-border.old-boxmodel-bottom > span", - property: "border-bottom-width", - value: undefined - }, - borderLeft: { - selector: ".old-boxmodel-border.old-boxmodel-left > span", - property: "border-left-width", - value: undefined - }, - borderRight: { - selector: ".old-boxmodel-border.old-boxmodel-right > span", - property: "border-right-width", - value: undefined - } - }; - - // Make each element the dimensions editable - for (let i in this.map) { - if (i == "position") { - continue; - } - - let dimension = this.map[i]; - editableItem({ - element: this.doc.querySelector(dimension.selector) - }, (element, event) => { - this.initEditor(element, event, dimension); - }); - } - - this.onNewNode(); - - let nodeGeometry = this.doc.getElementById("old-layout-geometry-editor"); - this.onGeometryButtonClick = this.onGeometryButtonClick.bind(this); - nodeGeometry.addEventListener("click", this.onGeometryButtonClick); - }, - - initBoxModelHighlighter: function () { - let highlightElts = this.doc.querySelectorAll("#old-boxmodel-container *[title]"); - this.onHighlightMouseOver = this.onHighlightMouseOver.bind(this); - this.onHighlightMouseOut = this.onHighlightMouseOut.bind(this); - - for (let element of highlightElts) { - element.addEventListener("mouseover", this.onHighlightMouseOver, true); - element.addEventListener("mouseout", this.onHighlightMouseOut, true); - } - }, - - /** - * Start listening to reflows in the current tab. - */ - trackReflows: function () { - 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.update); - this.reflowFront.start(); - }, - - /** - * Stop listening to reflows in the current tab. - */ - untrackReflows: function () { - if (!this.reflowFront) { - return; - } - - this.reflowFront.off("reflows", this.update); - this.reflowFront.stop(); - }, - - /** - * Called when the user clicks on one of the editable values in the box model view - */ - initEditor: function (element, event, dimension) { - let { property } = dimension; - let session = new EditingSession(this); - let initialValue = session.getProperty(property); - - let editor = new InplaceEditor({ - element: element, - initial: initialValue, - contentType: InplaceEditor.CONTENT_TYPES.CSS_VALUE, - property: { - name: dimension.property - }, - start: self => { - self.elt.parentNode.classList.add("old-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("old-boxmodel-editing"); - if (!commit) { - session.revert().then(() => { - session.destroy(); - }, e => console.error(e)); - } - }, - contextMenu: this.inspector.onTextBoxContextMenu, - cssProperties: this._cssProperties - }, event); - }, - - /** - * Is the BoxModelView visible in the sidebar. - * @return {Boolean} - */ - isViewVisible: function () { - return this.inspector && - this.inspector.sidebar.getCurrentTabID() == "computedview"; - }, - - /** - * Is the BoxModelView visible in the sidebar and is the current node valid to - * be displayed in the view. - * @return {Boolean} - */ - isViewVisibleAndNodeValid: function () { - return this.isViewVisible() && - this.inspector.selection.isConnected() && - this.inspector.selection.isElementNode(); - }, - - /** - * Destroy the nodes. Remove listeners. - */ - destroy: function () { - let highlightElts = this.doc.querySelectorAll("#old-boxmodel-container *[title]"); - - for (let element of highlightElts) { - element.removeEventListener("mouseover", this.onHighlightMouseOver, true); - element.removeEventListener("mouseout", this.onHighlightMouseOut, true); - } - - this.expander.removeEventListener("click", this.onToggleExpander); - let header = this.doc.getElementById("old-boxmodel-header"); - header.removeEventListener("dblclick", this.onToggleExpander); - - let nodeGeometry = this.doc.getElementById("old-layout-geometry-editor"); - nodeGeometry.removeEventListener("click", this.onGeometryButtonClick); - - this.boxModel.removeEventListener("click", this.onLevelClick, true); - this.boxModel.removeEventListener("focus", this.onFocus, true); - this.boxModel.removeEventListener("keydown", this.onKeyDown, true); - - this.inspector.off("picker-started", this.onPickerStarted); - - // Inspector Panel will destroy `markup` object on "will-navigate" event, - // therefore we have to check if it's still available in case BoxModelView - // is destroyed immediately after. - if (this.inspector.markup) { - this.inspector.markup.off("leave", this.onMarkupViewLeave); - this.inspector.markup.off("node-hover", this.onMarkupViewNodeHover); - } - - this.inspector.sidebar.off("computedview-selected", this.onNewNode); - this.inspector.selection.off("new-node-front", this.onNewSelection); - this.inspector.sidebar.off("select", this.onSidebarSelect); - this.inspector.target.off("will-navigate", this.onWillNavigate); - this.inspector.off("computed-view-filtered", this.onFilterComputedView); - - this.inspector = null; - this.doc = null; - this.wrapper = null; - this.container = null; - this.expander = null; - this.sizeLabel = null; - this.sizeHeadingLabel = null; - - this.marginLayout = null; - this.borderLayout = null; - this.paddingLayout = null; - this.boxModel = null; - this.layouts = null; - - if (this.reflowFront) { - this.untrackReflows(); - this.reflowFront.destroy(); - this.reflowFront = null; - } - }, - - /** - * Set initial box model focus to the margin layout. - */ - onFocus: function () { - let activeDescendant = this.boxModel.getAttribute("aria-activedescendant"); - - if (!activeDescendant) { - let nextLayout = this.marginLayout; - this.setAriaActive(nextLayout); - } - }, - - /** - * Active aria-level set to current layout. - * - * @param {Element} nextLayout - * Element of next layout that user has navigated to - * @param {Node} target - * Node to be observed - */ - setAriaActive: function (nextLayout, target) { - this.boxModel.setAttribute("aria-activedescendant", nextLayout.id); - if (target && target._editable) { - target.blur(); - } - - // Clear all - this.marginLayout.classList.remove("layout-active-elm"); - this.borderLayout.classList.remove("layout-active-elm"); - this.paddingLayout.classList.remove("layout-active-elm"); - - // Set the next level's border outline - nextLayout.classList.add("layout-active-elm"); - }, - - /** - * Update aria-active on mouse click. - * - * @param {Event} event - * The event triggered by a mouse click on the box model - */ - onLevelClick: function (event) { - let {target} = event; - let nextLayout = this.layouts[target.getAttribute("data-box")].get("click"); - - this.setAriaActive(nextLayout, target); - }, - - /** - * Handle keyboard navigation and focus for box model layouts. - * - * Updates active layout on arrow key navigation - * Focuses next layout's editboxes on enter key - * Unfocuses current layout's editboxes when active layout changes - * Controls tabbing between editBoxes - * - * @param {Event} event - * The event triggered by a keypress on the box model - */ - onKeyDown: function (event) { - let {target, keyCode} = event; - // If focused on editable value or in editing mode - let isEditable = target._editable || target.editor; - let level = this.boxModel.getAttribute("aria-activedescendant"); - let editingMode = target.tagName === "input"; - let nextLayout; - - switch (keyCode) { - case KeyCodes.DOM_VK_RETURN: - if (!isEditable) { - this.makeFocusable(level); - } - break; - case KeyCodes.DOM_VK_DOWN: - case KeyCodes.DOM_VK_UP: - if (!editingMode) { - event.preventDefault(); - this.makeUnfocasable(level); - let datalevel = this.doc.getElementById(level).getAttribute("data-box"); - nextLayout = this.layouts[datalevel].get(keyCode); - this.boxModel.focus(); - } - break; - case KeyCodes.DOM_VK_TAB: - if (isEditable) { - event.preventDefault(); - this.moveFocus(event, level); - } - break; - case KeyCodes.DOM_VK_ESCAPE: - if (isEditable && target._editable) { - event.preventDefault(); - event.stopPropagation(); - this.makeUnfocasable(level); - this.boxModel.focus(); - } - break; - default: - break; - } - - if (nextLayout) { - this.setAriaActive(nextLayout, target); - } - }, - - /** - * Make previous layout's elements unfocusable. - * - * @param {String} editLevel - * The previous layout - */ - makeUnfocasable: function (editLevel) { - let editBoxes = this.getEditBoxes(editLevel); - editBoxes.forEach(editBox => editBox.setAttribute("tabindex", "-1")); - }, - - /** - * Make current layout's elements focusable. - * - * @param {String} editLevel - * The current layout - */ - makeFocusable: function (editLevel) { - let editBoxes = this.getEditBoxes(editLevel); - editBoxes.forEach(editBox => editBox.setAttribute("tabindex", "0")); - editBoxes[0].focus(); - }, - - /** - * Keyboard navigation of edit boxes wraps around on edge - * elements ([layout]-top, [layout]-left). - * - * @param {Node} target - * Node to be observed - * @param {Boolean} shiftKey - * Determines if shiftKey was pressed - * @param {String} level - * Current active layout - */ - moveFocus: function ({target, shiftKey}, level) { - let editBoxes = this.getEditBoxes(level); - let editingMode = target.tagName === "input"; - // target.nextSibling is input field - let position = editingMode ? editBoxes.indexOf(target.nextSibling) - : editBoxes.indexOf(target); - - if (position === editBoxes.length - 1 && !shiftKey) { - position = 0; - } else if (position === 0 && shiftKey) { - position = editBoxes.length - 1; - } else { - shiftKey ? position-- : position++; - } - - let editBox = editBoxes[position]; - editBox.focus(); - - if (editingMode) { - editBox.click(); - } - }, - - /** - * Retrieve edit boxes for current layout. - * - * @param {String} editLevel - * Current active layout - * @return Layout's edit boxes - */ - getEditBoxes: function (editLevel) { - let dataLevel = this.doc.getElementById(editLevel).getAttribute("data-box"); - return [...this.doc.querySelectorAll( - `[data-box="${dataLevel}"].old-boxmodel-editable`)]; - }, - - onSidebarSelect: function (e, sidebar) { - this.setActive(sidebar === "computedview"); - }, - - /** - * Selection 'new-node-front' event handler. - */ - onNewSelection: function () { - let done = this.inspector.updating("computed-view"); - this.onNewNode() - .then(() => this.hideGeometryEditor()) - .then(done, (err) => { - console.error(err); - done(); - }).catch(console.error); - }, - - /** - * @return a promise that resolves when the view has been updated - */ - onNewNode: function () { - this.setActive(this.isViewVisibleAndNodeValid()); - return this.update(); - }, - - onHighlightMouseOver: function (e) { - let region = e.target.getAttribute("data-box"); - if (!region) { - return; - } - - this.showBoxModel({ - region, - showOnly: region, - onlyRegionArea: true - }); - }, - - onHighlightMouseOut: function () { - this.hideBoxModel(); - }, - - onGeometryButtonClick: function ({target}) { - if (target.hasAttribute("checked")) { - target.removeAttribute("checked"); - this.hideGeometryEditor(); - } else { - target.setAttribute("checked", "true"); - this.showGeometryEditor(); - } - }, - - onPickerStarted: function () { - this.hideGeometryEditor(); - }, - - onToggleExpander: function () { - let isOpen = this.expander.hasAttribute("open"); - - if (isOpen) { - this.container.hidden = true; - this.expander.removeAttribute("open"); - } else { - this.container.hidden = false; - this.expander.setAttribute("open", ""); - } - }, - - onMarkupViewLeave: function () { - this.showGeometryEditor(true); - }, - - onMarkupViewNodeHover: function () { - this.hideGeometryEditor(false); - }, - - onWillNavigate: function () { - this._geometryEditorHighlighter.release().catch(console.error); - this._geometryEditorHighlighter = null; - }, - - /** - * Event handler that responds to the computed view being filtered - * @param {String} reason - * @param {Boolean} hidden - * Whether or not to hide the box model wrapper - */ - onFilterComputedView: function (reason, hidden) { - this.wrapper.hidden = hidden; - }, - - /** - * Stop tracking reflows and hide all values when no node is selected or the - * box model view is hidden, otherwise track reflows and show values. - * @param {Boolean} isActive - */ - setActive: function (isActive) { - if (isActive === this.isActive) { - return; - } - this.isActive = isActive; - - if (isActive) { - this.trackReflows(); - } else { - this.untrackReflows(); - } - }, - - /** - * Compute the dimensions of the node and update the values in - * the inspector.xul document. - * @return a promise that will be resolved when complete. - */ - update: function () { - let lastRequest = Task.spawn((function* () { - if (!this.isViewVisibleAndNodeValid()) { - this.wrapper.hidden = true; - this.inspector.emit("boxmodel-view-updated"); - return null; - } - - let node = this.inspector.selection.nodeFront; - let layout = yield this.inspector.pageStyle.getLayout(node, { - autoMargins: this.isActive - }); - let styleEntries = yield this.inspector.pageStyle.getApplied(node, {}); - - yield this.updateGeometryButton(); - - // If a subsequent request has been made, wait for that one instead. - if (this._lastRequest != lastRequest) { - return this._lastRequest; - } - - this._lastRequest = null; - let width = layout.width; - let height = layout.height; - let newLabel = SHARED_L10N.getFormatStr("dimensions", width, height); - - if (this.sizeHeadingLabel.textContent != newLabel) { - this.sizeHeadingLabel.textContent = newLabel; - } - - for (let i in this.map) { - let property = this.map[i].property; - if (!(property in layout)) { - // Depending on the actor version, some properties - // might be missing. - continue; - } - let parsedValue = parseFloat(layout[property]); - if (Number.isNaN(parsedValue)) { - // Not a number. We use the raw string. - // Useful for "position" for example. - this.map[i].value = layout[property]; - } else { - this.map[i].value = parsedValue; - } - } - - let margins = layout.autoMargins; - if ("top" in margins) { - this.map.marginTop.value = "auto"; - } - if ("right" in margins) { - this.map.marginRight.value = "auto"; - } - if ("bottom" in margins) { - this.map.marginBottom.value = "auto"; - } - if ("left" in margins) { - this.map.marginLeft.value = "auto"; - } - - for (let i in this.map) { - let selector = this.map[i].selector; - let span = this.doc.querySelector(selector); - this.updateSourceRuleTooltip(span, this.map[i].property, styleEntries); - if (span.textContent.length > 0 && - span.textContent == this.map[i].value) { - continue; - } - span.textContent = this.map[i].value; - this.manageOverflowingText(span); - } - - width -= this.map.borderLeft.value + this.map.borderRight.value + - this.map.paddingLeft.value + this.map.paddingRight.value; - width = parseFloat(width.toPrecision(6)); - height -= this.map.borderTop.value + this.map.borderBottom.value + - this.map.paddingTop.value + this.map.paddingBottom.value; - height = parseFloat(height.toPrecision(6)); - - let newValue = width + "\u00D7" + height; - if (this.sizeLabel.textContent != newValue) { - this.sizeLabel.textContent = newValue; - } - - this.elementRules = styleEntries.map(e => e.rule); - - this.wrapper.hidden = false; - - this.inspector.emit("boxmodel-view-updated"); - return null; - }).bind(this)).catch(console.error); - - this._lastRequest = lastRequest; - return this._lastRequest; - }, - - /** - * Update the text in the tooltip shown when hovering over a value to provide - * information about the source CSS rule that sets this value. - * @param {DOMNode} el The element that will receive the tooltip. - * @param {String} property The name of the CSS property for the tooltip. - * @param {Array} rules An array of applied rules retrieved by - * styleActor.getApplied. - */ - updateSourceRuleTooltip: function (el, property, rules) { - // Dummy element used to parse the cssText of applied rules. - let dummyEl = this.doc.createElement("div"); - - // Rules are in order of priority so iterate until we find the first that - // defines a value for the property. - let sourceRule, value; - for (let {rule} of rules) { - dummyEl.style.cssText = rule.cssText; - value = dummyEl.style.getPropertyValue(property); - if (value !== "") { - sourceRule = rule; - break; - } - } - - let title = property; - if (sourceRule && sourceRule.selectors) { - title += "\n" + sourceRule.selectors.join(", "); - } - if (sourceRule && sourceRule.parentStyleSheet) { - if (sourceRule.parentStyleSheet.href) { - title += "\n" + sourceRule.parentStyleSheet.href + ":" + sourceRule.line; - } else { - title += "\n" + INSPECTOR_L10N.getStr("rule.sourceInline") + - ":" + sourceRule.line; - } - } - - el.setAttribute("title", title); - }, - - /** - * Show the box-model highlighter on the currently selected element - * @param {Object} options Options passed to the highlighter actor - */ - showBoxModel: function (options = {}) { - let toolbox = this.inspector.toolbox; - let nodeFront = this.inspector.selection.nodeFront; - - toolbox.highlighterUtils.highlightNodeFront(nodeFront, options); - }, - - /** - * Hide the box-model highlighter on the currently selected element - */ - hideBoxModel: function () { - let toolbox = this.inspector.toolbox; - - toolbox.highlighterUtils.unhighlight(); - }, - - /** - * Show the geometry editor highlighter on the currently selected element - * @param {Boolean} [showOnlyIfActive=false] - * Indicates if the Geometry Editor should be shown only if it's active but - * hidden. - */ - showGeometryEditor: function (showOnlyIfActive = false) { - let toolbox = this.inspector.toolbox; - let nodeFront = this.inspector.selection.nodeFront; - let nodeGeometry = this.doc.getElementById("old-layout-geometry-editor"); - let isActive = nodeGeometry.hasAttribute("checked"); - - if (showOnlyIfActive && !isActive) { - return; - } - - if (this._geometryEditorHighlighter) { - this._geometryEditorHighlighter.show(nodeFront).catch(console.error); - return; - } - - // instantiate Geometry Editor highlighter - toolbox.highlighterUtils - .getHighlighterByType("GeometryEditorHighlighter").then(highlighter => { - highlighter.show(nodeFront).catch(console.error); - this._geometryEditorHighlighter = highlighter; - - // Hide completely the geometry editor if the picker is clicked - toolbox.on("picker-started", this.onPickerStarted); - - // Temporary hide the geometry editor - this.inspector.markup.on("leave", this.onMarkupViewLeave); - this.inspector.markup.on("node-hover", this.onMarkupViewNodeHover); - - // Release the actor on will-navigate event - this.inspector.target.once("will-navigate", this.onWillNavigate); - }); - }, - - /** - * Hide the geometry editor highlighter on the currently selected element - * @param {Boolean} [updateButton=true] - * Indicates if the Geometry Editor's button needs to be unchecked too - */ - hideGeometryEditor: function (updateButton = true) { - if (this._geometryEditorHighlighter) { - this._geometryEditorHighlighter.hide().catch(console.error); - } - - if (updateButton) { - let nodeGeometry = this.doc.getElementById("old-layout-geometry-editor"); - nodeGeometry.removeAttribute("checked"); - } - }, - - /** - * Update the visibility and the state of the geometry editor button, - * based on the selected node. - */ - updateGeometryButton: Task.async(function* () { - let node = this.inspector.selection.nodeFront; - let isEditable = false; - - if (node) { - isEditable = yield this.inspector.pageStyle.isPositionEditable(node); - } - - let nodeGeometry = this.doc.getElementById("old-layout-geometry-editor"); - nodeGeometry.style.visibility = isEditable ? "visible" : "hidden"; - }), - - manageOverflowingText: function (span) { - let classList = span.parentNode.classList; - - if (classList.contains("old-boxmodel-left") || - classList.contains("old-boxmodel-right")) { - let force = span.textContent.length > LONG_TEXT_ROTATE_LIMIT; - classList.toggle("old-boxmodel-rotate", force); - } - } -}; - -module.exports = BoxModelView; diff --git a/devtools/client/inspector/components/moz.build b/devtools/client/inspector/components/moz.build index 23d85edcdb23..0ef321ae1da1 100644 --- a/devtools/client/inspector/components/moz.build +++ b/devtools/client/inspector/components/moz.build @@ -5,7 +5,6 @@ # file, You can obtain one at http://mozilla.org/MPL/2.0/. DevToolsModules( - 'deprecated-box-model.js', 'inspector-tab-panel.css', 'inspector-tab-panel.js', )