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

Bug 1308227 - Add a CSS Grid accordion container to the layout panel r=jdescottes

This commit is contained in:
Gabriel Luong 2016-10-14 20:31:04 -04:00
Родитель 20e2de11f0
Коммит 6f26c12a04
15 изменённых файлов: 251 добавлений и 9 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

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

@ -10,13 +10,15 @@
<?xml-stylesheet href="chrome://devtools/skin/computed.css" type="text/css"?> <?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/fonts.css" type="text/css"?>
<?xml-stylesheet href="chrome://devtools/skin/boxmodel.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="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/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/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/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/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> <!DOCTYPE html>
@ -186,7 +188,7 @@
<div id="sidebar-panel-layoutview" class="devtools-monospace theme-sidebar inspector-tabpanel" <div id="sidebar-panel-layoutview" class="devtools-monospace theme-sidebar inspector-tabpanel"
data-localization-bundle="devtools/locale/inspector.properties"> data-localization-bundle="devtools/locale/inspector.properties">
<div id="layout-root"></div> <div id="layoutview-container"></div>
</div> </div>
<div id="sidebar-panel-fontinspector" class="devtools-monospace theme-sidebar inspector-tabpanel" <div id="sidebar-panel-fontinspector" class="devtools-monospace theme-sidebar inspector-tabpanel"

42
devtools/client/inspector/layout/components/Accordion.css Normal file
Просмотреть файл

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

82
devtools/client/inspector/layout/components/Accordion.js Normal file
Просмотреть файл

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

19
devtools/client/inspector/layout/components/App.js
Просмотреть файл

@ -4,18 +4,29 @@
"use strict"; "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"); 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", displayName: "App",
render() { render() {
return dom.div( return dom.div(
{ {
id: "app", id: "layoutview-container-focusable",
} },
Accordion({
items: [
{ header: getStr("layout.header"),
component: Grid,
opened: true }
]
})
); );
}, },

30
devtools/client/inspector/layout/components/Grid.js Normal file
Просмотреть файл

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

3
devtools/client/inspector/layout/components/moz.build
Просмотреть файл

@ -5,5 +5,8 @@
# file, You can obtain one at http://mozilla.org/MPL/2.0/. # file, You can obtain one at http://mozilla.org/MPL/2.0/.
DevToolsModules( DevToolsModules(
'Accordion.css',
'Accordion.js',
'App.js', 'App.js',
'Grid.js',
) )

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

@ -23,7 +23,7 @@ LayoutViewTool.prototype = {
let store = this.store = Store(); let store = this.store = Store();
let provider = React.createElement(ReactRedux.Provider, { store }, App()); 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() { destroy() {

1
devtools/client/inspector/layout/moz.build
Просмотреть файл

@ -8,6 +8,7 @@ DIRS += [
'actions', 'actions',
'components', 'components',
'reducers', 'reducers',
'utils',
] ]
DevToolsModules( DevToolsModules(

15
devtools/client/inspector/layout/utils/l10n.js Normal file
Просмотреть файл

@ -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),
};

9
devtools/client/inspector/layout/utils/moz.build Normal file
Просмотреть файл

@ -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',
)

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

@ -299,6 +299,7 @@ devtools.jar:
skin/images/cubic-bezier-swatch@2x.png (themes/images/cubic-bezier-swatch@2x.png) skin/images/cubic-bezier-swatch@2x.png (themes/images/cubic-bezier-swatch@2x.png)
skin/fonts.css (themes/fonts.css) skin/fonts.css (themes/fonts.css)
skin/computed.css (themes/computed.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.png (themes/images/arrow-e.png)
skin/images/arrow-e@2x.png (themes/images/arrow-e@2x.png) skin/images/arrow-e@2x.png (themes/images/arrow-e@2x.png)
skin/projecteditor/projecteditor.css (themes/projecteditor/projecteditor.css) skin/projecteditor/projecteditor.css (themes/projecteditor/projecteditor.css)

15
devtools/client/locales/en-US/layout.properties Normal file
Просмотреть файл

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

2
devtools/client/shared/components/tabs/tabbar.css
Просмотреть файл

@ -8,7 +8,7 @@
} }
.tabs .tabs-navigation { .tabs .tabs-navigation {
height: 23px; height: 24px;
} }
.tabs .tabs-menu-item:first-child { .tabs .tabs-menu-item:first-child {

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

@ -19,6 +19,10 @@
--breadcrumbs-border-color: #454d5d; --breadcrumbs-border-color: #454d5d;
} }
* {
box-sizing: border-box;
}
/* Make sure to hide scroll bars for the parent window */ /* Make sure to hide scroll bars for the parent window */
window { window {
overflow: hidden; overflow: hidden;

27
devtools/client/themes/layout.css Normal file
Просмотреть файл

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