зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1308227 - Add a CSS Grid accordion container to the layout panel r=jdescottes
This commit is contained in:
Gabriel Luong
Родитель
20e2de11f0
Коммит
6f26c12a04
|
|
@ -10,13 +10,15 @@
|
|||
<?xml-stylesheet href="chrome://devtools/skin/computed.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://devtools/skin/fonts.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://devtools/skin/boxmodel.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://devtools/skin/layout.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://devtools/skin/animationinspector.css" type="text/css"?>
|
||||
<?xml-stylesheet href="resource://devtools/client/shared/components/sidebar-toggle.css" type="text/css"?>
|
||||
<?xml-stylesheet href="resource://devtools/client/shared/components/splitter/split-box.css" type="text/css"?>
|
||||
<?xml-stylesheet href="resource://devtools/client/shared/components/tabs/tabs.css" type="text/css"?>
|
||||
<?xml-stylesheet href="resource://devtools/client/shared/components/tabs/tabbar.css" type="text/css"?>
|
||||
<?xml-stylesheet href="resource://devtools/client/inspector/components/side-panel.css" type="text/css"?>
|
||||
<?xml-stylesheet href="resource://devtools/client/inspector/components/inspector-tab-panel.css" type="text/css"?>
|
||||
<?xml-stylesheet href="resource://devtools/client/shared/components/splitter/split-box.css" type="text/css"?>
|
||||
<?xml-stylesheet href="resource://devtools/client/inspector/components/side-panel.css" type="text/css"?>
|
||||
<?xml-stylesheet href="resource://devtools/client/inspector/layout/components/Accordion.css" type="text/css"?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
||||
|
|
@ -186,7 +188,7 @@
|
|||
|
||||
<div id="sidebar-panel-layoutview" class="devtools-monospace theme-sidebar inspector-tabpanel"
|
||||
data-localization-bundle="devtools/locale/inspector.properties">
|
||||
<div id="layout-root"></div>
|
||||
<div id="layoutview-container"></div>
|
||||
</div>
|
||||
|
||||
<div id="sidebar-panel-fontinspector" class="devtools-monospace theme-sidebar inspector-tabpanel"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
/* 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/. */
|
||||
|
||||
/**
|
||||
* This file should not be modified and is a duplicate from the debugger.html project.
|
||||
* Any changes to this file should be imported from the upstream debugger.html project.
|
||||
*/
|
||||
|
||||
.accordion {
|
||||
background-color: var(--theme-body-background);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.accordion ._header {
|
||||
background-color: var(--theme-toolbar-background);
|
||||
border-bottom: 1px solid var(--theme-splitter-color);
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
padding: 5px;
|
||||
transition: all 0.25s ease;
|
||||
width: 100%;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
.accordion ._header:hover {
|
||||
background-color: var(--theme-selection-color);
|
||||
}
|
||||
|
||||
.accordion ._header:hover svg {
|
||||
fill: var(--theme-comment-alt);
|
||||
}
|
||||
|
||||
.accordion ._content {
|
||||
border-bottom: 1px solid var(--theme-splitter-color);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
/* 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/. */
|
||||
|
||||
/**
|
||||
* This file should not be modified and is a duplicate from the debugger.html project.
|
||||
* Any changes to this file should be imported from the upstream debugger.html project.
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
const React = require("devtools/client/shared/vendor/react");
|
||||
const { DOM: dom, PropTypes } = React;
|
||||
|
||||
const { div, span } = dom;
|
||||
|
||||
const Accordion = React.createClass({
|
||||
displayName: "Accordion",
|
||||
|
||||
propTypes: {
|
||||
items: PropTypes.array
|
||||
},
|
||||
|
||||
getInitialState: function () {
|
||||
return { opened: this.props.items.map(item => item.opened),
|
||||
created: [] };
|
||||
},
|
||||
|
||||
handleHeaderClick: function (i) {
|
||||
const opened = [...this.state.opened];
|
||||
const created = [...this.state.created];
|
||||
const item = this.props.items[i];
|
||||
|
||||
opened[i] = !opened[i];
|
||||
created[i] = true;
|
||||
|
||||
if (opened[i] && item.onOpened) {
|
||||
item.onOpened();
|
||||
}
|
||||
|
||||
this.setState({ opened, created });
|
||||
},
|
||||
|
||||
renderContainer: function (item, i) {
|
||||
const { opened, created } = this.state;
|
||||
const containerClassName =
|
||||
item.header.toLowerCase().replace(/\s/g, "-") + "-pane";
|
||||
let arrowClassName = "arrow theme-twisty";
|
||||
if (opened[i]) {
|
||||
arrowClassName += " open";
|
||||
}
|
||||
|
||||
return div(
|
||||
{ className: containerClassName, key: i },
|
||||
|
||||
div(
|
||||
{ className: "_header",
|
||||
onClick: () => this.handleHeaderClick(i) },
|
||||
span({ className: arrowClassName }),
|
||||
item.header
|
||||
),
|
||||
|
||||
(created[i] || opened[i]) ?
|
||||
div(
|
||||
{ className: "_content",
|
||||
style: { display: opened[i] ? "block" : "none" }
|
||||
},
|
||||
React.createElement(item.component, item.componentProps || {})
|
||||
) :
|
||||
null
|
||||
);
|
||||
},
|
||||
|
||||
render: function () {
|
||||
return div(
|
||||
{ className: "accordion" },
|
||||
this.props.items.map(this.renderContainer)
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = Accordion;
|
||||
|
|
@ -4,18 +4,29 @@
|
|||
|
||||
"use strict";
|
||||
|
||||
const { createClass, DOM: dom } = require("devtools/client/shared/vendor/react");
|
||||
const { getStr } = require("../utils/l10n");
|
||||
const { DOM: dom, createClass, createFactory } = require("devtools/client/shared/vendor/react");
|
||||
const { connect } = require("devtools/client/shared/vendor/react-redux");
|
||||
|
||||
let App = createClass({
|
||||
const Accordion = createFactory(require("./Accordion"));
|
||||
const Grid = createFactory(require("./Grid"));
|
||||
|
||||
const App = createClass({
|
||||
|
||||
displayName: "App",
|
||||
|
||||
render() {
|
||||
return dom.div(
|
||||
{
|
||||
id: "app",
|
||||
}
|
||||
id: "layoutview-container-focusable",
|
||||
},
|
||||
Accordion({
|
||||
items: [
|
||||
{ header: getStr("layout.header"),
|
||||
component: Grid,
|
||||
opened: true }
|
||||
]
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
/* 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/. */
|
||||
|
||||
"use strict";
|
||||
|
||||
const { getStr } = require("../utils/l10n");
|
||||
const { DOM: dom, createClass } = require("devtools/client/shared/vendor/react");
|
||||
|
||||
const Grid = createClass({
|
||||
|
||||
displayName: "Grid",
|
||||
|
||||
render() {
|
||||
return dom.div(
|
||||
{
|
||||
id: "layoutview-grid-container",
|
||||
},
|
||||
dom.div(
|
||||
{
|
||||
className: "layoutview-no-grids"
|
||||
},
|
||||
getStr("layout.noGrids")
|
||||
)
|
||||
);
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
module.exports = Grid;
|
||||
|
|
@ -5,5 +5,8 @@
|
|||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
DevToolsModules(
|
||||
'Accordion.css',
|
||||
'Accordion.js',
|
||||
'App.js',
|
||||
'Grid.js',
|
||||
)
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ LayoutViewTool.prototype = {
|
|||
|
||||
let store = this.store = Store();
|
||||
let provider = React.createElement(ReactRedux.Provider, { store }, App());
|
||||
ReactDOM.render(provider, this.document.querySelector("#layout-root"));
|
||||
ReactDOM.render(provider, this.document.querySelector("#layoutview-container"));
|
||||
},
|
||||
|
||||
destroy() {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ DIRS += [
|
|||
'actions',
|
||||
'components',
|
||||
'reducers',
|
||||
'utils',
|
||||
]
|
||||
|
||||
DevToolsModules(
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
/* 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/. */
|
||||
|
||||
"use strict";
|
||||
|
||||
const { LocalizationHelper } = require("devtools/shared/l10n");
|
||||
const L10N = new LocalizationHelper("devtools/locale/layout.properties");
|
||||
|
||||
module.exports = {
|
||||
getStr: (...args) => L10N.getStr(...args),
|
||||
getFormatStr: (...args) => L10N.getFormatStr(...args),
|
||||
getFormatStrWithNumbers: (...args) => L10N.getFormatStrWithNumbers(...args),
|
||||
numberWithDecimals: (...args) => L10N.numberWithDecimals(...args),
|
||||
};
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
|
||||
# vim: set filetype=python:
|
||||
# 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/.
|
||||
|
||||
DevToolsModules(
|
||||
'l10n.js',
|
||||
)
|
||||
|
|
@ -299,6 +299,7 @@ devtools.jar:
|
|||
skin/images/cubic-bezier-swatch@2x.png (themes/images/cubic-bezier-swatch@2x.png)
|
||||
skin/fonts.css (themes/fonts.css)
|
||||
skin/computed.css (themes/computed.css)
|
||||
skin/layout.css (themes/layout.css)
|
||||
skin/images/arrow-e.png (themes/images/arrow-e.png)
|
||||
skin/images/arrow-e@2x.png (themes/images/arrow-e@2x.png)
|
||||
skin/projecteditor/projecteditor.css (themes/projecteditor/projecteditor.css)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
# 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/.
|
||||
|
||||
# LOCALIZATION NOTE This file contains the Layout Inspector strings.
|
||||
# The Layout Inspector is a panel accessible in the Inspector sidebar.
|
||||
# The Layout Inspector may need to be enabled in about:config by setting
|
||||
# devtools.layoutview.enabled to true.
|
||||
|
||||
# LOCALIZATION NOTE (layout.header): The accordion header for the CSS Grid pane.
|
||||
layout.header=Grid
|
||||
|
||||
# LOCALIZATION NOTE (layout.noGrids): In the case where there are no CSS grid
|
||||
# containers to display.
|
||||
layout.noGrids=No grids
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
}
|
||||
|
||||
.tabs .tabs-navigation {
|
||||
height: 23px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.tabs .tabs-menu-item:first-child {
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
--breadcrumbs-border-color: #454d5d;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Make sure to hide scroll bars for the parent window */
|
||||
window {
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
/* 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/. */
|
||||
|
||||
#sidebar-panel-layoutview {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#layoutview-container {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#layoutview-container-focusable {
|
||||
height: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.layoutview-no-grids {
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
padding: 0.5em;
|
||||
}
|
||||
Загрузка…
Ссылка в новой задаче