mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-11 12:25:53 +00:00
Bug 1386108 - Update Computed stylesheet to use more specific selectors. r=jdescottes
This commit is contained in:
Gabriel Luong
parent
a7eb835044
commit
1ebc47776f
@ -96,7 +96,7 @@ module.exports = createClass({
|
||||
|
||||
return dom.div(
|
||||
{
|
||||
className: "property-view",
|
||||
className: "computed-property-view",
|
||||
"data-property-name": name,
|
||||
tabIndex: "0",
|
||||
ref: container => {
|
||||
@ -105,11 +105,11 @@ module.exports = createClass({
|
||||
},
|
||||
dom.div(
|
||||
{
|
||||
className: "property-name-container",
|
||||
className: "computed-property-name-container",
|
||||
},
|
||||
dom.div(
|
||||
{
|
||||
className: "property-name theme-fg-color5",
|
||||
className: "computed-property-name theme-fg-color5",
|
||||
tabIndex: "",
|
||||
title: name,
|
||||
onClick: this.onFocus,
|
||||
@ -119,11 +119,11 @@ module.exports = createClass({
|
||||
),
|
||||
dom.div(
|
||||
{
|
||||
className: "property-value-container",
|
||||
className: "computed-property-value-container",
|
||||
},
|
||||
dom.div(
|
||||
{
|
||||
className: "property-value theme-fg-color1",
|
||||
className: "computed-property-value theme-fg-color1",
|
||||
dir: "ltr",
|
||||
tabIndex: "",
|
||||
onClick: this.onFocus,
|
||||
|
||||
@ -31,8 +31,8 @@ add_task(function* () {
|
||||
});
|
||||
|
||||
function* testAccordionStateAfterClickingHeader(doc) {
|
||||
let header = doc.querySelector("#computedview-container .box-model-pane ._header");
|
||||
let bContent = doc.querySelector("#computedview-container .box-model-pane ._content");
|
||||
let header = doc.querySelector("#computed-container .box-model-pane ._header");
|
||||
let bContent = doc.querySelector("#computed-container .box-model-pane ._content");
|
||||
|
||||
info("Checking initial state of the box model panel.");
|
||||
is(bContent.style.display, "block", "The box model panel content is 'display: block'.");
|
||||
@ -51,7 +51,7 @@ function* testAccordionStateAfterClickingHeader(doc) {
|
||||
function* testAccordionStateAfterSwitchingSidebars(inspector, doc) {
|
||||
info("Checking the box model accordion state is persistent after switching sidebars.");
|
||||
|
||||
let bContent = doc.querySelector("#computedview-container .box-model-pane ._content");
|
||||
let bContent = doc.querySelector("#computed-container .box-model-pane ._content");
|
||||
|
||||
info("Selecting the layout view.");
|
||||
inspector.sidebar.select("layoutview");
|
||||
@ -75,7 +75,7 @@ function* testAccordionStateAfterReopeningComputedView(toolbox) {
|
||||
info("Re-opening the layout view.");
|
||||
let { view } = yield openBoxModelView();
|
||||
let { document: doc } = view;
|
||||
let bContent = doc.querySelector("#computedview-container .box-model-pane ._content");
|
||||
let bContent = doc.querySelector("#computed-container .box-model-pane ._content");
|
||||
|
||||
info("Checking the state of the box model panel.");
|
||||
ok(!bContent, "The box model panel content is not rendered.");
|
||||
|
||||
@ -16,7 +16,7 @@ const TEST_URI = `
|
||||
<div id="fixed" style="position: fixed"></div>
|
||||
`;
|
||||
|
||||
const OFFSET_PARENT_SELECTOR = ".property-value-container .objectBox-node";
|
||||
const OFFSET_PARENT_SELECTOR = ".computed-property-value-container .objectBox-node";
|
||||
|
||||
const res1 = [
|
||||
{
|
||||
|
||||
@ -115,6 +115,6 @@ function* testChangingValues(inspector, boxmodel, testActor) {
|
||||
}
|
||||
|
||||
function getPropertySelector(propertyName) {
|
||||
return `.boxmodel-properties-wrapper .property-view` +
|
||||
`[data-property-name=${propertyName}] .property-value`;
|
||||
return `.boxmodel-properties-wrapper .computed-property-view` +
|
||||
`[data-property-name=${propertyName}] .computed-property-value`;
|
||||
}
|
||||
|
||||
@ -179,12 +179,11 @@ function CssComputedView(inspector, document, pageStyle) {
|
||||
this._onIncludeBrowserStyles = this._onIncludeBrowserStyles.bind(this);
|
||||
|
||||
let doc = this.styleDocument;
|
||||
this.element = doc.getElementById("propertyContainer");
|
||||
this.element = doc.getElementById("computed-property-container");
|
||||
this.boxModelWrapper = doc.getElementById("boxmodel-wrapper");
|
||||
this.searchField = doc.getElementById("computedview-searchbox");
|
||||
this.searchClearButton = doc.getElementById("computedview-searchinput-clear");
|
||||
this.includeBrowserStylesCheckbox =
|
||||
doc.getElementById("browser-style-checkbox");
|
||||
this.searchField = doc.getElementById("computed-searchbox");
|
||||
this.searchClearButton = doc.getElementById("computed-searchinput-clear");
|
||||
this.includeBrowserStylesCheckbox = doc.getElementById("browser-style-checkbox");
|
||||
|
||||
this.shortcuts = new KeyShortcuts({ window: this.styleWindow });
|
||||
this._onShortcut = this._onShortcut.bind(this);
|
||||
@ -203,7 +202,7 @@ function CssComputedView(inspector, document, pageStyle) {
|
||||
this.searchClearButton.hidden = true;
|
||||
|
||||
// No results text.
|
||||
this.noResults = this.styleDocument.getElementById("computedview-no-results");
|
||||
this.noResults = this.styleDocument.getElementById("computed-no-results");
|
||||
|
||||
// Refresh panel when color unit changed or pref for showing
|
||||
// original sources changes.
|
||||
@ -347,11 +346,11 @@ CssComputedView.prototype = {
|
||||
let propertyContent;
|
||||
let parent = node;
|
||||
while (parent.parentNode) {
|
||||
if (parent.classList.contains("property-view")) {
|
||||
if (parent.classList.contains("computed-property-view")) {
|
||||
propertyView = parent;
|
||||
break;
|
||||
}
|
||||
if (parent.classList.contains("property-content")) {
|
||||
if (parent.classList.contains("computed-property-content")) {
|
||||
propertyContent = parent;
|
||||
break;
|
||||
}
|
||||
@ -364,29 +363,29 @@ CssComputedView.prototype = {
|
||||
let value, type;
|
||||
|
||||
// Get the property and value for a node that's a property name or value
|
||||
let isHref = classes.contains("theme-link") && !classes.contains("link");
|
||||
if (propertyView && (classes.contains("property-name") ||
|
||||
classes.contains("property-value") ||
|
||||
let isHref = classes.contains("theme-link") && !classes.contains("computed-link");
|
||||
if (propertyView && (classes.contains("computed-property-name") ||
|
||||
classes.contains("computed-property-value") ||
|
||||
isHref)) {
|
||||
value = {
|
||||
property: parent.querySelector(".property-name").firstChild.textContent,
|
||||
value: parent.querySelector(".property-value").textContent
|
||||
property: parent.querySelector(".computed-property-name").firstChild.textContent,
|
||||
value: parent.querySelector(".computed-property-value").textContent
|
||||
};
|
||||
}
|
||||
if (propertyContent && (classes.contains("other-property-value") ||
|
||||
if (propertyContent && (classes.contains("computed-other-property-value") ||
|
||||
isHref)) {
|
||||
let view = propertyContent.previousSibling;
|
||||
value = {
|
||||
property: view.querySelector(".property-name").firstChild.textContent,
|
||||
property: view.querySelector(".computed-property-name").firstChild.textContent,
|
||||
value: node.textContent
|
||||
};
|
||||
}
|
||||
|
||||
// Get the type
|
||||
if (classes.contains("property-name")) {
|
||||
if (classes.contains("computed-property-name")) {
|
||||
type = VIEW_NODE_PROPERTY_TYPE;
|
||||
} else if (classes.contains("property-value") ||
|
||||
classes.contains("other-property-value")) {
|
||||
} else if (classes.contains("computed-property-value") ||
|
||||
classes.contains("computed-other-property-value")) {
|
||||
type = VIEW_NODE_VALUE_TYPE;
|
||||
} else if (isHref) {
|
||||
type = VIEW_NODE_IMAGE_URL_TYPE;
|
||||
@ -928,9 +927,9 @@ PropertyView.prototype = {
|
||||
get propertyHeaderClassName() {
|
||||
if (this.visible) {
|
||||
let isDark = this.tree._darkStripe = !this.tree._darkStripe;
|
||||
return isDark ? "property-view row-striped" : "property-view";
|
||||
return isDark ? "computed-property-view row-striped" : "computed-property-view";
|
||||
}
|
||||
return "property-view-hidden";
|
||||
return "computed-property-hidden";
|
||||
},
|
||||
|
||||
/**
|
||||
@ -942,9 +941,11 @@ PropertyView.prototype = {
|
||||
get propertyContentClassName() {
|
||||
if (this.visible) {
|
||||
let isDark = this.tree._darkStripe;
|
||||
return isDark ? "property-content row-striped" : "property-content";
|
||||
return isDark
|
||||
? "computed-property-content row-striped"
|
||||
: "computed-property-content";
|
||||
}
|
||||
return "property-content-hidden";
|
||||
return "computed-property-hidden";
|
||||
},
|
||||
|
||||
/**
|
||||
@ -977,18 +978,18 @@ PropertyView.prototype = {
|
||||
this.shortcuts.on("Space", (name, event) => this.onMatchedToggle(event));
|
||||
|
||||
let nameContainer = doc.createElementNS(HTML_NS, "span");
|
||||
nameContainer.className = "property-name-container";
|
||||
nameContainer.className = "computed-property-name-container";
|
||||
this.element.appendChild(nameContainer);
|
||||
|
||||
// Build the twisty expand/collapse
|
||||
this.matchedExpander = doc.createElementNS(HTML_NS, "div");
|
||||
this.matchedExpander.className = "expander theme-twisty";
|
||||
this.matchedExpander.className = "computed-expander theme-twisty";
|
||||
this.matchedExpander.addEventListener("click", this.onMatchedToggle);
|
||||
nameContainer.appendChild(this.matchedExpander);
|
||||
|
||||
// Build the style name element
|
||||
this.nameNode = doc.createElementNS(HTML_NS, "span");
|
||||
this.nameNode.classList.add("property-name", "theme-fg-color5");
|
||||
this.nameNode.classList.add("computed-property-name", "theme-fg-color5");
|
||||
// Reset its tabindex attribute otherwise, if an ellipsis is applied
|
||||
// it will be reachable via TABing
|
||||
this.nameNode.setAttribute("tabindex", "");
|
||||
@ -1009,12 +1010,12 @@ PropertyView.prototype = {
|
||||
nameContainer.appendChild(this.nameNode);
|
||||
|
||||
let valueContainer = doc.createElementNS(HTML_NS, "span");
|
||||
valueContainer.className = "property-value-container";
|
||||
valueContainer.className = "computed-property-value-container";
|
||||
this.element.appendChild(valueContainer);
|
||||
|
||||
// Build the style value element
|
||||
this.valueNode = doc.createElementNS(HTML_NS, "span");
|
||||
this.valueNode.classList.add("property-value", "theme-fg-color1");
|
||||
this.valueNode.classList.add("computed-property-value", "theme-fg-color1");
|
||||
// Reset its tabindex attribute otherwise, if an ellipsis is applied
|
||||
// it will be reachable via TABing
|
||||
this.valueNode.setAttribute("tabindex", "");
|
||||
@ -1070,8 +1071,8 @@ PropertyView.prototype = {
|
||||
let frag = outputParser.parseCssProperty(this.propertyInfo.name,
|
||||
this.propertyInfo.value,
|
||||
{
|
||||
colorSwatchClass: "computedview-colorswatch",
|
||||
colorClass: "computedview-color",
|
||||
colorSwatchClass: "computed-colorswatch",
|
||||
colorClass: "computed-color",
|
||||
urlClass: "theme-link"
|
||||
// No need to use baseURI here as computed URIs are never relative.
|
||||
});
|
||||
@ -1089,9 +1090,9 @@ PropertyView.prototype = {
|
||||
this.matchedSelectorsContainer.parentNode.hidden = !hasMatchedSelectors;
|
||||
|
||||
if (hasMatchedSelectors) {
|
||||
this.matchedExpander.classList.add("expandable");
|
||||
this.matchedExpander.classList.add("computed-expandable");
|
||||
} else {
|
||||
this.matchedExpander.classList.remove("expandable");
|
||||
this.matchedExpander.classList.remove("computed-expandable");
|
||||
}
|
||||
|
||||
if (this.matchedExpanded && hasMatchedSelectors) {
|
||||
@ -1132,7 +1133,7 @@ PropertyView.prototype = {
|
||||
});
|
||||
let link = createChild(span, "a", {
|
||||
target: "_blank",
|
||||
class: "link theme-link",
|
||||
class: "computed-link theme-link",
|
||||
title: selector.href,
|
||||
sourcelocation: selector.source,
|
||||
tabindex: "0",
|
||||
@ -1157,7 +1158,7 @@ PropertyView.prototype = {
|
||||
});
|
||||
|
||||
let valueDiv = createChild(status, "div", {
|
||||
class: "fix-get-selection other-property-value theme-fg-color1"
|
||||
class: "fix-get-selection computed-other-property-value theme-fg-color1"
|
||||
});
|
||||
valueDiv.appendChild(selector.outputFragment);
|
||||
promises.push(selector.ready);
|
||||
@ -1336,8 +1337,8 @@ SelectorView.prototype = {
|
||||
let frag = outputParser.parseCssProperty(
|
||||
this.selectorInfo.name,
|
||||
this.selectorInfo.value, {
|
||||
colorSwatchClass: "computedview-colorswatch",
|
||||
colorClass: "computedview-color",
|
||||
colorSwatchClass: "computed-colorswatch",
|
||||
colorClass: "computed-color",
|
||||
urlClass: "theme-link",
|
||||
baseURI: this.selectorInfo.rule.href
|
||||
}
|
||||
|
||||
@ -30,7 +30,7 @@ add_task(function* () {
|
||||
});
|
||||
|
||||
function* checkColorCycling(container, view) {
|
||||
let valueNode = container.querySelector(".computedview-color");
|
||||
let valueNode = container.querySelector(".computed-color");
|
||||
let win = view.styleWindow;
|
||||
|
||||
// "Authored" (default; currently the computed value)
|
||||
@ -57,8 +57,8 @@ function* checkColorCycling(container, view) {
|
||||
}
|
||||
|
||||
function* checkSwatchShiftClick(container, win, expectedValue, comment) {
|
||||
let swatch = container.querySelector(".computedview-colorswatch");
|
||||
let valueNode = container.querySelector(".computedview-color");
|
||||
let swatch = container.querySelector(".computed-colorswatch");
|
||||
let valueNode = container.querySelector(".computed-color");
|
||||
swatch.scrollIntoView();
|
||||
|
||||
let onUnitChange = swatch.once("unit-change");
|
||||
|
||||
@ -145,7 +145,7 @@ const TEST_DATA = [
|
||||
desc: "Testing a matched rule value",
|
||||
getHoveredNode: function* (view) {
|
||||
let el = yield getComputedViewMatchedRules(view, "color");
|
||||
return el.querySelector(".other-property-value");
|
||||
return el.querySelector(".computed-other-property-value");
|
||||
},
|
||||
assertNodeInfo: function (nodeInfo) {
|
||||
is(nodeInfo.type, VIEW_NODE_VALUE_TYPE);
|
||||
|
||||
@ -38,7 +38,7 @@ add_task(function* () {
|
||||
yield selectNode("span", inspector);
|
||||
|
||||
info("Selecting the first computed style in the list");
|
||||
let firstStyle = view.styleDocument.querySelector(".property-view");
|
||||
let firstStyle = view.styleDocument.querySelector(".computed-property-view");
|
||||
ok(firstStyle, "First computed style found in panel");
|
||||
firstStyle.focus();
|
||||
|
||||
@ -50,7 +50,7 @@ add_task(function* () {
|
||||
|
||||
info("Verify the 2nd style has been expanded");
|
||||
let secondStyleSelectors = view.styleDocument.querySelectorAll(
|
||||
".property-content .matchedselectors")[1];
|
||||
".computed-property-content .matchedselectors")[1];
|
||||
ok(secondStyleSelectors.childNodes.length > 0, "Matched selectors expanded");
|
||||
|
||||
info("Tab back up and test the same thing, with space");
|
||||
@ -61,6 +61,6 @@ add_task(function* () {
|
||||
|
||||
info("Verify the 1st style has been expanded too");
|
||||
let firstStyleSelectors = view.styleDocument.querySelectorAll(
|
||||
".property-content .matchedselectors")[0];
|
||||
".computed-property-content .matchedselectors")[0];
|
||||
ok(firstStyleSelectors.childNodes.length > 0, "Matched selectors expanded");
|
||||
});
|
||||
|
||||
@ -30,7 +30,7 @@ function* testExpandOnTwistyClick({styleDocument, styleWindow}, inspector) {
|
||||
info("Testing that a property expands on twisty click");
|
||||
|
||||
info("Getting twisty element");
|
||||
let twisty = styleDocument.querySelector("#propertyContainer .expandable");
|
||||
let twisty = styleDocument.querySelector(".computed-expandable");
|
||||
ok(twisty, "Twisty found");
|
||||
|
||||
let onExpand = inspector.once("computed-view-property-expanded");
|
||||
@ -40,7 +40,7 @@ function* testExpandOnTwistyClick({styleDocument, styleWindow}, inspector) {
|
||||
yield onExpand;
|
||||
|
||||
// Expanded means the matchedselectors div is not empty
|
||||
let div = styleDocument.querySelector(".property-content .matchedselectors");
|
||||
let div = styleDocument.querySelector(".computed-property-content .matchedselectors");
|
||||
ok(div.childNodes.length > 0,
|
||||
"Matched selectors are expanded on twisty click");
|
||||
}
|
||||
@ -49,7 +49,7 @@ function* testCollapseOnTwistyClick({styleDocument, styleWindow}, inspector) {
|
||||
info("Testing that a property collapses on twisty click");
|
||||
|
||||
info("Getting twisty element");
|
||||
let twisty = styleDocument.querySelector("#propertyContainer .expandable");
|
||||
let twisty = styleDocument.querySelector(".computed-expandable");
|
||||
ok(twisty, "Twisty found");
|
||||
|
||||
let onCollapse = inspector.once("computed-view-property-collapsed");
|
||||
@ -59,7 +59,7 @@ function* testCollapseOnTwistyClick({styleDocument, styleWindow}, inspector) {
|
||||
yield onCollapse;
|
||||
|
||||
// Collapsed means the matchedselectors div is empty
|
||||
let div = styleDocument.querySelector(".property-content .matchedselectors");
|
||||
let div = styleDocument.querySelector(".computed-property-content .matchedselectors");
|
||||
ok(div.childNodes.length === 0,
|
||||
"Matched selectors are collapsed on twisty click");
|
||||
}
|
||||
@ -68,7 +68,7 @@ function* testExpandOnDblClick({styleDocument, styleWindow}, inspector) {
|
||||
info("Testing that a property expands on container dbl-click");
|
||||
|
||||
info("Getting computed property container");
|
||||
let container = styleDocument.querySelector(".property-view");
|
||||
let container = styleDocument.querySelector(".computed-property-view");
|
||||
ok(container, "Container found");
|
||||
|
||||
container.scrollIntoView();
|
||||
@ -80,7 +80,7 @@ function* testExpandOnDblClick({styleDocument, styleWindow}, inspector) {
|
||||
yield onExpand;
|
||||
|
||||
// Expanded means the matchedselectors div is not empty
|
||||
let div = styleDocument.querySelector(".property-content .matchedselectors");
|
||||
let div = styleDocument.querySelector(".computed-property-content .matchedselectors");
|
||||
ok(div.childNodes.length > 0, "Matched selectors are expanded on dblclick");
|
||||
}
|
||||
|
||||
@ -88,7 +88,7 @@ function* testCollapseOnDblClick({styleDocument, styleWindow}, inspector) {
|
||||
info("Testing that a property collapses on container dbl-click");
|
||||
|
||||
info("Getting computed property container");
|
||||
let container = styleDocument.querySelector(".property-view");
|
||||
let container = styleDocument.querySelector(".computed-property-view");
|
||||
ok(container, "Container found");
|
||||
|
||||
let onCollapse = inspector.once("computed-view-property-collapsed");
|
||||
@ -98,7 +98,7 @@ function* testCollapseOnDblClick({styleDocument, styleWindow}, inspector) {
|
||||
yield onCollapse;
|
||||
|
||||
// Collapsed means the matchedselectors div is empty
|
||||
let div = styleDocument.querySelector(".property-content .matchedselectors");
|
||||
let div = styleDocument.querySelector(".computed-property-content .matchedselectors");
|
||||
ok(div.childNodes.length === 0,
|
||||
"Matched selectors are collapsed on dblclick");
|
||||
}
|
||||
|
||||
@ -35,9 +35,9 @@ function fireCopyEvent(element) {
|
||||
*/
|
||||
function getComputedViewProperty(view, name) {
|
||||
let prop;
|
||||
for (let property of view.styleDocument.querySelectorAll(".property-view")) {
|
||||
let nameSpan = property.querySelector(".property-name");
|
||||
let valueSpan = property.querySelector(".property-value");
|
||||
for (let property of view.styleDocument.querySelectorAll(".computed-property-view")) {
|
||||
let nameSpan = property.querySelector(".computed-property-name");
|
||||
let valueSpan = property.querySelector(".computed-property-value");
|
||||
|
||||
if (nameSpan.firstChild.textContent === name) {
|
||||
prop = {nameSpan: nameSpan, valueSpan: valueSpan};
|
||||
@ -68,11 +68,11 @@ function getComputedViewPropertyView(view, name) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a reference to the property-content element for a given property name in
|
||||
* Get a reference to the computed-property-content element for a given property name in
|
||||
* the computed-view.
|
||||
* A property-content element always follows (nextSibling) the property itself
|
||||
* A computed-property-content element always follows (nextSibling) the property itself
|
||||
* and is only shown when the twisty icon is expanded on the property.
|
||||
* A property-content element contains matched rules, with selectors,
|
||||
* A computed-property-content element contains matched rules, with selectors,
|
||||
* properties, values and stylesheet links
|
||||
*
|
||||
* @param {CssComputedView} view
|
||||
@ -85,10 +85,10 @@ function getComputedViewPropertyView(view, name) {
|
||||
var getComputedViewMatchedRules = Task.async(function* (view, name) {
|
||||
let expander;
|
||||
let propertyContent;
|
||||
for (let property of view.styleDocument.querySelectorAll(".property-view")) {
|
||||
let nameSpan = property.querySelector(".property-name");
|
||||
for (let property of view.styleDocument.querySelectorAll(".computed-property-view")) {
|
||||
let nameSpan = property.querySelector(".computed-property-name");
|
||||
if (nameSpan.firstChild.textContent === name) {
|
||||
expander = property.querySelector(".expandable");
|
||||
expander = property.querySelector(".computed-expandable");
|
||||
propertyContent = property.nextSibling;
|
||||
break;
|
||||
}
|
||||
@ -132,7 +132,7 @@ function getComputedViewPropertyValue(view, name, propertyName) {
|
||||
*/
|
||||
function expandComputedViewPropertyByIndex(view, index) {
|
||||
info("Expanding property " + index + " in the computed view");
|
||||
let expandos = view.styleDocument.querySelectorAll("#propertyContainer .expandable");
|
||||
let expandos = view.styleDocument.querySelectorAll(".computed-expandable");
|
||||
if (!expandos.length || !expandos[index]) {
|
||||
return promise.reject();
|
||||
}
|
||||
@ -152,7 +152,7 @@ function expandComputedViewPropertyByIndex(view, index) {
|
||||
* @return {DOMNode} The link at the given index, if one exists, null otherwise
|
||||
*/
|
||||
function getComputedViewLinkByIndex(view, index) {
|
||||
let links = view.styleDocument.querySelectorAll(".rule-link .link");
|
||||
let links = view.styleDocument.querySelectorAll(".rule-link .computed-link");
|
||||
return links[index];
|
||||
}
|
||||
|
||||
@ -178,7 +178,7 @@ function selectAllText(view) {
|
||||
function* copyAllAndCheckClipboard(view, expectedPattern) {
|
||||
selectAllText(view);
|
||||
let contentDoc = view.styleDocument;
|
||||
let prop = contentDoc.querySelector(".property-view");
|
||||
let prop = contentDoc.querySelector(".computed-property-view");
|
||||
|
||||
try {
|
||||
info("Trigger a copy event and wait for the clipboard content");
|
||||
@ -205,7 +205,7 @@ function* copySomeTextAndCheckClipboard(view, positions, expectedPattern) {
|
||||
info("Testing selection copy");
|
||||
|
||||
let contentDocument = view.styleDocument;
|
||||
let props = contentDocument.querySelectorAll(".property-view");
|
||||
let props = contentDocument.querySelectorAll(".computed-property-view");
|
||||
|
||||
info("Create the text selection range");
|
||||
let range = contentDocument.createRange();
|
||||
|
||||
@ -46,53 +46,47 @@
|
||||
<!-- Main Panel Content -->
|
||||
<div id="inspector-main-content" class="devtools-main-content">
|
||||
<div id="inspector-toolbar" class="devtools-toolbar" nowindowdrag="true"
|
||||
data-localization-bundle="devtools/client/locales/inspector.properties">
|
||||
data-localization-bundle="devtools/client/locales/inspector.properties">
|
||||
<button id="inspector-element-add-button" class="devtools-button"
|
||||
data-localization="title=inspectorAddNode.label"></button>
|
||||
data-localization="title=inspectorAddNode.label"></button>
|
||||
<div class="devtools-toolbar-spacer"></div>
|
||||
<span id="inspector-searchlabel"></span>
|
||||
<div id="inspector-search" class="devtools-searchbox has-clear-btn">
|
||||
<input id="inspector-searchbox" class="devtools-searchinput"
|
||||
type="search"
|
||||
data-localization="placeholder=inspectorSearchHTML.label3"/>
|
||||
type="search"
|
||||
data-localization="placeholder=inspectorSearchHTML.label3"/>
|
||||
<button id="inspector-searchinput-clear" class="devtools-searchinput-clear" tabindex="-1"></button>
|
||||
</div>
|
||||
<button id="inspector-eyedropper-toggle"
|
||||
class="devtools-button command-button-invertable"></button>
|
||||
<button id="inspector-eyedropper-toggle" class="devtools-button command-button-invertable"></button>
|
||||
<div id="inspector-sidebar-toggle-box"></div>
|
||||
</div>
|
||||
<div id="markup-box"></div>
|
||||
<div id="inspector-breadcrumbs-toolbar" class="devtools-toolbar">
|
||||
<div id="inspector-breadcrumbs" class="breadcrumbs-widget-container"
|
||||
role="group" data-localization="aria-label=inspector.breadcrumbs.label" tabindex="0"></div>
|
||||
role="group" data-localization="aria-label=inspector.breadcrumbs.label" tabindex="0"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Splitter -->
|
||||
<div
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
id="inspector-splitter-box">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" id="inspector-splitter-box">
|
||||
</div>
|
||||
|
||||
<!-- Sidebar Container -->
|
||||
<div id="inspector-sidebar-container">
|
||||
<div
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
id="inspector-sidebar"
|
||||
hidden="true"></div>
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" id="inspector-sidebar" hidden="true"></div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar panel definitions -->
|
||||
<div id="tabpanels" style="visibility:collapse">
|
||||
<div id="sidebar-panel-ruleview" class="devtools-monospace theme-sidebar inspector-tabpanel"
|
||||
data-localization-bundle="devtools/client/locales/inspector.properties">
|
||||
data-localization-bundle="devtools/client/locales/inspector.properties">
|
||||
<div id="ruleview-toolbar-container" class="devtools-toolbar">
|
||||
<div id="ruleview-toolbar">
|
||||
<div class="devtools-searchbox has-clear-btn">
|
||||
<input id="ruleview-searchbox"
|
||||
class="devtools-filterinput devtools-rule-searchbox"
|
||||
type="search"
|
||||
data-localization="placeholder=inspector.filterStyles.placeholder"/>
|
||||
class="devtools-filterinput devtools-rule-searchbox"
|
||||
type="search"
|
||||
data-localization="placeholder=inspector.filterStyles.placeholder"/>
|
||||
<button id="ruleview-searchinput-clear" class="devtools-searchinput-clear"></button>
|
||||
</div>
|
||||
<div id="ruleview-command-toolbar">
|
||||
@ -116,31 +110,27 @@
|
||||
</div>
|
||||
|
||||
<div id="sidebar-panel-computedview" class="devtools-monospace theme-sidebar inspector-tabpanel"
|
||||
data-localization-bundle="devtools/client/locales/inspector.properties">
|
||||
<div id="computedview-toolbar" class="devtools-toolbar">
|
||||
data-localization-bundle="devtools/client/locales/inspector.properties">
|
||||
<div id="computed-toolbar" class="devtools-toolbar">
|
||||
<div class="devtools-searchbox has-clear-btn">
|
||||
<input id="computedview-searchbox"
|
||||
class="devtools-filterinput devtools-rule-searchbox"
|
||||
type="search"
|
||||
data-localization="placeholder=inspector.filterStyles.placeholder"/>
|
||||
<button id="computedview-searchinput-clear" class="devtools-searchinput-clear"></button>
|
||||
<input id="computed-searchbox"
|
||||
class="devtools-filterinput devtools-rule-searchbox"
|
||||
type="search"
|
||||
data-localization="placeholder=inspector.filterStyles.placeholder"/>
|
||||
<button id="computed-searchinput-clear" class="devtools-searchinput-clear"></button>
|
||||
</div>
|
||||
<input id="browser-style-checkbox"
|
||||
type="checkbox"
|
||||
class="includebrowserstyles"/>
|
||||
type="checkbox"
|
||||
class="includebrowserstyles"/>
|
||||
<label id="browser-style-checkbox-label" for="browser-style-checkbox"
|
||||
data-localization="content=inspector.browserStyles.label"></label>
|
||||
data-localization="content=inspector.browserStyles.label"></label>
|
||||
</div>
|
||||
|
||||
<div id="computedview-container">
|
||||
<div id="computedview-container-focusable" tabindex="-1">
|
||||
<div id="boxmodel-wrapper">
|
||||
</div>
|
||||
|
||||
<div id="propertyContainer" class="theme-separator" tabindex="0" dir="ltr">
|
||||
</div>
|
||||
|
||||
<div id="computedview-no-results" hidden="" data-localization="content=inspector.noProperties"></div>
|
||||
<div id="computed-container">
|
||||
<div id="computed-container-focusable" tabindex="-1">
|
||||
<div id="boxmodel-wrapper"></div>
|
||||
<div id="computed-property-container" class="theme-separator" tabindex="0" dir="ltr"></div>
|
||||
<div id="computed-no-results" hidden="" data-localization="content=inspector.noProperties"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -96,7 +96,7 @@ function* testExpandedComputedViewProperty(computedView, nodeFront) {
|
||||
yield propertyView.refreshMatchedSelectors();
|
||||
|
||||
let valueSpan = propertyView.matchedSelectorsContainer
|
||||
.querySelector(".bestmatch .other-property-value");
|
||||
.querySelector(".bestmatch .computed-other-property-value");
|
||||
|
||||
let tooltip = computedView.tooltips.getTooltip("previewTooltip");
|
||||
let panel = tooltip.panel;
|
||||
|
||||
@ -199,9 +199,9 @@ var simulateColorPickerChange = Task.async(function* (ruleView, colorPicker,
|
||||
*/
|
||||
function getComputedViewProperty(view, name) {
|
||||
let prop;
|
||||
for (let property of view.styleDocument.querySelectorAll(".property-view")) {
|
||||
let nameSpan = property.querySelector(".property-name");
|
||||
let valueSpan = property.querySelector(".property-value");
|
||||
for (let property of view.styleDocument.querySelectorAll(".computed-property-view")) {
|
||||
let nameSpan = property.querySelector(".computed-property-name");
|
||||
let valueSpan = property.querySelector(".computed-property-value");
|
||||
|
||||
if (nameSpan.firstChild.textContent === name) {
|
||||
prop = {nameSpan, valueSpan};
|
||||
|
||||
@ -332,15 +332,15 @@
|
||||
column-rule: 1px solid var(--theme-splitter-color);
|
||||
}
|
||||
|
||||
.boxmodel-properties-wrapper .property-view {
|
||||
.boxmodel-properties-wrapper .computed-property-view {
|
||||
padding-inline-start: 17px;
|
||||
}
|
||||
|
||||
.boxmodel-properties-wrapper .property-name-container {
|
||||
.boxmodel-properties-wrapper .computed-property-name-container {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.boxmodel-properties-wrapper .property-value-container {
|
||||
.boxmodel-properties-wrapper .computed-property-value-container {
|
||||
flex: 1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#computedview-container {
|
||||
#computed-container {
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
@ -21,12 +21,12 @@
|
||||
is focused and therefore can handle shortcuts.
|
||||
However, for accessibility reasons, tabindex is set to -1 to avoid having to tab
|
||||
through it, and the outline is hidden. */
|
||||
#computedview-container-focusable {
|
||||
#computed-container-focusable {
|
||||
height: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#computedview-toolbar {
|
||||
#computed-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
-moz-user-select: none;
|
||||
@ -45,7 +45,7 @@
|
||||
margin-inline-end: 5px;
|
||||
}
|
||||
|
||||
#propertyContainer {
|
||||
#computed-property-container {
|
||||
-moz-user-select: text;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
@ -56,54 +56,59 @@
|
||||
background: var(--theme-body-background);
|
||||
}
|
||||
|
||||
.property-view-hidden,
|
||||
.property-content-hidden {
|
||||
.computed-property-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.property-view {
|
||||
.computed-property-view {
|
||||
padding: 2px 0px;
|
||||
padding-inline-start: 5px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.property-name-container {
|
||||
.computed-property-name-container {
|
||||
width: 202px;
|
||||
}
|
||||
|
||||
.property-value-container {
|
||||
.computed-property-value-container {
|
||||
display: flex;
|
||||
flex: 1 1 168px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.property-name-container > *,
|
||||
.property-value-container > * {
|
||||
.computed-property-name-container > *,
|
||||
.computed-property-value-container > * {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.property-name {
|
||||
.computed-property-name {
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
.other-property-value {
|
||||
.computed-other-property-value {
|
||||
background-image: url(images/arrow-e.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 5px 8px;
|
||||
background-position: left center;
|
||||
padding-inline-start: 8px;
|
||||
}
|
||||
|
||||
.computed-other-property-value:dir(rtl) {
|
||||
background-position-x: right;
|
||||
}
|
||||
|
||||
@media (min-resolution: 1.1dppx) {
|
||||
.other-property-value {
|
||||
.computed-other-property-value {
|
||||
background-image: url(images/arrow-e@2x.png);
|
||||
}
|
||||
}
|
||||
|
||||
.property-value {
|
||||
.computed-property-value {
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@ -111,25 +116,16 @@
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
.other-property-value {
|
||||
background-position: left center;
|
||||
padding-inline-start: 8px;
|
||||
}
|
||||
|
||||
.other-property-value:dir(rtl) {
|
||||
background-position-x: right;
|
||||
}
|
||||
|
||||
.property-content {
|
||||
.computed-property-content {
|
||||
padding-inline-start: 17px;
|
||||
}
|
||||
|
||||
.theme-firebug .property-view,
|
||||
.theme-firebug .property-content {
|
||||
.theme-firebug .computed-property-view,
|
||||
.theme-firebug .computed-property-content {
|
||||
font-family: var(--proportional-font-family);
|
||||
}
|
||||
|
||||
.theme-firebug .property-view {
|
||||
.theme-firebug .computed-property-view {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@ -148,11 +144,11 @@
|
||||
}
|
||||
|
||||
/* From skin */
|
||||
.expander {
|
||||
.computed-expander {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.expandable {
|
||||
.computed-expandable {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@ -183,7 +179,7 @@
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#computedview-no-results {
|
||||
#computed-no-results {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -195,37 +191,31 @@
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.link {
|
||||
.computed-link {
|
||||
padding: 0 3px;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* Workaround until float: inline-end; is enabled by default */
|
||||
.link:dir(rtl) {
|
||||
.computed-link:dir(rtl) {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* Take away these two :visited rules to get a core dumper */
|
||||
/* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
|
||||
|
||||
.link,
|
||||
.link:visited {
|
||||
.computed-link,
|
||||
.computed-link:visited {
|
||||
color: #0091ff;
|
||||
}
|
||||
|
||||
.link,
|
||||
.helplink,
|
||||
.link:visited,
|
||||
.helplink:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
.computed-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.computedview-colorswatch {
|
||||
.computed-colorswatch {
|
||||
border-radius: 50%;
|
||||
width: 0.9em;
|
||||
height: 0.9em;
|
||||
@ -235,7 +225,7 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.computedview-colorswatch::before {
|
||||
.computed-colorswatch::before {
|
||||
content: '';
|
||||
background-color: #eee;
|
||||
background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
|
||||
|
||||
@ -181,7 +181,7 @@ body {
|
||||
}
|
||||
|
||||
.ruleview-swatch,
|
||||
.computedview-colorswatch {
|
||||
.computed-colorswatch {
|
||||
box-shadow: 0 0 0 1px #818181;
|
||||
}
|
||||
|
||||
|
||||
@ -191,7 +191,7 @@ window {
|
||||
/* "no results" warning message displayed in the ruleview and in the computed view */
|
||||
|
||||
#ruleview-no-results,
|
||||
#computedview-no-results {
|
||||
#computed-no-results {
|
||||
color: var(--theme-body-color-inactive);
|
||||
text-align: center;
|
||||
margin: 5px;
|
||||
|
||||
@ -183,7 +183,7 @@ body {
|
||||
}
|
||||
|
||||
.ruleview-swatch,
|
||||
.computedview-colorswatch {
|
||||
.computed-colorswatch {
|
||||
box-shadow: 0 0 0 1px #c4c4c4;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user