zzos/react-native-devtools-frontend
1
0
Fork 0
mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-10-07 04:26:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix naming of anonymous layers in layers widget

Browse Source 
Bug: 1240596
Change-Id: I9bcf3d4cb84157208d1deb08221bf4b0598dc74c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3492520
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Commit-Queue: Johan Bay <jobay@chromium.org>
This commit is contained in:
Johan Bay
2022-03-01 11:42:28 +00:00
committed by Devtools-frontend LUCI CQ
parent 74705f0911
commit e573a564ca
5 changed files with 43 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front_end/core/sdk/CSSModel.ts
+4
View File
@@ -150,6 +150,10 @@ export class CSSModel extends SDKModel<EventTypes> {
return this.#sourceMapManager;
}
static readableLayerName(text: string): string {
return text || '<anonymous>';
}
static trimSourceURL(text: string): string {
let sourceURLIndex = text.lastIndexOf('/*# sourceURL=');
if (sourceURLIndex === -1) {
front_end/panels/elements/LayersWidget.ts
+3 -2
View File
@@ -84,8 +84,9 @@ export class LayersWidget extends UI.Widget.Widget {
const makeTreeNode = (parentId: string) =>
(layer: Protocol.CSS.CSSLayerData): TreeOutline.TreeOutlineUtils.TreeNode<string> => {
const subLayers = layer.subLayers;
const treeNodeData = layer.order + ': ' + layer.name;
const id = parentId ? parentId + '.' + layer.name : layer.name;
const name = SDK.CSSModel.CSSModel.readableLayerName(layer.name);
const treeNodeData = layer.order + ': ' + name;
const id = parentId ? parentId + '.' + name : name;
if (!subLayers) {
return {treeNodeData, id};
}
front_end/panels/elements/StylesSidebarPane.ts
+8 -5
View File
@@ -875,7 +875,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
if (parentRule instanceof SDK.CSSRule.CSSStyleRule) {
const layers = parentRule.layers;
if ((layers.length || lastLayers) && lastLayers !== layers) {
const block = SectionBlock.createLayerBlock(layers);
const block = SectionBlock.createLayerBlock(parentRule);
blocks.push(block);
sawLayers = true;
lastLayers = layers;
@@ -1430,18 +1430,21 @@ export class SectionBlock {
return new SectionBlock(separatorElement);
}
static createLayerBlock(layers: SDK.CSSLayer.CSSLayer[]): SectionBlock {
static createLayerBlock(rule: SDK.CSSRule.CSSStyleRule): SectionBlock {
const separatorElement = document.createElement('div');
separatorElement.className = 'sidebar-separator layer-separator';
UI.UIUtils.createTextChild(separatorElement.createChild('div'), i18nString(UIStrings.layer));
if (!layers.length) {
UI.UIUtils.createTextChild(separatorElement.createChild('div'), '\xa0user\xa0agent\xa0stylesheet');
const layers = rule.layers;
if (!layers.length && rule.origin === Protocol.CSS.StyleSheetOrigin.UserAgent) {
const name = rule.origin === Protocol.CSS.StyleSheetOrigin.UserAgent ? '\xa0user\xa0agent\xa0stylesheet' :
'\xa0implicit\xa0outer\xa0layer';
UI.UIUtils.createTextChild(separatorElement.createChild('div'), name);
return new SectionBlock(separatorElement);
}
const layerLink = separatorElement.createChild('button') as HTMLButtonElement;
layerLink.className = 'link';
layerLink.title = i18nString(UIStrings.clickToRevealLayer);
const name = layers.map(layer => layer.text || '<anonymous>').join('.');
const name = layers.map(layer => SDK.CSSModel.CSSModel.readableLayerName(layer.text)).join('.');
layerLink.textContent = name;
layerLink.onclick = (): Promise<void> => LayersWidget.LayersWidget.instance().revealLayer(name);
return new SectionBlock(separatorElement);
test/e2e/elements/style-pane-properties_test.ts
+11 -10
View File
@@ -374,12 +374,19 @@ describe('The Styles pane', async () => {
const layerSeparators = await waitForFunction(async () => {
const layers = await $$(LAYER_SEPARATOR_SELECTOR);
return layers.length === 3 ? layers : null;
return layers.length === 6 ? layers : null;
});
assertNotNullOrUndefined(layerSeparators);
const layerText = await Promise.all(layerSeparators.map(element => element.evaluate(node => node.textContent)));
assert.deepEqual(layerText.slice(0, -1), ['Layeroverrule', 'Layerbase']);
assert.deepEqual(layerText, [
'Layer<anonymous>',
'Layerimportant',
'Layeroverrule',
'Layeroverrule.<anonymous>',
'Layerbase',
'Layer\xa0user\xa0agent\xa0stylesheet',
]);
});
it('can click @layer separators to open layer tree', async () => {
@@ -390,16 +397,10 @@ describe('The Styles pane', async () => {
await frontend.keyboard.press('ArrowDown');
await waitForContentOfSelectedElementsNode('<div class=\u200B"rule1">\u200B</div>\u200B');
const layerSeparators = await waitForFunction(async () => {
const layers = await $$(LAYER_SEPARATOR_SELECTOR);
return layers.length === 3 ? layers : null;
});
assertNotNullOrUndefined(layerSeparators);
const overruleButton = await frontend.$('aria/overrule');
assertNotNullOrUndefined(overruleButton);
const overruleButton = await waitFor('overrule[role="button"]', undefined, undefined, 'aria');
await click(overruleButton);
const treeElement = await waitFor('[data-node-key="1: overrule"]');
const treeElement = await waitFor('[data-node-key="2: overrule"]');
assertNotNullOrUndefined(treeElement);
});
});
test/e2e/resources/elements/css-layers.html
+17
View File
@@ -15,6 +15,23 @@
.rule1 {
width: 15px;
}
@layer {
.rule1 {
width: 16px;
}
}
}
@layer important {
.rule1 {
width: 20px !important;
}
}
@layer {
.rule1 {
width: 25px !important;
}
}
</style>
<div class="rule1"></div>