wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Gabriel Luong 2016-01-26 11:17:47 -05:00
parent 4fd7117d70
commit a63dcaa610
16 changed files with 72 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
devtools/client/framework/sidebar.js
View File

@ -291,6 +291,12 @@ ToolSidebar.prototype = {
// Find an ID for this unknown tab
let id = tab.getAttribute("id") || "untitled-tab-" + (this.untitledTabsIndex++);
// If the existing tab contains the tab ID prefix, extract the ID of the
// tab
if (id.startsWith(this.TAB_ID_PREFIX)) {
id = id.split(this.TAB_ID_PREFIX).pop();
}
// Register the tab
this._tabs.set(id, tab);
this.emit("new-tab-registered", id);

13
devtools/client/inspector/inspector-panel.js
View File

@ -4,7 +4,9 @@
* 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/. */
const {Cc, Ci, Cu, Cr} = require("chrome");
"use strict";
const {Cc, Ci, Cu} = require("chrome");
Cu.import("resource://gre/modules/Services.jsm");
@ -19,6 +21,7 @@ loader.lazyGetter(this, "MarkupView", () => require("devtools/client/inspector/m
loader.lazyGetter(this, "HTMLBreadcrumbs", () => require("devtools/client/inspector/breadcrumbs").HTMLBreadcrumbs);
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, "strings", () => {
return Services.strings.createBundle("chrome://devtools/locale/inspector.properties");
@ -352,9 +355,7 @@ InspectorPanel.prototype = {
this.sidebar.on("select", this._setDefaultSidebar);
this.sidebar.addTab("ruleview",
"chrome://devtools/content/inspector/rules/rules.xhtml",
"ruleview" == defaultTab);
this.ruleview = new RuleViewTool(this, this.panelWin);
this.sidebar.addTab("computedview",
"chrome://devtools/content/inspector/computed/computed.xhtml",
@ -586,6 +587,10 @@ InspectorPanel.prototype = {
this._toolbox.off("select", this.updateDebuggerPausedWarning);
this._toolbox.off("host-changed", this.onToolboxHostChanged);
if (this.ruleview) {
this.ruleview.destroy();
}
this.sidebar.off("select", this._setDefaultSidebar);
let sidebarDestroyer = this.sidebar.destroy();
this.sidebar = null;

39
devtools/client/inspector/inspector.xul
View File

@ -8,12 +8,15 @@
<?xml-stylesheet href="chrome://devtools/skin/common.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/rules.css" type="text/css"?>
<!DOCTYPE window [
<!ENTITY % inspectorDTD SYSTEM "chrome://devtools/locale/inspector.dtd" >
%inspectorDTD;
<!ENTITY % inspectorDTD SYSTEM "chrome://devtools/locale/inspector.dtd"> %inspectorDTD;
<!ENTITY % styleinspectorDTD SYSTEM "chrome://devtools/locale/styleinspector.dtd"> %styleinspectorDTD;
]>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
<script type="application/javascript;version=1.8"
src="chrome://devtools/content/shared/theme-switching.js"/>
@ -169,8 +172,34 @@
</vbox>
<splitter class="devtools-side-splitter"/>
<tabbox id="inspector-sidebar" handleCtrlTab="false" class="devtools-sidebar-tabs" hidden="true">
<tabs/>
<tabpanels flex="1"/>
<tabs>
<tab id="sidebar-tab-ruleview"
label="&ruleViewTitle;"
crop="end"/>
</tabs>
<tabpanels flex="1">
<tabpanel id="sidebar-panel-ruleview" class="devtools-monospace theme-sidebar">
<html:div id="ruleview-toolbar" class="devtools-toolbar devtools-sidebar-toolbar">
<html:div class="devtools-searchbox">
<html:input id="ruleview-searchbox"
class="devtools-searchinput devtools-rule-searchbox"
type="search"
placeholder="&filterStylesPlaceholder;"/>
<html:button id="ruleview-searchinput-clear" class="devtools-searchinput-clear"></html:button>
</html:div>
<html:button id="ruleview-add-rule-button" title="&addRuleButtonTooltip;" class="devtools-button"></html:button>
<html:button id="pseudo-class-panel-toggle" title="&togglePseudoClassPanel;" class="devtools-button"></html:button>
</html:div>
<html:div id="pseudo-class-panel" class="devtools-toolbar devtools-sidebar-toolbar" hidden="true" tabindex="-1">
<html:label><html:input id="pseudo-hover-toggle" type="checkbox" value=":hover" tabindex="-1" />:hover</html:label>
<html:label><html:input id="pseudo-active-toggle" type="checkbox" value=":active" tabindex="-1" />:active</html:label>
<html:label><html:input id="pseudo-focus-toggle" type="checkbox" value=":focus" tabindex="-1" />:focus</html:label>
</html:div>
<html:div id="ruleview-container" class="ruleview">
</html:div>
</tabpanel>
</tabpanels>
</tabbox>
</box>
</window>

2
devtools/client/inspector/rules/rules.js
View File

@ -219,7 +219,7 @@ function CssRuleView(inspector, document, store, pageStyle) {
autoSelect: true,
theme: "auto"
};
this.popup = new AutocompletePopup(this.styleWindow.parent.document, options);
this.popup = new AutocompletePopup(this.styleDocument, options);
this._showEmpty();

57
devtools/client/inspector/rules/rules.xhtml
View File

@ -1,57 +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;
]>
<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>&ruleViewTitle;</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/rules.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 {RuleViewTool} = require("devtools/client/inspector/rules/rules");
this.ruleview = new RuleViewTool(panel, window);
}
window.onunload = function() {
if (this.ruleview) {
this.ruleview.destroy();
}
}
</script>
</head>
<body dir="&locale.dir;">
<div id="root" class="devtools-monospace">
<div id="ruleview-toolbar" class="devtools-toolbar">
<div class="devtools-searchbox">
<input id="ruleview-searchbox"
class="devtools-searchinput devtools-rule-searchbox"
type="search" placeholder="&filterStylesPlaceholder;"/>
<button id="ruleview-searchinput-clear" class="devtools-searchinput-clear"></button>
</div>
<button id="ruleview-add-rule-button" title="&addRuleButtonTooltip;" class="devtools-button"></button>
<button id="pseudo-class-panel-toggle" title="&togglePseudoClassPanel;" class="devtools-button"></button>
</div>
<div id="pseudo-class-panel" class="devtools-toolbar" hidden="true" tabindex="-1">
<label><input id="pseudo-hover-toggle" type="checkbox" value=":hover" tabindex="-1" />:hover</label>
<label><input id="pseudo-active-toggle" type="checkbox" value=":active" tabindex="-1" />:active</label>
<label><input id="pseudo-focus-toggle" type="checkbox" value=":focus" tabindex="-1" />:focus</label>
</div>
</div>
<div id="ruleview-container" class="devtools-monospace">
</div>
</body>
</html>

2
devtools/client/inspector/rules/test/browser_rules_add-property-cancel_01.js
View File

@ -43,6 +43,6 @@ function* testCancelNew(view) {
"Should have cancelled creating a new text property.");
ok(!elementRuleEditor.propertyList.hasChildNodes(),
"Should not have any properties.");
is(view.styleDocument.body, view.styleDocument.activeElement,
is(view.styleDocument.activeElement, view.styleDocument.documentElement,
"Correct element has focus");
}

2
devtools/client/inspector/rules/test/browser_rules_add-property-cancel_02.js
View File

@ -71,7 +71,7 @@ add_task(function*() {
EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
yield onRuleViewChanged;
is(view.styleDocument.body, view.styleDocument.activeElement,
is(view.styleDocument.documentElement, view.styleDocument.activeElement,
"Correct element has focus");
is(elementRuleEditor.rule.textProps.length, 1,

2
devtools/client/inspector/rules/test/browser_rules_add-property-cancel_03.js
View File

@ -48,6 +48,6 @@ function* testCancelNewOnEscape(inspector, view) {
"Should have canceled creating a new text property.");
ok(!elementRuleEditor.propertyList.hasChildNodes(),
"Should not have any properties.");
is(view.styleDocument.body, view.styleDocument.activeElement,
is(view.styleDocument.documentElement, view.styleDocument.activeElement,
"Correct element has focus");
}

2
devtools/client/inspector/rules/test/browser_rules_content_02.js
View File

@ -44,7 +44,7 @@ add_task(function*() {
let inspector = toolbox.getPanel("inspector");
yield inspector.once("inspector-updated");
let view = inspector.sidebar.getWindowForTab("ruleview")["ruleview"].view;
let view = inspector.ruleview.view;
checkRuleViewContent(view);
});

8
devtools/client/inspector/rules/test/browser_rules_cycle-color.js
View File

@ -17,15 +17,15 @@ const TEST_URI = `
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
let {view} = yield openRuleView();
let container = getRuleViewProperty(view, "body", "color").valueSpan;
checkColorCycling(container, inspector);
checkColorCycling(container, view);
});
function checkColorCycling(container, inspector) {
function checkColorCycling(container, view) {
let swatch = container.querySelector(".ruleview-colorswatch");
let valueNode = container.querySelector(".ruleview-color");
let win = inspector.sidebar.getWindowForTab("ruleview");
let win = view.styleWindow;
// Hex
is(valueNode.textContent, "#f00", "Color displayed as a hex value.");

5
devtools/client/inspector/rules/test/browser_rules_edit-selector_05.js
View File

@ -57,6 +57,11 @@ function* testEditSelector(view, name) {
ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
ok(getRuleViewRuleEditor(view, 1).element.getAttribute("unmatched"),
"Rule with " + name + " does not match the current element.");
// Escape the new property editor after editing the selector
let onBlur = once(view.styleDocument.activeElement, "blur");
EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
yield onBlur;
}
function* checkModifiedElement(view, name) {

4
devtools/client/inspector/rules/test/browser_rules_search-filter_context-menu.js
View File

@ -36,8 +36,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");

3
devtools/client/inspector/rules/test/browser_rules_select-and-copy-styles.js
View File

@ -97,8 +97,7 @@ function* checkSelectAll(view) {
info("Checking that _SelectAll() then copy returns the correct " +
"clipboard value");
view._contextmenu._onSelectAll();
let expectedPattern = "[\\r\\n]+" +
"element {[\\r\\n]+" +
let expectedPattern = "element {[\\r\\n]+" +
" margin: 10em;[\\r\\n]+" +
" font-size: 14pt;[\\r\\n]+" +
" font-family: helvetica,sans-serif;[\\r\\n]+" +

2
devtools/client/inspector/shared/style-inspector-menu.js
View File

@ -369,7 +369,7 @@ StyleInspectorMenu.prototype = {
*/
_onSelectAll: function() {
let selection = this.styleWindow.getSelection();
selection.selectAllChildren(this.styleDocument.documentElement);
selection.selectAllChildren(this.view.element);
},
/**

1
devtools/client/jar.mn
View File

@ -32,7 +32,6 @@ devtools.jar:
content/inspector/layout/layout.js (inspector/layout/layout.js)
content/inspector/layout/layout.xhtml (inspector/layout/layout.xhtml)
content/inspector/markup/markup.xhtml (inspector/markup/markup.xhtml)
content/inspector/rules/rules.xhtml (inspector/rules/rules.xhtml)
content/animationinspector/animation-controller.js (animationinspector/animation-controller.js)
content/animationinspector/animation-panel.js (animationinspector/animation-panel.js)
content/animationinspector/animation-inspector.xhtml (animationinspector/animation-inspector.xhtml)

19
devtools/client/themes/rules.css
View File

@ -13,27 +13,19 @@
--rule-filter-icon: url(images/magnifying-glass.png);
}
* {
box-sizing: border-box;
}
:root {
height: 100%;
}
body {
#sidebar-panel-ruleview {
margin: 0;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
#ruleview-container {
-moz-user-select: text;
overflow: auto;
min-height: 0;
flex: 1;
height: 100%;
flex: auto;
height: 0px;
}
#ruleview-container.non-interactive {
@ -42,8 +34,7 @@ body {
transition: visibility 0.25s;
}
.devtools-toolbar {
width: 100%;
.devtools-sidebar-toolbar {
display: flex;
}