Skip to content

Instantly share code, notes, and snippets.

@janodvarko
Created July 19, 2019 11:52
Show Gist options
  • Save janodvarko/8e66da2cdefdac680a9b2a4af2c7fafa to your computer and use it in GitHub Desktop.
Save janodvarko/8e66da2cdefdac680a9b2a4af2c7fafa to your computer and use it in GitHub Desktop.
diff --git a/devtools/client/netmonitor/src/assets/styles/search.css b/devtools/client/netmonitor/src/assets/styles/search.css
--- a/devtools/client/netmonitor/src/assets/styles/search.css
+++ b/devtools/client/netmonitor/src/assets/styles/search.css
@@ -1,29 +1,36 @@
/* 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/. */
+.search-panel .treeTable {
+ width: 100%;
+}
+
/* Custom tree styles for the Search results panel*/
.search-panel .treeTable .treeLabelCell::after {
content: "";
}
/* Color for resource label */
-.search-panel .treeValueCell.resourceCell {
+.search-panel .resourceCell {
color: var(--theme-text-color-inactive);
}
/* Color for search result label */
-.search-panel .treeValueCell.resultCell {
+.search-panel .resultCell {
color: var(--table-text-color);
}
/* Color for search result label */
.search-panel .treeLabel.resultLabel {
color: var(--theme-text-color-inactive);
}
-/* Break the column layout and make the search result output more compact */
-.search-panel .treeTable tr {
- display: block;
+.search-panel .treeTable .treeLabelCell {
+ text-overflow: ellipsis;
+ max-width: 0;
+ overflow: hidden;
+ white-space: nowrap;
}
+
diff --git a/devtools/client/netmonitor/src/components/MonitorPanel.js b/devtools/client/netmonitor/src/components/MonitorPanel.js
--- a/devtools/client/netmonitor/src/components/MonitorPanel.js
+++ b/devtools/client/netmonitor/src/components/MonitorPanel.js
@@ -175,17 +175,17 @@ class MonitorPanel extends Component {
maxSize: "80%",
splitterSize: 1,
startPanel: SearchPanel({
ref: "searchPanel",
}),
endPanel: RequestList({ isEmpty, connector }),
endPanelControl: false,
vert: true,
- onControlledPanelResized: () => {},
+ onControlledPanelResized: this.onNetworkDetailsResized,
});
}
render() {
const {
actions,
connector,
isEmpty,
diff --git a/devtools/client/netmonitor/src/components/search/SearchPanel.js b/devtools/client/netmonitor/src/components/search/SearchPanel.js
--- a/devtools/client/netmonitor/src/components/search/SearchPanel.js
+++ b/devtools/client/netmonitor/src/components/search/SearchPanel.js
@@ -27,55 +27,85 @@ class SearchPanel extends Component {
return {
// TODO: validate all props
};
}
constructor(props) {
super(props);
- this.renderValue = this.renderValue.bind(this);
+ this.renderLabel = this.renderLabel.bind(this);
+ this.provider = SearchProvider;
+ }
+
+ renderLabel(props) {
+ const id = props.id;
+ const member = props.member;
+ const level = member.level || 0;
+
+ const iconClassList = ["treeIcon"];
+ if (member.hasChildren && member.loading) {
+ iconClassList.push("devtools-throbber");
+ } else if (member.hasChildren) {
+ iconClassList.push("theme-twisty");
+ }
+ if (member.open) {
+ iconClassList.push("open");
+ }
+
+ const labelClassList = [];
+ if (level == 0) {
+ labelClassList.push("resourceCell");
+ } else if (level == 1) {
+ labelClassList.push("resultCell");
+ }
+
+ return dom.td(
+ {
+ className: "treeLabelCell",
+ style: {
+ // Compute indentation dynamically. The deeper the item is
+ // inside the hierarchy, the bigger is the left padding.
+ "--tree-label-cell-indent": `${level * 16}px`,
+ },
+ key: "default",
+ role: "presentation",
+ },
+ dom.span({
+ className: iconClassList.join(" "),
+ role: "presentation",
+ }),
+ dom.span(
+ {
+ className: "treeLabel " + member.type + "Label",
+ "aria-labelledby": id,
+ "data-level": level,
+ },
+ member.name
+ ),
+ " ",
+ dom.span(
+ {
+ className: labelClassList.join(" "),
+ },
+ this.provider.getValue(member.object)
+ )
+ );
}
renderTree() {
const { results } = this.props;
return TreeView({
object: results,
- provider: SearchProvider,
- renderValue: this.renderValue,
- columns: [
- {
- id: "value",
- width: "100%",
- },
- ],
+ provider: this.provider,
+ renderLabelCell: this.renderLabel,
+ columns: [],
});
}
- /**
- * Custom tree value rendering. This method is responsible for
- * rendering highlighted query string within the search result.
- */
- renderValue(props) {
- const member = props.member;
- const value = props.value;
- const path = member.path;
-
- // Handle only second level (zero based) that displays
- // the search result. Find the query string inside the
- // search result value (`props.object`) and render it
- // within a span element with proper class name.
- // TODO: finish this
- if (member.level === 1) {
- return span({}, props.object);
- }
-
- return props.object + "";
- }
-
render() {
const {} = this.props;
// TODO: render toolbar (actions: clear, query input box,
// refresh button, cancel button)
return div(
{ className: "search-panel", style: { width: "100%" } },
diff --git a/devtools/client/shared/components/tree/TreeRow.js b/devtools/client/shared/components/tree/TreeRow.js
--- a/devtools/client/shared/components/tree/TreeRow.js
+++ b/devtools/client/shared/components/tree/TreeRow.js
@@ -57,18 +57,18 @@ define(function(require, exports, module
open: PropTypes.bool.isRequired,
path: PropTypes.string.isRequired,
hidden: PropTypes.bool,
selected: PropTypes.bool,
active: PropTypes.bool,
loading: PropTypes.bool,
}),
decorator: PropTypes.object,
- renderCell: PropTypes.object,
- renderLabelCell: PropTypes.object,
+ renderCell: PropTypes.func,
+ renderLabelCell: PropTypes.func,
columns: PropTypes.array.isRequired,
id: PropTypes.string.isRequired,
provider: PropTypes.object.isRequired,
onClick: PropTypes.func.isRequired,
onContextMenu: PropTypes.func,
onMouseOver: PropTypes.func,
onMouseOut: PropTypes.func,
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment