The Tor Browser: comparison browser/devtools/layoutview/view.js

comparison: browser/devtools/layoutview/view.js

browser/devtools/layoutview/view.js

branch: TOR_BUG_9701
changeset 10: ac0c01689b40

equal deleted inserted replaced

--1:000000000000
+:761eee76a708
+/* -*- Mode: Javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 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/. */
+"use strict";
+const Cu = Components.utils;
+const Ci = Components.interfaces;
+const Cc = Components.classes;
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource://gre/modules/Task.jsm");
+Cu.import("resource://gre/modules/devtools/Loader.jsm");
+Cu.import("resource://gre/modules/devtools/Console.jsm");
+const {Promise: promise} = Cu.import("resource://gre/modules/Promise.jsm", {});
+const {InplaceEditor, editableItem} = devtools.require("devtools/shared/inplace-editor");
+const {parseDeclarations} = devtools.require("devtools/styleinspector/css-parsing-utils");
+const NUMERIC = /^-?[\d\.]+$/;
+const LONG_TEXT_ROTATE_LIMIT = 3;
+/**
+* An instance of EditingSession tracks changes that have been made during the
+* modification of box model values. All of these changes can be reverted by
+* calling revert.
+*
+* @param doc    A DOM document that can be used to test style rules.
+* @param rules  An array of the style rules defined for the node being edited.
+*               These should be in order of priority, least important first.
+*/
+function EditingSession(doc, rules) {
+this._doc = doc;
+this._rules = rules;
+this._modifications = new Map();
+}
+EditingSession.prototype = {
+/**
+* Gets the value of a single property from the CSS rule.
+*
+* @param rule      The CSS rule
+* @param property  The name of the property
+*/
+getPropertyFromRule: function(rule, property) {
+let dummyStyle = this._element.style;
+dummyStyle.cssText = rule.cssText;
+return dummyStyle.getPropertyValue(property);
+},
+/**
+* Returns the current value for a property as a string or the empty string if
+* no style rules affect the property.
+*
+* @param property  The name of the property as a string
+*/
+getProperty: function(property) {
+// Create a hidden element for getPropertyFromRule to use
+let div = this._doc.createElement("div");
+div.setAttribute("style", "display: none");
+this._doc.body.appendChild(div);
+this._element = this._doc.createElement("p");
+div.appendChild(this._element);
+// As the rules are in order of priority we can just iterate until we find
+// the first that defines a value for the property and return that.
+for (let rule of this._rules) {
+let value = this.getPropertyFromRule(rule, property);
+if (value !== "") {
+div.remove();
+return value;
+}
+}
+div.remove();
+return "";
+},
+/**
+* Sets a number of properties on the node. Returns a promise that will be
+* resolved when the modifications are complete.
+*
+* @param properties  An array of properties, each is an object with name and
+*                    value properties. If the value is "" then the property
+*                    is removed.
+*/
+setProperties: function(properties) {
+let modifications = this._rules[0].startModifyingProperties();
+for (let property of properties) {
+if (!this._modifications.has(property.name))
+this._modifications.set(property.name, this.getPropertyFromRule(this._rules[0], property.name));
+if (property.value == "")
+modifications.removeProperty(property.name);
+else
+modifications.setProperty(property.name, property.value, "");
+}
+return modifications.apply().then(null, console.error);
+},
+/**
+* Reverts all of the property changes made by this instance. Returns a
+* promise that will be resolved when complete.
+*/
+revert: function() {
+let modifications = this._rules[0].startModifyingProperties();
+for (let [property, value] of this._modifications) {
+if (value != "")
+modifications.setProperty(property, value, "");
+else
+modifications.removeProperty(property);
+}
+return modifications.apply().then(null, console.error);
+}
+};
+function LayoutView(aInspector, aWindow)
+{
+this.inspector = aInspector;
+// <browser> is not always available (for Chrome targets for example)
+if (this.inspector.target.tab) {
+this.browser = aInspector.target.tab.linkedBrowser;
+}
+this.doc = aWindow.document;
+this.sizeLabel = this.doc.querySelector(".size > span");
+this.sizeHeadingLabel = this.doc.getElementById("element-size");
+this.init();
+}
+LayoutView.prototype = {
+init: function LV_init() {
+this.update = this.update.bind(this);
+this.onNewNode = this.onNewNode.bind(this);
+this.onNewSelection = this.onNewSelection.bind(this);
+this.inspector.selection.on("new-node-front", this.onNewSelection);
+this.inspector.sidebar.on("layoutview-selected", this.onNewNode);
+// Store for the different dimensions of the node.
+// 'selector' refers to the element that holds the value in view.xhtml;
+// 'property' is what we are measuring;
+// 'value' is the computed dimension, computed in update().
+this.map = {
+position: {selector: "#element-position",
+property: "position",
+value: undefined},
+marginTop: {selector: ".margin.top > span",
+property: "margin-top",
+value: undefined},
+marginBottom: {selector: ".margin.bottom > span",
+property: "margin-bottom",
+value: undefined},
+// margin-left is a shorthand for some internal properties,
+// margin-left-ltr-source and margin-left-rtl-source for example. The
+// real margin value we want is in margin-left-value
+marginLeft: {selector: ".margin.left > span",
+property: "margin-left",
+realProperty: "margin-left-value",
+value: undefined},
+// margin-right behaves the same as margin-left
+marginRight: {selector: ".margin.right > span",
+property: "margin-right",
+realProperty: "margin-right-value",
+value: undefined},
+paddingTop: {selector: ".padding.top > span",
+property: "padding-top",
+value: undefined},
+paddingBottom: {selector: ".padding.bottom > span",
+property: "padding-bottom",
+value: undefined},
+// padding-left behaves the same as margin-left
+paddingLeft: {selector: ".padding.left > span",
+property: "padding-left",
+realProperty: "padding-left-value",
+value: undefined},
+// padding-right behaves the same as margin-left
+paddingRight: {selector: ".padding.right > span",
+property: "padding-right",
+realProperty: "padding-right-value",
+value: undefined},
+borderTop: {selector: ".border.top > span",
+property: "border-top-width",
+value: undefined},
+borderBottom: {selector: ".border.bottom > span",
+property: "border-bottom-width",
+value: undefined},
+borderLeft: {selector: ".border.left > span",
+property: "border-left-width",
+value: undefined},
+borderRight: {selector: ".border.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();
+},
+/**
+* Called when the user clicks on one of the editable values in the layoutview
+*/
+initEditor: function LV_initEditor(element, event, dimension) {
+let { property, realProperty } = dimension;
+if (!realProperty)
+realProperty = property;
+let session = new EditingSession(document, this.elementRules);
+let initialValue = session.getProperty(realProperty);
+let editor = new InplaceEditor({
+element: element,
+initial: initialValue,
+start: (editor) => {
+editor.elt.parentNode.classList.add("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);
+},
+done: (value, commit) => {
+editor.elt.parentNode.classList.remove("editing");
+if (!commit)
+session.revert();
+}
+}, event);
+},
+/**
+* Is the layoutview visible in the sidebar?
+*/
+isActive: function LV_isActive() {
+return this.inspector.sidebar.getCurrentTabID() == "layoutview";
+},
+/**
+* Destroy the nodes. Remove listeners.
+*/
+destroy: function LV_destroy() {
+this.inspector.sidebar.off("layoutview-selected", this.onNewNode);
+this.inspector.selection.off("new-node-front", this.onNewSelection);
+if (this.browser) {
+this.browser.removeEventListener("MozAfterPaint", this.update, true);
+}
+this.sizeHeadingLabel = null;
+this.sizeLabel = null;
+this.inspector = null;
+this.doc = null;
+},
+/**
+* Selection 'new-node-front' event handler.
+*/
+onNewSelection: function() {
+let done = this.inspector.updating("layoutview");
+this.onNewNode().then(done, (err) => { console.error(err); done() });
+},
+onNewNode: function LV_onNewNode() {
+if (this.isActive() &&
+this.inspector.selection.isConnected() &&
+this.inspector.selection.isElementNode()) {
+this.undim();
+} else {
+this.dim();
+}
+return this.update();
+},
+/**
+* Hide the layout boxes. No node are selected.
+*/
+dim: function LV_dim() {
+if (this.browser) {
+this.browser.removeEventListener("MozAfterPaint", this.update, true);
+}
+this.trackingPaint = false;
+this.doc.body.classList.add("dim");
+this.dimmed = true;
+},
+/**
+* Show the layout boxes. A node is selected.
+*/
+undim: function LV_undim() {
+if (!this.trackingPaint) {
+if (this.browser) {
+this.browser.addEventListener("MozAfterPaint", this.update, true);
+}
+this.trackingPaint = true;
+}
+this.doc.body.classList.remove("dim");
+this.dimmed = false;
+},
+/**
+* Compute the dimensions of the node and update the values in
+* the layoutview/view.xhtml document. Returns a promise that will be resolved
+* when complete.
+*/
+update: function LV_update() {
+let lastRequest = Task.spawn((function*() {
+if (!this.isActive() ||
+!this.inspector.selection.isConnected() ||
+!this.inspector.selection.isElementNode()) {
+return;
+}
+let node = this.inspector.selection.nodeFront;
+let layout = yield this.inspector.pageStyle.getLayout(node, {
+autoMargins: !this.dimmed
+});
+let styleEntries = yield this.inspector.pageStyle.getApplied(node, {});
+// 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 = width + "x" + height;
+if (this.sizeHeadingLabel.textContent != newLabel) {
+this.sizeHeadingLabel.textContent = newLabel;
+}
+// If the view is dimmed, no need to do anything more.
+if (this.dimmed) {
+this.inspector.emit("layoutview-updated");
+return null;
+}
+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 = parseInt(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);
+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;
+height -= this.map.borderTop.value + this.map.borderBottom.value +
+this.map.paddingTop.value + this.map.paddingBottom.value;
+let newValue = width + "x" + height;
+if (this.sizeLabel.textContent != newValue) {
+this.sizeLabel.textContent = newValue;
+}
+this.elementRules = [e.rule for (e of styleEntries)];
+this.inspector.emit("layoutview-updated");
+}).bind(this)).then(null, console.error);
+return this._lastRequest = lastRequest;
+},
+showBoxModel: function(options={}) {
+let toolbox = this.inspector.toolbox;
+let nodeFront = this.inspector.selection.nodeFront;
+toolbox.highlighterUtils.highlightNodeFront(nodeFront, options);
+},
+hideBoxModel: function() {
+let toolbox = this.inspector.toolbox;
+toolbox.highlighterUtils.unhighlight();
+},
+manageOverflowingText: function(span) {
+let classList = span.parentNode.classList;
+if (classList.contains("left") || classList.contains("right")) {
+let force = span.textContent.length > LONG_TEXT_ROTATE_LIMIT;
+classList.toggle("rotate", force);
+}
+}
+};
+let elts;
+let tooltip;
+let onmouseover = function(e) {
+let region = e.target.getAttribute("data-box");
+tooltip.textContent = e.target.getAttribute("tooltip");
+this.layoutview.showBoxModel({region: region});
+return false;
+}.bind(window);
+let onmouseout = function(e) {
+tooltip.textContent = "";
+this.layoutview.hideBoxModel();
+return false;
+}.bind(window);
+window.setPanel = function(panel) {
+this.layoutview = new LayoutView(panel, window);
+// Tooltip mechanism
+elts = document.querySelectorAll("*[tooltip]");
+tooltip = document.querySelector(".tooltip");
+for (let i = 0; i < elts.length; i++) {
+let elt = elts[i];
+elt.addEventListener("mouseover", onmouseover, true);
+elt.addEventListener("mouseout", onmouseout, true);
+}
+// Mark document as RTL or LTR:
+let chromeReg = Cc["@mozilla.org/chrome/chrome-registry;1"].
+getService(Ci.nsIXULChromeRegistry);
+let dir = chromeReg.isLocaleRTL("global");
+document.body.setAttribute("dir", dir ? "rtl" : "ltr");
+window.parent.postMessage("layoutview-ready", "*");
+};
+window.onunload = function() {
+this.layoutview.destroy();
+if (elts) {
+for (let i = 0; i < elts.length; i++) {
+let elt = elts[i];
+elt.removeEventListener("mouseover", onmouseover, true);
+elt.removeEventListener("mouseout", onmouseout, true);
+}
+}
+};