1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
/* 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 {
Component,
createFactory,
} = require("resource://devtools/client/shared/vendor/react.js");
const {
connect,
} = require("resource://devtools/client/shared/vendor/react-redux.js");
const GridElementWidthResizer = createFactory(
require("resource://devtools/client/shared/components/splitter/GridElementWidthResizer.js")
);
loader.lazyRequireGetter(
this,
"dom",
"resource://devtools/client/shared/vendor/react-dom-factories.js"
);
loader.lazyRequireGetter(
this,
"getObjectInspector",
"resource://devtools/client/webconsole/utils/object-inspector.js",
true
);
loader.lazyRequireGetter(
this,
"actions",
"resource://devtools/client/webconsole/actions/index.js"
);
loader.lazyRequireGetter(
this,
"PropTypes",
"resource://devtools/client/shared/vendor/react-prop-types.js"
);
loader.lazyRequireGetter(
this,
"reps",
"resource://devtools/client/shared/components/reps/index.js"
);
loader.lazyRequireGetter(
this,
"l10n",
"resource://devtools/client/webconsole/utils/messages.js",
true
);
class SideBar extends Component {
static get propTypes() {
return {
serviceContainer: PropTypes.object,
dispatch: PropTypes.func.isRequired,
front: PropTypes.object,
onResized: PropTypes.func,
};
}
constructor(props) {
super(props);
this.onClickSidebarClose = this.onClickSidebarClose.bind(this);
}
shouldComponentUpdate(nextProps) {
const { front } = nextProps;
return front !== this.props.front;
}
onClickSidebarClose() {
this.props.dispatch(actions.sidebarClose());
}
render() {
const { front, serviceContainer } = this.props;
const objectInspector = getObjectInspector(front, serviceContainer, {
autoExpandDepth: 1,
mode: reps.MODE.SHORT,
autoFocusRoot: true,
pathPrefix: "WebConsoleSidebar",
customFormat: false,
});
return [
dom.aside(
{
className: "sidebar",
key: "sidebar",
ref: node => {
this.node = node;
},
},
dom.header(
{
className: "devtools-toolbar webconsole-sidebar-toolbar",
},
dom.button({
className: "devtools-button sidebar-close-button",
title: l10n.getStr("webconsole.closeSidebarButton.tooltip"),
onClick: this.onClickSidebarClose,
})
),
dom.aside(
{
className: "sidebar-contents",
},
objectInspector
)
),
GridElementWidthResizer({
key: "resizer",
enabled: true,
position: "start",
className: "sidebar-resizer",
getControlledElementNode: () => this.node,
}),
];
}
}
function mapStateToProps(state) {
return {
front: state.ui.frontInSidebar,
};
}
module.exports = connect(mapStateToProps)(SideBar);
|
