зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1238133 - Part 4: Make the computed view live inside the inspector panel frame r=bgrins
This commit is contained in:
Gabriel Luong
Родитель
9197a5ebf7
Коммит
f5172856d6
|
|
@ -963,13 +963,15 @@ PropertyView.prototype = {
|
|||
};
|
||||
this.element.addEventListener("keydown", this.onKeyDown, false);
|
||||
|
||||
let nameContainer = doc.createElementNS(HTML_NS, "div");
|
||||
nameContainer.className = "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.addEventListener("click", this.onMatchedToggle, false);
|
||||
this.element.appendChild(this.matchedExpander);
|
||||
|
||||
this.focusElement = () => this.element.focus();
|
||||
nameContainer.appendChild(this.matchedExpander);
|
||||
|
||||
// Build the style name element
|
||||
this.nameNode = doc.createElementNS(HTML_NS, "div");
|
||||
|
|
@ -981,7 +983,11 @@ PropertyView.prototype = {
|
|||
// Make it hand over the focus to the container
|
||||
this.onFocus = () => this.element.focus();
|
||||
this.nameNode.addEventListener("click", this.onFocus, false);
|
||||
this.element.appendChild(this.nameNode);
|
||||
nameContainer.appendChild(this.nameNode);
|
||||
|
||||
let valueContainer = doc.createElementNS(HTML_NS, "div");
|
||||
valueContainer.className = "property-value-container";
|
||||
this.element.appendChild(valueContainer);
|
||||
|
||||
// Build the style value element
|
||||
this.valueNode = doc.createElementNS(HTML_NS, "div");
|
||||
|
|
@ -992,7 +998,7 @@ PropertyView.prototype = {
|
|||
this.valueNode.setAttribute("dir", "ltr");
|
||||
// Make it hand over the focus to the container
|
||||
this.valueNode.addEventListener("click", this.onFocus, false);
|
||||
this.element.appendChild(this.valueNode);
|
||||
valueContainer.appendChild(this.valueNode);
|
||||
|
||||
return this.element;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,78 +0,0 @@
|
|||
<?xml version="1.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/. -->
|
||||
|
||||
<!DOCTYPE window [
|
||||
<!ENTITY % inspectorDTD SYSTEM "chrome://devtools/locale/styleinspector.dtd">
|
||||
%inspectorDTD;
|
||||
<!ENTITY % globalDTD SYSTEM "chrome://global/locale/global.dtd">
|
||||
%globalDTD;
|
||||
<!ELEMENT loop ANY>
|
||||
<!ATTLIST li foreach CDATA #IMPLIED>
|
||||
<!ATTLIST div foreach CDATA #IMPLIED>
|
||||
<!ATTLIST loop foreach CDATA #IMPLIED>
|
||||
<!ATTLIST a target CDATA #IMPLIED>
|
||||
<!ATTLIST a __pathElement CDATA #IMPLIED>
|
||||
<!ATTLIST div _id CDATA #IMPLIED>
|
||||
<!ATTLIST div save CDATA #IMPLIED>
|
||||
<!ATTLIST table save CDATA #IMPLIED>
|
||||
<!ATTLIST loop if CDATA #IMPLIED>
|
||||
<!ATTLIST tr if CDATA #IMPLIED>
|
||||
]>
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
|
||||
class="theme-sidebar">
|
||||
|
||||
<head>
|
||||
|
||||
<title>&computedViewTitle;</title>
|
||||
|
||||
<link rel="stylesheet" href="chrome://global/skin/global.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="chrome://devtools/skin/common.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="chrome://devtools/skin/computed.css" type="text/css"/>
|
||||
|
||||
<script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"/>
|
||||
|
||||
<script type="application/javascript;version=1.8">
|
||||
window.setPanel = function(panel, iframe) {
|
||||
let {require} = Components.utils.import("resource://devtools/shared/Loader.jsm", {});
|
||||
let {ComputedViewTool} = require("devtools/client/inspector/computed/computed");
|
||||
this.computedview = new ComputedViewTool(panel, window);
|
||||
}
|
||||
window.onunload = function() {
|
||||
if (this.computedview) {
|
||||
this.computedview.destroy();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body dir="&locale.dir;">
|
||||
|
||||
<div id="root" class="devtools-monospace">
|
||||
<div class="devtools-toolbar">
|
||||
<div class="devtools-searchbox">
|
||||
<input id="computedview-searchbox"
|
||||
class="devtools-searchinput devtools-rule-searchbox"
|
||||
type="search" placeholder="&filterStylesPlaceholder;"/>
|
||||
<button id="computedview-searchinput-clear" class="devtools-searchinput-clear"></button>
|
||||
</div>
|
||||
<xul:checkbox id="browser-style-checkbox"
|
||||
class="includebrowserstyles"
|
||||
checked="false" label="&browserStylesLabel;"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- The output from #templateProperty (below) is appended here. -->
|
||||
<div id="propertyContainer" class="devtools-monospace">
|
||||
</div>
|
||||
|
||||
<!-- When no properties are found the following block is displayed. -->
|
||||
<div id="noResults" hidden="">
|
||||
&noPropertiesFound;
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -22,17 +22,17 @@ add_task(function*() {
|
|||
|
||||
info("Checking the property itself");
|
||||
let container = getComputedViewPropertyView(view, "color").valueNode;
|
||||
checkColorCycling(container, inspector);
|
||||
checkColorCycling(container, view);
|
||||
|
||||
info("Checking matched selectors");
|
||||
container = yield getComputedViewMatchedRules(view, "color");
|
||||
checkColorCycling(container, inspector);
|
||||
checkColorCycling(container, view);
|
||||
});
|
||||
|
||||
function checkColorCycling(container, inspector) {
|
||||
function checkColorCycling(container, view) {
|
||||
let swatch = container.querySelector(".computedview-colorswatch");
|
||||
let valueNode = container.querySelector(".computedview-color");
|
||||
let win = inspector.sidebar.getWindowForTab("computedview");
|
||||
let win = view.styleWindow;
|
||||
|
||||
// "Authored" (default; currently the computed value)
|
||||
is(valueNode.textContent, "rgb(255, 0, 0)",
|
||||
|
|
|
|||
|
|
@ -37,8 +37,8 @@ add_task(function*() {
|
|||
is(cmdUndo.getAttribute("disabled"), "true", "cmdUndo is disabled");
|
||||
is(cmdDelete.getAttribute("disabled"), "true", "cmdDelete is disabled");
|
||||
is(cmdSelectAll.getAttribute("disabled"), "", "cmdSelectAll is enabled");
|
||||
is(cmdCut.getAttribute("disabled"), "", "cmdCut is enabled");
|
||||
is(cmdCopy.getAttribute("disabled"), "", "cmdCopy is enabled");
|
||||
is(cmdCut.getAttribute("disabled"), "true", "cmdCut is disabled");
|
||||
is(cmdCopy.getAttribute("disabled"), "true", "cmdCopy is disabled");
|
||||
is(cmdPaste.getAttribute("disabled"), "true", "cmdPaste is disabled");
|
||||
|
||||
info("Closing context menu");
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ function* checkCopySelection(view) {
|
|||
|
||||
let range = contentDocument.createRange();
|
||||
range.setStart(props[1], 0);
|
||||
range.setEnd(props[3], 3);
|
||||
range.setEnd(props[3], 2);
|
||||
contentDocument.defaultView.getSelection().addRange(range);
|
||||
|
||||
info("Checking that cssHtmlTree.siBoundCopy() returns the correct " +
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ loader.lazyGetter(this, "HTMLBreadcrumbs", () => require("devtools/client/inspec
|
|||
loader.lazyGetter(this, "ToolSidebar", () => require("devtools/client/framework/sidebar").ToolSidebar);
|
||||
loader.lazyGetter(this, "InspectorSearch", () => require("devtools/client/inspector/inspector-search").InspectorSearch);
|
||||
loader.lazyGetter(this, "RuleViewTool", () => require("devtools/client/inspector/rules/rules").RuleViewTool);
|
||||
loader.lazyGetter(this, "ComputedViewTool", () => require("devtools/client/inspector/computed/computed").ComputedViewTool);
|
||||
|
||||
loader.lazyGetter(this, "strings", () => {
|
||||
return Services.strings.createBundle("chrome://devtools/locale/inspector.properties");
|
||||
|
|
@ -356,10 +357,7 @@ InspectorPanel.prototype = {
|
|||
this.sidebar.on("select", this._setDefaultSidebar);
|
||||
|
||||
this.ruleview = new RuleViewTool(this, this.panelWin);
|
||||
|
||||
this.sidebar.addTab("computedview",
|
||||
"chrome://devtools/content/inspector/computed/computed.xhtml",
|
||||
"computedview" == defaultTab);
|
||||
this.computedview = new ComputedViewTool(this, this.panelWin);
|
||||
|
||||
if (Services.prefs.getBoolPref("devtools.fontinspector.enabled") && this.canGetUsedFontFaces) {
|
||||
this.sidebar.addTab("fontinspector",
|
||||
|
|
@ -591,6 +589,10 @@ InspectorPanel.prototype = {
|
|||
this.ruleview.destroy();
|
||||
}
|
||||
|
||||
if (this.computedview) {
|
||||
this.computedview.destroy();
|
||||
}
|
||||
|
||||
this.sidebar.off("select", this._setDefaultSidebar);
|
||||
let sidebarDestroyer = this.sidebar.destroy();
|
||||
this.sidebar = null;
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
<?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://devtools/skin/inspector.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://devtools/skin/rules.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://devtools/skin/computed.css" type="text/css"?>
|
||||
|
||||
<!DOCTYPE window [
|
||||
<!ENTITY % inspectorDTD SYSTEM "chrome://devtools/locale/inspector.dtd"> %inspectorDTD;
|
||||
|
|
@ -176,6 +177,9 @@
|
|||
<tab id="sidebar-tab-ruleview"
|
||||
label="&ruleViewTitle;"
|
||||
crop="end"/>
|
||||
<tab id="sidebar-tab-computedview"
|
||||
label="&computedViewTitle;"
|
||||
crop="end"/>
|
||||
</tabs>
|
||||
<tabpanels flex="1">
|
||||
<tabpanel id="sidebar-panel-ruleview" class="devtools-monospace theme-sidebar">
|
||||
|
|
@ -199,6 +203,29 @@
|
|||
<html:div id="ruleview-container" class="ruleview">
|
||||
</html:div>
|
||||
</tabpanel>
|
||||
|
||||
<tabpanel id="sidebar-panel-computedview" class="devtools-monospace theme-sidebar">
|
||||
<html:div class="devtools-toolbar devtools-sidebar-toolbar">
|
||||
<html:div class="devtools-searchbox">
|
||||
<html:input id="computedview-searchbox"
|
||||
class="devtools-searchinput devtools-rule-searchbox"
|
||||
type="search"
|
||||
placeholder="&filterStylesPlaceholder;"/>
|
||||
<html:button id="computedview-searchinput-clear" class="devtools-searchinput-clear"></html:button>
|
||||
</html:div>
|
||||
<checkbox id="browser-style-checkbox"
|
||||
class="includebrowserstyles"
|
||||
checked="false"
|
||||
label="&browserStylesLabel;"/>
|
||||
</html:div>
|
||||
|
||||
<html:div id="propertyContainer">
|
||||
</html:div>
|
||||
|
||||
<html:div id="noResults" hidden="">
|
||||
&noPropertiesFound;
|
||||
</html:div>
|
||||
</tabpanel>
|
||||
</tabpanels>
|
||||
</tabbox>
|
||||
</box>
|
||||
|
|
|
|||
|
|
@ -19,8 +19,7 @@ add_task(function*() {
|
|||
is(getRuleViewPropertyValue(view, "element", "color"), "red",
|
||||
"The rule-view shows the properties for test node one");
|
||||
|
||||
let cView = inspector.sidebar.getWindowForTab("computedview")
|
||||
.computedview.view;
|
||||
let cView = inspector.computedview.view;
|
||||
let prop = getComputedViewProperty(cView, "color");
|
||||
ok(!prop, "The computed-view doesn't show the properties for test node one");
|
||||
|
||||
|
|
|
|||
|
|
@ -250,18 +250,13 @@ function waitForToolboxFrameFocus(toolbox) {
|
|||
var openInspectorSideBar = Task.async(function*(id) {
|
||||
let {toolbox, inspector} = yield openInspector();
|
||||
|
||||
if (!hasSideBarTab(inspector, id)) {
|
||||
info("Waiting for the " + id + " sidebar to be ready");
|
||||
yield inspector.sidebar.once(id + "-ready");
|
||||
}
|
||||
|
||||
info("Selecting the " + id + " sidebar");
|
||||
inspector.sidebar.select(id);
|
||||
|
||||
return {
|
||||
toolbox: toolbox,
|
||||
inspector: inspector,
|
||||
view: inspector.sidebar.getWindowForTab(id)[id].view
|
||||
view: inspector[id].view
|
||||
};
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,10 @@ add_task(function*() {
|
|||
info("Creating the test tab and opening the rule-view");
|
||||
let {toolbox, inspector, testActor} = yield openInspectorForURL(TEST_URL);
|
||||
|
||||
let view = yield ensureRuleView(inspector);
|
||||
info("Selecting the ruleview sidebar");
|
||||
inspector.sidebar.select("ruleview");
|
||||
|
||||
let view = inspector.ruleview.view;
|
||||
|
||||
info("Selecting the test node");
|
||||
yield selectNode("#div-1", inspector);
|
||||
|
|
@ -134,15 +137,3 @@ function* assertPseudoRemovedFromView(inspector, testActor, ruleview) {
|
|||
is(value, "", "pseudo-class removed from infobar selector");
|
||||
yield inspector.toolbox.highlighter.hideBoxModel();
|
||||
}
|
||||
|
||||
function* ensureRuleView(inspector) {
|
||||
if (!inspector.sidebar.getWindowForTab("ruleview")) {
|
||||
info("Waiting for ruleview initialization to complete.");
|
||||
yield inspector.sidebar.once("ruleview-ready");
|
||||
}
|
||||
|
||||
info("Selecting the ruleview sidebar");
|
||||
inspector.sidebar.select("ruleview");
|
||||
|
||||
return inspector.sidebar.getWindowForTab("ruleview")["ruleview"].view;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@ devtools.jar:
|
|||
content/styleeditor/styleeditor.xul (styleeditor/styleeditor.xul)
|
||||
content/styleeditor/styleeditor.css (styleeditor/styleeditor.css)
|
||||
content/storage/storage.xul (storage/storage.xul)
|
||||
content/inspector/computed/computed.xhtml (inspector/computed/computed.xhtml)
|
||||
content/inspector/fonts/fonts.js (inspector/fonts/fonts.js)
|
||||
content/inspector/fonts/fonts.xhtml (inspector/fonts/fonts.xhtml)
|
||||
content/inspector/layout/layout.js (inspector/layout/layout.js)
|
||||
|
|
|
|||
|
|
@ -125,18 +125,13 @@ function waitForToolboxFrameFocus(toolbox) {
|
|||
var openInspectorSideBar = Task.async(function*(id) {
|
||||
let {toolbox, inspector} = yield openInspector();
|
||||
|
||||
if (!hasSideBarTab(inspector, id)) {
|
||||
info("Waiting for the " + id + " sidebar to be ready");
|
||||
yield inspector.sidebar.once(id + "-ready");
|
||||
}
|
||||
|
||||
info("Selecting the " + id + " sidebar");
|
||||
inspector.sidebar.select(id);
|
||||
|
||||
return {
|
||||
toolbox: toolbox,
|
||||
inspector: inspector,
|
||||
view: inspector.sidebar.getWindowForTab(id)[id].view
|
||||
view: inspector[id].view
|
||||
};
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -3,21 +3,12 @@
|
|||
* 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/. */
|
||||
|
||||
/* From content */
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
#sidebar-panel-computedview {
|
||||
margin: 0;
|
||||
display : flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#browser-style-checkbox {
|
||||
|
|
@ -29,8 +20,8 @@ body {
|
|||
#propertyContainer {
|
||||
-moz-user-select: text;
|
||||
overflow: auto;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
height: 0px;
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.row-striped {
|
||||
|
|
@ -43,18 +34,26 @@ body {
|
|||
}
|
||||
|
||||
.property-view {
|
||||
clear: both;
|
||||
padding: 2px 0 2px 17px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.property-view > * {
|
||||
.property-name-container {
|
||||
width: 202px;
|
||||
}
|
||||
|
||||
.property-value-container {
|
||||
width: 168px;
|
||||
}
|
||||
|
||||
.property-name-container > *,
|
||||
.property-value-container > * {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.property-name {
|
||||
/* -12px is so the expander triangle isn't pushed up above the property */
|
||||
width: calc(100% - 12px);
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
@ -74,7 +73,6 @@ body {
|
|||
}
|
||||
|
||||
.property-value {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
@ -88,16 +86,6 @@ body {
|
|||
padding-left: 8px;
|
||||
}
|
||||
|
||||
@media (min-width: 400px) {
|
||||
.property-name {
|
||||
width: 200px;
|
||||
}
|
||||
.property-value {
|
||||
/* -212px is accounting for the 200px property-name and the 12px triangle */
|
||||
width: calc(100% - 212px);
|
||||
}
|
||||
}
|
||||
|
||||
.property-content {
|
||||
padding-left: 17px;
|
||||
}
|
||||
|
|
@ -105,7 +93,7 @@ body {
|
|||
/* From skin */
|
||||
.expander {
|
||||
visibility: hidden;
|
||||
margin-left: -12px!important;
|
||||
margin-left: -12px !important;
|
||||
}
|
||||
|
||||
.expandable {
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче