зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1335691 - Removed `RectHighlighter`, tests, and all reference to them; r=gl
MozReview-Commit-ID: Gn3uxuv7gRU
This commit is contained in:
Matteo Ferretti
Родитель
e4692e3730
Коммит
9a68dbc872
|
|
@ -104,8 +104,6 @@ skip-if = (os == 'linux' && bits == 32 && debug) # bug 1328915, disable linux32
|
|||
[browser_inspector_highlighter-measure_02.js]
|
||||
[browser_inspector_highlighter-options.js]
|
||||
[browser_inspector_highlighter-preview.js]
|
||||
[browser_inspector_highlighter-rect_01.js]
|
||||
[browser_inspector_highlighter-rect_02.js]
|
||||
[browser_inspector_highlighter-rulers_01.js]
|
||||
[browser_inspector_highlighter-rulers_02.js]
|
||||
[browser_inspector_highlighter-selector_01.js]
|
||||
|
|
|
|||
|
|
@ -1,121 +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/. */
|
||||
|
||||
"use strict";
|
||||
|
||||
// Test that the custom rect highlighter provides the right API, ensures that
|
||||
// the input is valid and that it does create a box with the right dimensions,
|
||||
// at the right position.
|
||||
|
||||
const TEST_URL = "data:text/html;charset=utf-8,Rect Highlighter Test";
|
||||
|
||||
add_task(function* () {
|
||||
let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
let front = inspector.inspector;
|
||||
let highlighter = yield front.getHighlighterByType("RectHighlighter");
|
||||
let body = yield getNodeFront("body", inspector);
|
||||
|
||||
info("Make sure the highlighter returned is correct");
|
||||
|
||||
ok(highlighter, "The RectHighlighter custom type was created");
|
||||
is(highlighter.typeName, "customhighlighter",
|
||||
"The RectHighlighter has the right type");
|
||||
ok(highlighter.show && highlighter.hide,
|
||||
"The RectHighlighter has the expected show/hide methods");
|
||||
|
||||
info("Check that the highlighter is hidden by default");
|
||||
|
||||
let hidden = yield testActor.getHighlighterNodeAttribute(
|
||||
"highlighted-rect", "hidden", highlighter);
|
||||
is(hidden, "true", "The highlighter is hidden by default");
|
||||
|
||||
info("Check that nothing is shown if no rect is passed");
|
||||
|
||||
yield highlighter.show(body);
|
||||
hidden = yield testActor.getHighlighterNodeAttribute(
|
||||
"highlighted-rect", "hidden", highlighter);
|
||||
is(hidden, "true", "The highlighter is hidden when no rect is passed");
|
||||
|
||||
info("Check that nothing is shown if rect is incomplete or invalid");
|
||||
|
||||
yield highlighter.show(body, {
|
||||
rect: {x: 0, y: 0}
|
||||
});
|
||||
hidden = yield testActor.getHighlighterNodeAttribute(
|
||||
"highlighted-rect", "hidden", highlighter);
|
||||
is(hidden, "true", "The highlighter is hidden when the rect is incomplete");
|
||||
|
||||
yield highlighter.show(body, {
|
||||
rect: {x: 0, y: 0, width: -Infinity, height: 0}
|
||||
});
|
||||
hidden = yield testActor.getHighlighterNodeAttribute(
|
||||
"highlighted-rect", "hidden", highlighter);
|
||||
is(hidden, "true", "The highlighter is hidden when the rect is invalid (1)");
|
||||
|
||||
yield highlighter.show(body, {
|
||||
rect: {x: 0, y: 0, width: 5, height: -45}
|
||||
});
|
||||
hidden = yield testActor.getHighlighterNodeAttribute(
|
||||
"highlighted-rect", "hidden", highlighter);
|
||||
is(hidden, "true", "The highlighter is hidden when the rect is invalid (2)");
|
||||
|
||||
yield highlighter.show(body, {
|
||||
rect: {x: "test", y: 0, width: 5, height: 5}
|
||||
});
|
||||
hidden = yield testActor.getHighlighterNodeAttribute(
|
||||
"highlighted-rect", "hidden", highlighter);
|
||||
is(hidden, "true", "The highlighter is hidden when the rect is invalid (3)");
|
||||
|
||||
info("Check that the highlighter is displayed when valid options are passed");
|
||||
|
||||
yield highlighter.show(body, {
|
||||
rect: {x: 5, y: 5, width: 50, height: 50}
|
||||
});
|
||||
hidden = yield testActor.getHighlighterNodeAttribute(
|
||||
"highlighted-rect", "hidden", highlighter);
|
||||
ok(!hidden, "The highlighter is displayed");
|
||||
let style = yield testActor.getHighlighterNodeAttribute(
|
||||
"highlighted-rect", "style", highlighter);
|
||||
is(style, "left:5px;top:5px;width:50px;height:50px;",
|
||||
"The highlighter is positioned correctly");
|
||||
|
||||
info("Check that the highlighter can be displayed at x=0 y=0");
|
||||
|
||||
yield highlighter.show(body, {
|
||||
rect: {x: 0, y: 0, width: 50, height: 50}
|
||||
});
|
||||
hidden = yield testActor.getHighlighterNodeAttribute(
|
||||
"highlighted-rect", "hidden", highlighter);
|
||||
ok(!hidden, "The highlighter is displayed when x=0 and y=0");
|
||||
style = yield testActor.getHighlighterNodeAttribute(
|
||||
"highlighted-rect", "style", highlighter);
|
||||
is(style, "left:0px;top:0px;width:50px;height:50px;",
|
||||
"The highlighter is positioned correctly");
|
||||
|
||||
info("Check that the highlighter is hidden when dimensions are 0");
|
||||
|
||||
yield highlighter.show(body, {
|
||||
rect: {x: 0, y: 0, width: 0, height: 0}
|
||||
});
|
||||
hidden = yield testActor.getHighlighterNodeAttribute(
|
||||
"highlighted-rect", "hidden", highlighter);
|
||||
is(hidden, "true", "The highlighter is hidden width and height are 0");
|
||||
|
||||
info("Check that a fill color can be passed");
|
||||
|
||||
yield highlighter.show(body, {
|
||||
rect: {x: 100, y: 200, width: 500, height: 200},
|
||||
fill: "red"
|
||||
});
|
||||
hidden = yield testActor.getHighlighterNodeAttribute(
|
||||
"highlighted-rect", "hidden", highlighter);
|
||||
ok(!hidden, "The highlighter is displayed");
|
||||
style = yield testActor.getHighlighterNodeAttribute(
|
||||
"highlighted-rect", "style", highlighter);
|
||||
is(style, "left:100px;top:200px;width:500px;height:200px;background:red;",
|
||||
"The highlighter has the right background color");
|
||||
|
||||
yield highlighter.hide();
|
||||
yield highlighter.finalize();
|
||||
});
|
||||
|
|
@ -1,37 +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/. */
|
||||
|
||||
"use strict";
|
||||
|
||||
// Test that the custom rect highlighter positions the rectangle relative to the
|
||||
// viewport of the context node we pass to it.
|
||||
|
||||
const TEST_URL = URL_ROOT + "doc_inspector_highlighter_rect.html";
|
||||
|
||||
add_task(function* () {
|
||||
let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
let front = inspector.inspector;
|
||||
let highlighter = yield front.getHighlighterByType("RectHighlighter");
|
||||
|
||||
info("Showing the rect highlighter in the context of the iframe");
|
||||
|
||||
// Get the reference to a context node inside the iframe
|
||||
let childBody = yield getNodeFrontInFrame("body", "iframe", inspector);
|
||||
yield highlighter.show(childBody, {
|
||||
rect: {x: 50, y: 50, width: 100, height: 100}
|
||||
});
|
||||
|
||||
let style = yield testActor.getHighlighterNodeAttribute("highlighted-rect",
|
||||
"style", highlighter);
|
||||
|
||||
// The parent body has margin=50px and border=10px
|
||||
// The parent iframe also has margin=50px and border=10px
|
||||
// = 50 + 10 + 50 + 10 = 120px
|
||||
// The rect is aat x=50 and y=50, so left and top should be 170px
|
||||
is(style, "left:170px;top:170px;width:100px;height:100px;",
|
||||
"The highlighter is correctly positioned");
|
||||
|
||||
yield highlighter.hide();
|
||||
yield highlighter.finalize();
|
||||
});
|
||||
|
|
@ -481,9 +481,8 @@ exports.CustomHighlighterActor = protocol.ActorClassWithSpec(customHighlighterSp
|
|||
* NodeActor argument (NodeActor as in
|
||||
* devtools/server/actor/inspector).
|
||||
* Note however that some highlighters use this argument merely as a context
|
||||
* node: the RectHighlighter for instance uses it to calculate the absolute
|
||||
* position of the provided rect. The SelectHighlighter uses it as a base node
|
||||
* to run the provided CSS selector on.
|
||||
* node: The SelectHighlighter for instance uses it as a base node to run the
|
||||
* provided CSS selector on.
|
||||
*
|
||||
* @param {NodeActor} The node to be highlighted
|
||||
* @param {Object} Options for the custom highlighter
|
||||
|
|
@ -702,10 +701,6 @@ const { SelectorHighlighter } = require("./highlighters/selector");
|
|||
register(SelectorHighlighter);
|
||||
exports.SelectorHighlighter = SelectorHighlighter;
|
||||
|
||||
const { RectHighlighter } = require("./highlighters/rect");
|
||||
register(RectHighlighter);
|
||||
exports.RectHighlighter = RectHighlighter;
|
||||
|
||||
const { GeometryEditorHighlighter } = require("./highlighters/geometry-editor");
|
||||
register(GeometryEditorHighlighter);
|
||||
exports.GeometryEditorHighlighter = GeometryEditorHighlighter;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ DevToolsModules(
|
|||
'eye-dropper.js',
|
||||
'geometry-editor.js',
|
||||
'measuring-tool.js',
|
||||
'rect.js',
|
||||
'rulers.js',
|
||||
'selector.js',
|
||||
'simple-outline.js'
|
||||
|
|
|
|||
|
|
@ -1,102 +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/. */
|
||||
|
||||
"use strict";
|
||||
|
||||
const { CanvasFrameAnonymousContentHelper } = require("./utils/markup");
|
||||
const { getAdjustedQuads } = require("devtools/shared/layout/utils");
|
||||
/**
|
||||
* The RectHighlighter is a class that draws a rectangle highlighter at specific
|
||||
* coordinates.
|
||||
* It does *not* highlight DOM nodes, but rects.
|
||||
* It also does *not* update dynamically, it only highlights a rect and remains
|
||||
* there as long as it is shown.
|
||||
*/
|
||||
function RectHighlighter(highlighterEnv) {
|
||||
this.win = highlighterEnv.window;
|
||||
this.markup = new CanvasFrameAnonymousContentHelper(highlighterEnv,
|
||||
this._buildMarkup.bind(this));
|
||||
}
|
||||
|
||||
RectHighlighter.prototype = {
|
||||
typeName: "RectHighlighter",
|
||||
|
||||
_buildMarkup: function () {
|
||||
let doc = this.win.document;
|
||||
|
||||
let container = doc.createElement("div");
|
||||
container.className = "highlighter-container";
|
||||
container.innerHTML = "<div id=\"highlighted-rect\" " +
|
||||
"class=\"highlighted-rect\" hidden=\"true\">";
|
||||
|
||||
return container;
|
||||
},
|
||||
|
||||
destroy: function () {
|
||||
this.win = null;
|
||||
this.markup.destroy();
|
||||
},
|
||||
|
||||
getElement: function (id) {
|
||||
return this.markup.getElement(id);
|
||||
},
|
||||
|
||||
_hasValidOptions: function (options) {
|
||||
let isValidNb = n => typeof n === "number" && n >= 0 && isFinite(n);
|
||||
return options && options.rect &&
|
||||
isValidNb(options.rect.x) &&
|
||||
isValidNb(options.rect.y) &&
|
||||
options.rect.width && isValidNb(options.rect.width) &&
|
||||
options.rect.height && isValidNb(options.rect.height);
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {DOMNode} node The highlighter rect is relatively positioned to the
|
||||
* viewport this node is in. Using the provided node, the highligther will get
|
||||
* the parent documentElement and use it as context to position the
|
||||
* highlighter correctly.
|
||||
* @param {Object} options Accepts the following options:
|
||||
* - rect: mandatory object that should have the x, y, width, height
|
||||
* properties
|
||||
* - fill: optional fill color for the rect
|
||||
*/
|
||||
show: function (node, options) {
|
||||
if (!this._hasValidOptions(options) || !node || !node.ownerDocument) {
|
||||
this.hide();
|
||||
return false;
|
||||
}
|
||||
|
||||
let contextNode = node.ownerDocument.documentElement;
|
||||
|
||||
// Caculate the absolute rect based on the context node's adjusted quads.
|
||||
let quads = getAdjustedQuads(this.win, contextNode);
|
||||
if (!quads.length) {
|
||||
this.hide();
|
||||
return false;
|
||||
}
|
||||
|
||||
let {bounds} = quads[0];
|
||||
let x = "left:" + (bounds.x + options.rect.x) + "px;";
|
||||
let y = "top:" + (bounds.y + options.rect.y) + "px;";
|
||||
let width = "width:" + options.rect.width + "px;";
|
||||
let height = "height:" + options.rect.height + "px;";
|
||||
|
||||
let style = x + y + width + height;
|
||||
if (options.fill) {
|
||||
style += "background:" + options.fill + ";";
|
||||
}
|
||||
|
||||
// Set the coordinates of the highlighter and show it
|
||||
let rect = this.getElement("highlighted-rect");
|
||||
rect.setAttribute("style", style);
|
||||
rect.removeAttribute("hidden");
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
hide: function () {
|
||||
this.getElement("highlighted-rect").setAttribute("hidden", "true");
|
||||
}
|
||||
};
|
||||
exports.RectHighlighter = RectHighlighter;
|
||||
Загрузка…
Ссылка в новой задаче