Skip to content

Commit

Permalink
Bug 1653186 - fix highlighter in about:addons (ensure that the highli…
Browse files Browse the repository at this point in the history 
…ghter markup nodes are created using the correct window/document). r=ochameau

Differential Revision: https://phabricator.services.mozilla.com/D85191
  • Loading branch information
@yzen
yzen committed Jul 30, 2020
1 parent e9437a4 commit 86b6602
Show file tree
Hide file tree
Showing 14 changed files with 228 additions and 251 deletions.
10 changes: 4 additions & 6 deletions devtools/server/actors/highlighters/accessible.js
View file
Expand Up @@ -9,8 +9,6 @@ const {
} = require("devtools/server/actors/highlighters/auto-refresh");
const {
CanvasFrameAnonymousContentHelper,
createNode,
createSVGNode,
isNodeValid,
} = require("devtools/server/actors/highlighters/utils/markup");
const {
Expand Down Expand Up @@ -118,14 +116,14 @@ class AccessibleHighlighter extends AutoRefreshHighlighter {
* @return {Object} Container element for the highlighter markup.
*/
_buildMarkup() {
const container = createNode(this.win, {
const container = this.markup.createNode({
attributes: {
class: "highlighter-container",
"aria-hidden": "true",
},
});

const root = createNode(this.win, {
const root = this.markup.createNode({
parent: container,
attributes: {
id: "root",
Expand All @@ -135,7 +133,7 @@ class AccessibleHighlighter extends AutoRefreshHighlighter {
});

// Build the SVG element.
const svg = createSVGNode(this.win, {
const svg = this.markup.createSVGNode({
nodeType: "svg",
parent: root,
attributes: {
Expand All @@ -147,7 +145,7 @@ class AccessibleHighlighter extends AutoRefreshHighlighter {
prefix: this.ID_CLASS_PREFIX,
});

createSVGNode(this.win, {
this.markup.createSVGNode({
nodeType: "path",
parent: svg,
attributes: {
Expand Down
38 changes: 18 additions & 20 deletions devtools/server/actors/highlighters/box-model-renderer.js
View file
Expand Up @@ -5,8 +5,6 @@
"use strict";

const {
createNode,
createSVGNode,
moveInfobar,
} = require("devtools/server/actors/highlighters/utils/markup");

Expand Down Expand Up @@ -535,9 +533,9 @@ class BoxModelHighlighterRenderer {
* @override
*/
_buildMarkup() {
const doc = this.win.document;

const highlighterContainer = doc.createElement("div");
const highlighterContainer = this.markup.anonymousContentDocument.createElement(
"div"
);
highlighterContainer.className = "highlighter-container box-model";
// We need a better solution for how to handle the highlighter from the
// accessibility standpoint. For now, in order to avoid displaying it in the
Expand All @@ -546,7 +544,7 @@ class BoxModelHighlighterRenderer {
highlighterContainer.setAttribute("aria-hidden", "true");

// Build the root wrapper, used to adapt to the page zoom.
const rootWrapper = createNode(this.win, {
const rootWrapper = this.markup.createNode({
parent: highlighterContainer,
attributes: {
id: "root",
Expand All @@ -558,7 +556,7 @@ class BoxModelHighlighterRenderer {

// Building the nodeinfo bar markup

const infobarContainer = createNode(this.win, {
const infobarContainer = this.markup.createNode({
parent: rootWrapper,
attributes: {
class: "infobar-container",
Expand All @@ -569,22 +567,22 @@ class BoxModelHighlighterRenderer {
prefix: this.ID_CLASS_PREFIX,
});

const infobar = createNode(this.win, {
const infobar = this.markup.createNode({
parent: infobarContainer,
attributes: {
class: "infobar",
},
prefix: this.ID_CLASS_PREFIX,
});

const texthbox = createNode(this.win, {
const texthbox = this.markup.createNode({
parent: infobar,
attributes: {
class: "infobar-text",
},
prefix: this.ID_CLASS_PREFIX,
});
createNode(this.win, {
this.markup.createNode({
nodeType: "span",
parent: texthbox,
attributes: {
Expand All @@ -593,7 +591,7 @@ class BoxModelHighlighterRenderer {
},
prefix: this.ID_CLASS_PREFIX,
});
createNode(this.win, {
this.markup.createNode({
nodeType: "span",
parent: texthbox,
attributes: {
Expand All @@ -602,7 +600,7 @@ class BoxModelHighlighterRenderer {
},
prefix: this.ID_CLASS_PREFIX,
});
createNode(this.win, {
this.markup.createNode({
nodeType: "span",
parent: texthbox,
attributes: {
Expand All @@ -611,7 +609,7 @@ class BoxModelHighlighterRenderer {
},
prefix: this.ID_CLASS_PREFIX,
});
createNode(this.win, {
this.markup.createNode({
nodeType: "span",
parent: texthbox,
attributes: {
Expand All @@ -620,7 +618,7 @@ class BoxModelHighlighterRenderer {
},
prefix: this.ID_CLASS_PREFIX,
});
createNode(this.win, {
this.markup.createNode({
nodeType: "span",
parent: texthbox,
attributes: {
Expand All @@ -630,7 +628,7 @@ class BoxModelHighlighterRenderer {
prefix: this.ID_CLASS_PREFIX,
});

createNode(this.win, {
this.markup.createNode({
nodeType: "span",
parent: texthbox,
attributes: {
Expand All @@ -640,7 +638,7 @@ class BoxModelHighlighterRenderer {
prefix: this.ID_CLASS_PREFIX,
});

createNode(this.win, {
this.markup.createNode({
nodeType: "span",
parent: texthbox,
attributes: {
Expand All @@ -652,7 +650,7 @@ class BoxModelHighlighterRenderer {

// Building the SVG element with its polygons and lines

const svg = createSVGNode(this.win, {
const svg = this.markup.createSVGNode({
nodeType: "svg",
parent: rootWrapper,
attributes: {
Expand All @@ -665,7 +663,7 @@ class BoxModelHighlighterRenderer {
prefix: this.ID_CLASS_PREFIX,
});

const regions = createSVGNode(this.win, {
const regions = this.markup.createSVGNode({
nodeType: "g",
parent: svg,
attributes: {
Expand All @@ -676,7 +674,7 @@ class BoxModelHighlighterRenderer {
});

for (const region of BOX_MODEL_REGIONS) {
createSVGNode(this.win, {
this.markup.createSVGNode({
nodeType: "path",
parent: regions,
attributes: {
Expand All @@ -689,7 +687,7 @@ class BoxModelHighlighterRenderer {
}

for (const side of BOX_MODEL_SIDES) {
createSVGNode(this.win, {
this.markup.createSVGNode({
nodeType: "line",
parent: svg,
attributes: {
Expand Down
38 changes: 18 additions & 20 deletions devtools/server/actors/highlighters/box-model.js
View file
Expand Up @@ -9,8 +9,6 @@ const {
} = require("devtools/server/actors/highlighters/auto-refresh");
const {
CanvasFrameAnonymousContentHelper,
createNode,
createSVGNode,
getBindingElementAndPseudo,
hasPseudoClassLock,
isNodeValid,
Expand Down Expand Up @@ -125,9 +123,9 @@ class BoxModelHighlighter extends AutoRefreshHighlighter {
}

_buildMarkup() {
const doc = this.win.document;

const highlighterContainer = doc.createElement("div");
const highlighterContainer = this.markup.anonymousContentDocument.createElement(
"div"
);
highlighterContainer.className = "highlighter-container box-model";
// We need a better solution for how to handle the highlighter from the
// accessibility standpoint. For now, in order to avoid displaying it in the
Expand All @@ -136,7 +134,7 @@ class BoxModelHighlighter extends AutoRefreshHighlighter {
highlighterContainer.setAttribute("aria-hidden", "true");

// Build the root wrapper, used to adapt to the page zoom.
const rootWrapper = createNode(this.win, {
const rootWrapper = this.markup.createNode({
parent: highlighterContainer,
attributes: {
id: "root",
Expand All @@ -148,7 +146,7 @@ class BoxModelHighlighter extends AutoRefreshHighlighter {

// Building the SVG element with its polygons and lines

const svg = createSVGNode(this.win, {
const svg = this.markup.createSVGNode({
nodeType: "svg",
parent: rootWrapper,
attributes: {
Expand All @@ -161,7 +159,7 @@ class BoxModelHighlighter extends AutoRefreshHighlighter {
prefix: this.ID_CLASS_PREFIX,
});

const regions = createSVGNode(this.win, {
const regions = this.markup.createSVGNode({
nodeType: "g",
parent: svg,
attributes: {
Expand All @@ -172,7 +170,7 @@ class BoxModelHighlighter extends AutoRefreshHighlighter {
});

for (const region of BOX_MODEL_REGIONS) {
createSVGNode(this.win, {
this.markup.createSVGNode({
nodeType: "path",
parent: regions,
attributes: {
Expand All @@ -185,7 +183,7 @@ class BoxModelHighlighter extends AutoRefreshHighlighter {
}

for (const side of BOX_MODEL_SIDES) {
createSVGNode(this.win, {
this.markup.createSVGNode({
nodeType: "line",
parent: svg,
attributes: {
Expand All @@ -200,7 +198,7 @@ class BoxModelHighlighter extends AutoRefreshHighlighter {

// Building the nodeinfo bar markup

const infobarContainer = createNode(this.win, {
const infobarContainer = this.markup.createNode({
parent: rootWrapper,
attributes: {
class: "infobar-container",
Expand All @@ -211,22 +209,22 @@ class BoxModelHighlighter extends AutoRefreshHighlighter {
prefix: this.ID_CLASS_PREFIX,
});

const infobar = createNode(this.win, {
const infobar = this.markup.createNode({
parent: infobarContainer,
attributes: {
class: "infobar",
},
prefix: this.ID_CLASS_PREFIX,
});

const texthbox = createNode(this.win, {
const texthbox = this.markup.createNode({
parent: infobar,
attributes: {
class: "infobar-text",
},
prefix: this.ID_CLASS_PREFIX,
});
createNode(this.win, {
this.markup.createNode({
nodeType: "span",
parent: texthbox,
attributes: {
Expand All @@ -235,7 +233,7 @@ class BoxModelHighlighter extends AutoRefreshHighlighter {
},
prefix: this.ID_CLASS_PREFIX,
});
createNode(this.win, {
this.markup.createNode({
nodeType: "span",
parent: texthbox,
attributes: {
Expand All @@ -244,7 +242,7 @@ class BoxModelHighlighter extends AutoRefreshHighlighter {
},
prefix: this.ID_CLASS_PREFIX,
});
createNode(this.win, {
this.markup.createNode({
nodeType: "span",
parent: texthbox,
attributes: {
Expand All @@ -253,7 +251,7 @@ class BoxModelHighlighter extends AutoRefreshHighlighter {
},
prefix: this.ID_CLASS_PREFIX,
});
createNode(this.win, {
this.markup.createNode({
nodeType: "span",
parent: texthbox,
attributes: {
Expand All @@ -262,7 +260,7 @@ class BoxModelHighlighter extends AutoRefreshHighlighter {
},
prefix: this.ID_CLASS_PREFIX,
});
createNode(this.win, {
this.markup.createNode({
nodeType: "span",
parent: texthbox,
attributes: {
Expand All @@ -272,7 +270,7 @@ class BoxModelHighlighter extends AutoRefreshHighlighter {
prefix: this.ID_CLASS_PREFIX,
});

createNode(this.win, {
this.markup.createNode({
nodeType: "span",
parent: texthbox,
attributes: {
Expand All @@ -282,7 +280,7 @@ class BoxModelHighlighter extends AutoRefreshHighlighter {
prefix: this.ID_CLASS_PREFIX,
});

createNode(this.win, {
this.markup.createNode({
nodeType: "span",
parent: texthbox,
attributes: {
Expand Down

0 comments on commit 86b6602

Please sign in to comment.