Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-23 04:41:11 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1906125 - [devtools] Use default Tree stylesheets for the memory panel. r=devtools-reviewers,nchevobbe

Browse Source 
We could also drop the custom "focused" classname and instead rely on one being put by VirtualizedTree on tree-node
(like Tree is doing).

Differential Revision: https://phabricator.services.mozilla.com/D216025
This commit is contained in:
Alexandre Poirot 2024-07-10 21:25:47 +00:00
parent e0c53a42c4
commit 2f0ea37991
5 changed files with 37 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
devtools/client/memory/components/DominatorTree.js
View File

@ -40,25 +40,19 @@ class DominatorTreeSubtreeFetchingClass extends Component {
static get propTypes() {
return {
depth: PropTypes.number.isRequired,
focused: PropTypes.bool.isRequired,
};
}
shouldComponentUpdate(nextProps) {
return (
this.props.depth !== nextProps.depth ||
this.props.focused !== nextProps.focused
);
return this.props.depth !== nextProps.depth;
}
render() {
const { depth, focused } = this.props;
const { depth } = this.props;
return dom.div(
{
className: `heap-tree-item subtree-fetching ${
focused ? "focused" : ""
}`,
className: "heap-tree-item subtree-fetching",
},
dom.span({ className: "heap-tree-item-field heap-tree-item-bytes" }),
dom.span({ className: "heap-tree-item-field heap-tree-item-bytes" }),
@ -78,25 +72,21 @@ class DominatorTreeSiblingLinkClass extends Component {
static get propTypes() {
return {
depth: PropTypes.number.isRequired,
focused: PropTypes.bool.isRequired,
item: PropTypes.instanceOf(DominatorTreeLazyChildren).isRequired,
onLoadMoreSiblings: PropTypes.func.isRequired,
};
}
shouldComponentUpdate(nextProps) {
return (
this.props.depth !== nextProps.depth ||
this.props.focused !== nextProps.focused
);
return this.props.depth !== nextProps.depth;
}
render() {
const { depth, focused, item, onLoadMoreSiblings } = this.props;
const { depth, item, onLoadMoreSiblings } = this.props;
return dom.div(
{
className: `heap-tree-item more-children ${focused ? "focused" : ""}`,
className: `heap-tree-item more-children`,
},
dom.span({ className: "heap-tree-item-field heap-tree-item-bytes" }),
dom.span({ className: "heap-tree-item-field heap-tree-item-bytes" }),
@ -218,7 +208,6 @@ class DominatorTree extends Component {
key: item.key(),
item,
depth,
focused,
onLoadMoreSiblings,
});
}
@ -226,7 +215,6 @@ class DominatorTree extends Component {
return DominatorTreeItem({
item,
depth,
focused,
arrow,
expanded,
getPercentSize: size =>

5
devtools/client/memory/index.xhtml
View File

@ -12,6 +12,11 @@
href="chrome://devtools/skin/widgets.css"
type="text/css"
/>
<link
rel="stylesheet"
type="text/css"
href="chrome://devtools/content/shared/components/Tree.css"
/>
<link
rel="stylesheet"
href="chrome://devtools/skin/memory.css"

14
devtools/client/memory/test/browser/browser_memory_dominator_trees_01.js
View File

@ -95,7 +95,9 @@ this.test = makeMemoryTest(TEST_URL, async function ({ panel }) {
state => state.snapshots[0].dominatorTree.focused.nodeId === deepest.nodeId
);
ok(
doc.querySelector(`.node-${deepest.nodeId}`).classList.contains("focused"),
doc
.querySelector(`.node-${deepest.nodeId}`)
.parentElement.classList.contains("focused"),
"The deepest node should be focused now"
);
@ -112,7 +114,9 @@ this.test = makeMemoryTest(TEST_URL, async function ({ panel }) {
"Expanding the deepest node should start an incremental fetch of its subtree"
);
ok(
doc.querySelector(`.node-${deepest.nodeId}`).classList.contains("focused"),
doc
.querySelector(`.node-${deepest.nodeId}`)
.parentElement.classList.contains("focused"),
"The deepest node should still be focused after expansion"
);
@ -125,7 +129,9 @@ this.test = makeMemoryTest(TEST_URL, async function ({ panel }) {
);
ok(true, "And the incremental fetch completes.");
ok(
doc.querySelector(`.node-${deepest.nodeId}`).classList.contains("focused"),
doc
.querySelector(`.node-${deepest.nodeId}`)
.parentElement.classList.contains("focused"),
"The deepest node should still be focused after we have loaded its children"
);
@ -172,7 +178,7 @@ this.test = makeMemoryTest(TEST_URL, async function ({ panel }) {
ok(
doc
.querySelector(`.node-${firstChild.nodeId}`)
.classList.contains("focused"),
.parentElement.classList.contains("focused"),
"The first child should now be focused"
);
});

3
devtools/client/shared/components/VirtualizedTree.js
View File

@ -1001,6 +1001,9 @@ class TreeNodeClass extends Component {
if (this.props.active) {
classList.push("tree-node-active");
}
if (this.props.focused) {
classList.push("focused");
}
let ariaExpanded;
if (this.props.hasChildren) {

33
devtools/client/themes/memory.css
View File

@ -393,6 +393,18 @@ html, body, #app, #memory-tool {
cursor: default;
}
.tree-node-odd {
background-color: var(--row-alt-background-color);
}
/**
* Override Tree.css rule as the .tree-node-odd background are of the same color
* as the default hovered background.
*/
.tree .tree-node:not(.focused):hover {
background-color: var(--row-hover-background-color);
}
.children-pointer {
display: inline-block;
/* We use transform to reverse the icon in RTL,
@ -417,24 +429,6 @@ html, body, #app, #memory-tool {
display: flex;
}
.tree-node-odd {
background-color: var(--row-alt-background-color);
}
.tree-node:hover {
background-color: var(--row-hover-background-color);
}
.heap-tree-item.focused {
background-color: var(--theme-selection-background);
color: var(--theme-selection-color);
}
.heap-tree-item.focused ::-moz-selection {
background-color: var(--theme-selection-color);
color: var(--theme-selection-background);
}
.heap-tree-item-individuals,
.heap-tree-item-bytes,
.heap-tree-item-count,
@ -518,8 +512,7 @@ html, body, #app, #memory-tool {
width: 4ch;
}
.heap-tree-item.focused .heap-tree-number,
.heap-tree-item.focused .heap-tree-percent {
.tree-node.focused :is(.heap-tree-number, .heap-tree-percent) {
color: inherit;
}