mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1238133 - Part 4: Make the computed view live inside the inspector panel frame r=bgrins

This commit is contained in:
Gabriel Luong 2016-01-26 11:17:48 -05:00
Родитель 9197a5ebf7
Коммит f5172856d6
13 изменённых файлов: 75 добавлений и 151 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

16
devtools/client/inspector/computed/computed.js
Просмотреть файл

@ -963,13 +963,15 @@ PropertyView.prototype = {
}; };
this.element.addEventListener("keydown", this.onKeyDown, false); 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 // Build the twisty expand/collapse
this.matchedExpander = doc.createElementNS(HTML_NS, "div"); this.matchedExpander = doc.createElementNS(HTML_NS, "div");
this.matchedExpander.className = "expander theme-twisty"; this.matchedExpander.className = "expander theme-twisty";
this.matchedExpander.addEventListener("click", this.onMatchedToggle, false); this.matchedExpander.addEventListener("click", this.onMatchedToggle, false);
this.element.appendChild(this.matchedExpander); nameContainer.appendChild(this.matchedExpander);
this.focusElement = () => this.element.focus();
// Build the style name element // Build the style name element
this.nameNode = doc.createElementNS(HTML_NS, "div"); this.nameNode = doc.createElementNS(HTML_NS, "div");
@ -981,7 +983,11 @@ PropertyView.prototype = {
// Make it hand over the focus to the container // Make it hand over the focus to the container
this.onFocus = () => this.element.focus(); this.onFocus = () => this.element.focus();
this.nameNode.addEventListener("click", this.onFocus, false); 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 // Build the style value element
this.valueNode = doc.createElementNS(HTML_NS, "div"); this.valueNode = doc.createElementNS(HTML_NS, "div");
@ -992,7 +998,7 @@ PropertyView.prototype = {
this.valueNode.setAttribute("dir", "ltr"); this.valueNode.setAttribute("dir", "ltr");
// Make it hand over the focus to the container // Make it hand over the focus to the container
this.valueNode.addEventListener("click", this.onFocus, false); this.valueNode.addEventListener("click", this.onFocus, false);
this.element.appendChild(this.valueNode); valueContainer.appendChild(this.valueNode);
return this.element; return this.element;
}, },

78
devtools/client/inspector/computed/computed.xhtml
Просмотреть файл

@ -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>

8
devtools/client/inspector/computed/test/browser_computed_cycle_color.js
Просмотреть файл

@ -22,17 +22,17 @@ add_task(function*() {
info("Checking the property itself"); info("Checking the property itself");
let container = getComputedViewPropertyView(view, "color").valueNode; let container = getComputedViewPropertyView(view, "color").valueNode;
checkColorCycling(container, inspector); checkColorCycling(container, view);
info("Checking matched selectors"); info("Checking matched selectors");
container = yield getComputedViewMatchedRules(view, "color"); 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 swatch = container.querySelector(".computedview-colorswatch");
let valueNode = container.querySelector(".computedview-color"); let valueNode = container.querySelector(".computedview-color");
let win = inspector.sidebar.getWindowForTab("computedview"); let win = view.styleWindow;
// "Authored" (default; currently the computed value) // "Authored" (default; currently the computed value)
is(valueNode.textContent, "rgb(255, 0, 0)", is(valueNode.textContent, "rgb(255, 0, 0)",

4
devtools/client/inspector/computed/test/browser_computed_search-filter_context-menu.js
Просмотреть файл

@ -37,8 +37,8 @@ add_task(function*() {
is(cmdUndo.getAttribute("disabled"), "true", "cmdUndo is disabled"); is(cmdUndo.getAttribute("disabled"), "true", "cmdUndo is disabled");
is(cmdDelete.getAttribute("disabled"), "true", "cmdDelete is disabled"); is(cmdDelete.getAttribute("disabled"), "true", "cmdDelete is disabled");
is(cmdSelectAll.getAttribute("disabled"), "", "cmdSelectAll is enabled"); is(cmdSelectAll.getAttribute("disabled"), "", "cmdSelectAll is enabled");
is(cmdCut.getAttribute("disabled"), "", "cmdCut is enabled"); is(cmdCut.getAttribute("disabled"), "true", "cmdCut is disabled");
is(cmdCopy.getAttribute("disabled"), "", "cmdCopy is enabled"); is(cmdCopy.getAttribute("disabled"), "true", "cmdCopy is disabled");
is(cmdPaste.getAttribute("disabled"), "true", "cmdPaste is disabled"); is(cmdPaste.getAttribute("disabled"), "true", "cmdPaste is disabled");
info("Closing context menu"); info("Closing context menu");

2
devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles.js
Просмотреть файл

@ -53,7 +53,7 @@ function* checkCopySelection(view) {
let range = contentDocument.createRange(); let range = contentDocument.createRange();
range.setStart(props[1], 0); range.setStart(props[1], 0);
range.setEnd(props[3], 3); range.setEnd(props[3], 2);
contentDocument.defaultView.getSelection().addRange(range); contentDocument.defaultView.getSelection().addRange(range);
info("Checking that cssHtmlTree.siBoundCopy() returns the correct " + info("Checking that cssHtmlTree.siBoundCopy() returns the correct " +

10
devtools/client/inspector/inspector-panel.js
Просмотреть файл

@ -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, "ToolSidebar", () => require("devtools/client/framework/sidebar").ToolSidebar);
loader.lazyGetter(this, "InspectorSearch", () => require("devtools/client/inspector/inspector-search").InspectorSearch); 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, "RuleViewTool", () => require("devtools/client/inspector/rules/rules").RuleViewTool);
loader.lazyGetter(this, "ComputedViewTool", () => require("devtools/client/inspector/computed/computed").ComputedViewTool);
loader.lazyGetter(this, "strings", () => { loader.lazyGetter(this, "strings", () => {
return Services.strings.createBundle("chrome://devtools/locale/inspector.properties"); return Services.strings.createBundle("chrome://devtools/locale/inspector.properties");
@ -356,10 +357,7 @@ InspectorPanel.prototype = {
this.sidebar.on("select", this._setDefaultSidebar); this.sidebar.on("select", this._setDefaultSidebar);
this.ruleview = new RuleViewTool(this, this.panelWin); this.ruleview = new RuleViewTool(this, this.panelWin);
this.computedview = new ComputedViewTool(this, this.panelWin);
this.sidebar.addTab("computedview",
"chrome://devtools/content/inspector/computed/computed.xhtml",
"computedview" == defaultTab);
if (Services.prefs.getBoolPref("devtools.fontinspector.enabled") && this.canGetUsedFontFaces) { if (Services.prefs.getBoolPref("devtools.fontinspector.enabled") && this.canGetUsedFontFaces) {
this.sidebar.addTab("fontinspector", this.sidebar.addTab("fontinspector",
@ -591,6 +589,10 @@ InspectorPanel.prototype = {
this.ruleview.destroy(); this.ruleview.destroy();
} }
if (this.computedview) {
this.computedview.destroy();
}
this.sidebar.off("select", this._setDefaultSidebar); this.sidebar.off("select", this._setDefaultSidebar);
let sidebarDestroyer = this.sidebar.destroy(); let sidebarDestroyer = this.sidebar.destroy();
this.sidebar = null; this.sidebar = null;

27
devtools/client/inspector/inspector.xul
Просмотреть файл

@ -9,6 +9,7 @@
<?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?> <?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/inspector.css" type="text/css"?>
<?xml-stylesheet href="chrome://devtools/skin/rules.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 [ <!DOCTYPE window [
<!ENTITY % inspectorDTD SYSTEM "chrome://devtools/locale/inspector.dtd"> %inspectorDTD; <!ENTITY % inspectorDTD SYSTEM "chrome://devtools/locale/inspector.dtd"> %inspectorDTD;
@ -176,6 +177,9 @@
<tab id="sidebar-tab-ruleview" <tab id="sidebar-tab-ruleview"
label="&ruleViewTitle;" label="&ruleViewTitle;"
crop="end"/> crop="end"/>
<tab id="sidebar-tab-computedview"
label="&computedViewTitle;"
crop="end"/>
</tabs> </tabs>
<tabpanels flex="1"> <tabpanels flex="1">
<tabpanel id="sidebar-panel-ruleview" class="devtools-monospace theme-sidebar"> <tabpanel id="sidebar-panel-ruleview" class="devtools-monospace theme-sidebar">
@ -199,6 +203,29 @@
<html:div id="ruleview-container" class="ruleview"> <html:div id="ruleview-container" class="ruleview">
</html:div> </html:div>
</tabpanel> </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> </tabpanels>
</tabbox> </tabbox>
</box> </box>

3
devtools/client/inspector/shared/test/browser_styleinspector_refresh_when_active.js
Просмотреть файл

@ -19,8 +19,7 @@ add_task(function*() {
is(getRuleViewPropertyValue(view, "element", "color"), "red", is(getRuleViewPropertyValue(view, "element", "color"), "red",
"The rule-view shows the properties for test node one"); "The rule-view shows the properties for test node one");
let cView = inspector.sidebar.getWindowForTab("computedview") let cView = inspector.computedview.view;
.computedview.view;
let prop = getComputedViewProperty(cView, "color"); let prop = getComputedViewProperty(cView, "color");
ok(!prop, "The computed-view doesn't show the properties for test node one"); ok(!prop, "The computed-view doesn't show the properties for test node one");

7
devtools/client/inspector/shared/test/head.js
Просмотреть файл

@ -250,18 +250,13 @@ function waitForToolboxFrameFocus(toolbox) {
var openInspectorSideBar = Task.async(function*(id) { var openInspectorSideBar = Task.async(function*(id) {
let {toolbox, inspector} = yield openInspector(); 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"); info("Selecting the " + id + " sidebar");
inspector.sidebar.select(id); inspector.sidebar.select(id);
return { return {
toolbox: toolbox, toolbox: toolbox,
inspector: inspector, inspector: inspector,
view: inspector.sidebar.getWindowForTab(id)[id].view view: inspector[id].view
}; };
}); });

17
devtools/client/inspector/test/browser_inspector_pseudoclass-lock.js
Просмотреть файл

@ -21,7 +21,10 @@ add_task(function*() {
info("Creating the test tab and opening the rule-view"); info("Creating the test tab and opening the rule-view");
let {toolbox, inspector, testActor} = yield openInspectorForURL(TEST_URL); 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"); info("Selecting the test node");
yield selectNode("#div-1", inspector); yield selectNode("#div-1", inspector);
@ -134,15 +137,3 @@ function* assertPseudoRemovedFromView(inspector, testActor, ruleview) {
is(value, "", "pseudo-class removed from infobar selector"); is(value, "", "pseudo-class removed from infobar selector");
yield inspector.toolbox.highlighter.hideBoxModel(); 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;
}

1
devtools/client/jar.mn
Просмотреть файл

@ -26,7 +26,6 @@ devtools.jar:
content/styleeditor/styleeditor.xul (styleeditor/styleeditor.xul) content/styleeditor/styleeditor.xul (styleeditor/styleeditor.xul)
content/styleeditor/styleeditor.css (styleeditor/styleeditor.css) content/styleeditor/styleeditor.css (styleeditor/styleeditor.css)
content/storage/storage.xul (storage/storage.xul) 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.js (inspector/fonts/fonts.js)
content/inspector/fonts/fonts.xhtml (inspector/fonts/fonts.xhtml) content/inspector/fonts/fonts.xhtml (inspector/fonts/fonts.xhtml)
content/inspector/layout/layout.js (inspector/layout/layout.js) content/inspector/layout/layout.js (inspector/layout/layout.js)

7
devtools/client/responsivedesign/test/head.js
Просмотреть файл

@ -125,18 +125,13 @@ function waitForToolboxFrameFocus(toolbox) {
var openInspectorSideBar = Task.async(function*(id) { var openInspectorSideBar = Task.async(function*(id) {
let {toolbox, inspector} = yield openInspector(); 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"); info("Selecting the " + id + " sidebar");
inspector.sidebar.select(id); inspector.sidebar.select(id);
return { return {
toolbox: toolbox, toolbox: toolbox,
inspector: inspector, inspector: inspector,
view: inspector.sidebar.getWindowForTab(id)[id].view view: inspector[id].view
}; };
}); });

46
devtools/client/themes/computed.css
Просмотреть файл

@ -3,21 +3,12 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this * 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/. */ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* From content */ #sidebar-panel-computedview {
* {
box-sizing: border-box;
}
:root {
height: 100%;
}
body {
margin: 0; margin: 0;
display : flex; display : flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
width: 100%;
} }
#browser-style-checkbox { #browser-style-checkbox {
@ -29,8 +20,8 @@ body {
#propertyContainer { #propertyContainer {
-moz-user-select: text; -moz-user-select: text;
overflow: auto; overflow: auto;
min-height: 0; height: 0px;
flex: 1; flex: auto;
} }
.row-striped { .row-striped {
@ -43,18 +34,26 @@ body {
} }
.property-view { .property-view {
clear: both;
padding: 2px 0 2px 17px; 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; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.property-name { .property-name {
/* -12px is so the expander triangle isn't pushed up above the property */
width: calc(100% - 12px);
overflow-x: hidden; overflow-x: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -74,7 +73,6 @@ body {
} }
.property-value { .property-value {
width: 100%;
overflow-x: hidden; overflow-x: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -88,16 +86,6 @@ body {
padding-left: 8px; 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 { .property-content {
padding-left: 17px; padding-left: 17px;
} }
@ -105,7 +93,7 @@ body {
/* From skin */ /* From skin */
.expander { .expander {
visibility: hidden; visibility: hidden;
margin-left: -12px!important; margin-left: -12px !important;
} }
.expandable { .expandable {