Skip to content

Commit d48ac67

Browse files
OrKoNdevtools-frontend-scoped@luci-project-accounts.iam.gserviceaccount.com
OrKoN
authored and
devtools-frontend-scoped@luci-project-accounts.iam.gserviceaccount.com
committed
[M149] Migrate CSS hints to lit
Original change's description: > Migrate CSS hints to lit > > Fixed: 513741492 > Change-Id: Ib33754d6c64d962f89bd50c41017d932834b8002 > Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7859679 > Reviewed-by: Simon Zünd <szuend@chromium.org> > Commit-Queue: Alex Rudenko <alexrudenko@chromium.org> (cherry picked from commit 4d18469) Bug: 515276175,513741492 Change-Id: Ib33754d6c64d962f89bd50c41017d932834b8002 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7867890 Auto-Submit: chrome-cherry-picker@chops-service-accounts.iam.gserviceaccount.com <chrome-cherry-picker@chops-service-accounts.iam.gserviceaccount.com> Commit-Queue: rubber-stamper@appspot.gserviceaccount.com <rubber-stamper@appspot.gserviceaccount.com> Bot-Commit: rubber-stamper@appspot.gserviceaccount.com <rubber-stamper@appspot.gserviceaccount.com>
1 parent 3d9f0a7 commit d48ac67

5 files changed

Lines changed: 55 additions & 49 deletions

File tree

‎front_end/panels/elements/BUILD.gn‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@ devtools_ui_module("elements") {
111111
"../../ui/components/tooltips:bundle",
112112
"../../ui/components/tree_outline:bundle",
113113
"../../ui/helpers:bundle",
114+
"../../ui/i18n:bundle",
114115
"../../ui/kit:bundle",
115116
"../../ui/legacy:bundle",
116117
"../../ui/legacy/components/color_picker:bundle",

‎front_end/panels/elements/CSSRuleValidator.ts‎

Lines changed: 37 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44

55
import * as i18n from '../../core/i18n/i18n.js';
66
import * as SDK from '../../core/sdk/sdk.js';
7+
import * as uiI18n from '../../ui/i18n/i18n.js';
8+
import {html, type LitTemplate} from '../../ui/lit/lit.js';
79

810
import {
911
buildPropertyDefinitionText,
@@ -102,28 +104,29 @@ const UIStrings = {
102104
} as const;
103105
const str_ = i18n.i18n.registerUIStrings('panels/elements/CSSRuleValidator.ts', UIStrings);
104106
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
107+
const i18nLazyStringTemplate = uiI18n.getFormatLocalizedStringTemplate.bind(undefined, str_);
105108

106109
export const enum HintType {
107110
INACTIVE_PROPERTY = 'ruleValidation',
108111
DEPRECATED_PROPERTY = 'deprecatedProperty',
109112
}
110113

111114
export class Hint {
112-
readonly #hintMessage: string;
113-
readonly #possibleFixMessage: string|null;
115+
readonly #hintMessage: LitTemplate|string;
116+
readonly #possibleFixMessage: LitTemplate|string|null;
114117
readonly #learnMoreLink: string|undefined;
115118

116-
constructor(hintMessage: string, possibleFixMessage: string|null, learnMoreLink?: string) {
119+
constructor(hintMessage: LitTemplate|string, possibleFixMessage: LitTemplate|string|null, learnMoreLink?: string) {
117120
this.#hintMessage = hintMessage;
118121
this.#possibleFixMessage = possibleFixMessage;
119122
this.#learnMoreLink = learnMoreLink;
120123
}
121124

122-
getMessage(): string {
125+
getMessage(): LitTemplate|string {
123126
return this.#hintMessage;
124127
}
125128

126-
getPossibleFixMessage(): string|null {
129+
getPossibleFixMessage(): LitTemplate|string|null {
127130
return this.#possibleFixMessage;
128131
}
129132

@@ -164,11 +167,11 @@ export class AlignContentValidator extends CSSRuleValidator {
164167
const affectedPropertyDeclarationCode = buildPropertyName('align-content');
165168

166169
return new Hint(
167-
i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
170+
i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleReason, {
168171
REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
169172
AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
170173
}),
171-
i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
174+
i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleFix, {
172175
PROPERTY_NAME: buildPropertyName('display'),
173176
PROPERTY_VALUE: buildPropertyValue(computedStyles?.get('display') as string),
174177
}),
@@ -186,11 +189,11 @@ export class AlignContentValidator extends CSSRuleValidator {
186189
const affectedPropertyDeclarationCode = buildPropertyName('align-content');
187190

188191
return new Hint(
189-
i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
192+
i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleReason, {
190193
REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
191194
AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
192195
}),
193-
i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
196+
i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleFix, {
194197
PROPERTY_NAME: buildPropertyName('flex-wrap'),
195198
PROPERTY_VALUE: buildPropertyValue('nowrap'),
196199
}),
@@ -215,11 +218,11 @@ export class FlexItemValidator extends CSSRuleValidator {
215218
const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
216219
const targetParentPropertyDeclaration = buildPropertyDefinitionText('display', 'flex');
217220
return new Hint(
218-
i18nString(UIStrings.ruleViolatedByParentElementRuleReason, {
221+
i18nLazyStringTemplate(UIStrings.ruleViolatedByParentElementRuleReason, {
219222
REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
220223
AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
221224
}),
222-
i18nString(UIStrings.ruleViolatedByParentElementRuleFix, {
225+
i18nLazyStringTemplate(UIStrings.ruleViolatedByParentElementRuleFix, {
223226
EXISTING_PARENT_ELEMENT_RULE: reasonPropertyDeclaration,
224227
TARGET_PARENT_ELEMENT_RULE: targetParentPropertyDeclaration,
225228
}),
@@ -244,11 +247,11 @@ export class FlexContainerValidator extends CSSRuleValidator {
244247
const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
245248

246249
return new Hint(
247-
i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
250+
i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleReason, {
248251
REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
249252
AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
250253
}),
251-
i18nString(UIStrings.ruleViolatedBySameElementRuleChangeSuggestion, {
254+
i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleChangeSuggestion, {
252255
EXISTING_PROPERTY_DECLARATION: reasonPropertyDeclaration,
253256
TARGET_PROPERTY_DECLARATION: targetRuleCode,
254257
}),
@@ -279,11 +282,11 @@ export class GridContainerValidator extends CSSRuleValidator {
279282
const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
280283

281284
return new Hint(
282-
i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
285+
i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleReason, {
283286
REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
284287
AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
285288
}),
286-
i18nString(UIStrings.ruleViolatedBySameElementRuleChangeSuggestion, {
289+
i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleChangeSuggestion, {
287290
EXISTING_PROPERTY_DECLARATION: reasonPropertyDeclaration,
288291
TARGET_PROPERTY_DECLARATION: targetRuleCode,
289292
}),
@@ -315,11 +318,11 @@ export class GridItemValidator extends CSSRuleValidator {
315318
const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
316319

317320
return new Hint(
318-
i18nString(UIStrings.ruleViolatedByParentElementRuleReason, {
321+
i18nLazyStringTemplate(UIStrings.ruleViolatedByParentElementRuleReason, {
319322
REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
320323
AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
321324
}),
322-
i18nString(UIStrings.ruleViolatedByParentElementRuleFix, {
325+
i18nLazyStringTemplate(UIStrings.ruleViolatedByParentElementRuleFix, {
323326
EXISTING_PARENT_ELEMENT_RULE: reasonPropertyDeclaration,
324327
TARGET_PARENT_ELEMENT_RULE: targetParentPropertyDeclaration,
325328
}),
@@ -344,15 +347,15 @@ export class FlexOrGridItemValidator extends CSSRuleValidator {
344347
}
345348
const reasonPropertyDeclaration = buildPropertyDefinitionText('display', parentComputedStyles?.get('display'));
346349
const targetParentPropertyDeclaration =
347-
`${buildPropertyDefinitionText('display', 'flex')} or ${buildPropertyDefinitionText('display', 'grid')}`;
350+
html`${buildPropertyDefinitionText('display', 'flex')} or ${buildPropertyDefinitionText('display', 'grid')}`;
348351
const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
349352

350353
return new Hint(
351-
i18nString(UIStrings.ruleViolatedByParentElementRuleReason, {
354+
i18nLazyStringTemplate(UIStrings.ruleViolatedByParentElementRuleReason, {
352355
REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
353356
AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
354357
}),
355-
i18nString(UIStrings.ruleViolatedByParentElementRuleFix, {
358+
i18nLazyStringTemplate(UIStrings.ruleViolatedByParentElementRuleFix, {
356359
EXISTING_PARENT_ELEMENT_RULE: reasonPropertyDeclaration,
357360
TARGET_PARENT_ELEMENT_RULE: targetParentPropertyDeclaration,
358361
}),
@@ -383,11 +386,11 @@ export class FlexGridValidator extends CSSRuleValidator {
383386
const reasonPropertyName = buildPropertyName(propertyName);
384387
const reasonAlternativePropertyName = buildPropertyName('justify-self');
385388
return new Hint(
386-
i18nString(UIStrings.flexGridContainerPropertyRuleReason, {
389+
i18nLazyStringTemplate(UIStrings.flexGridContainerPropertyRuleReason, {
387390
CONTAINER_DISPLAY_NAME: reasonContainerDisplayName,
388391
PROPERTY_NAME: reasonPropertyName,
389392
}),
390-
i18nString(UIStrings.flexGridContainerPropertyRuleFix, {
393+
i18nLazyStringTemplate(UIStrings.flexGridContainerPropertyRuleFix, {
391394
PROPERTY_NAME: reasonPropertyName,
392395
ALTERNATIVE_PROPERTY_NAME: reasonAlternativePropertyName,
393396
}),
@@ -398,11 +401,11 @@ export class FlexGridValidator extends CSSRuleValidator {
398401
const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
399402

400403
return new Hint(
401-
i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
404+
i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleReason, {
402405
REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
403406
AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
404407
}),
405-
i18nString(UIStrings.ruleViolatedBySameElementRuleChangeFlexOrGrid, {
408+
i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleChangeFlexOrGrid, {
406409
DISPLAY_GRID_RULE: buildPropertyDefinitionText('display', 'grid'),
407410
DISPLAY_FLEX_RULE: buildPropertyDefinitionText('display', 'flex'),
408411
}),
@@ -436,11 +439,11 @@ export class MulticolFlexGridValidator extends CSSRuleValidator {
436439
const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
437440

438441
return new Hint(
439-
i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
442+
i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleReason, {
440443
REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
441444
AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
442445
}),
443-
i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
446+
i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleFix, {
444447
PROPERTY_NAME: buildPropertyName('display'),
445448
PROPERTY_VALUE: buildPropertyValue(computedStyles?.get('display') as string),
446449
}),
@@ -480,11 +483,11 @@ export class PaddingValidator extends CSSRuleValidator {
480483
const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
481484

482485
return new Hint(
483-
i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
486+
i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleReason, {
484487
REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
485488
AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
486489
}),
487-
i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
490+
i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleFix, {
488491
PROPERTY_NAME: buildPropertyName('display'),
489492
PROPERTY_VALUE: buildPropertyValue(computedStyles?.get('display') as string),
490493
}),
@@ -515,11 +518,11 @@ export class PositionValidator extends CSSRuleValidator {
515518
const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
516519

517520
return new Hint(
518-
i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
521+
i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleReason, {
519522
REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
520523
AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
521524
}),
522-
i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
525+
i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleFix, {
523526
PROPERTY_NAME: buildPropertyName('position'),
524527
PROPERTY_VALUE: buildPropertyValue(computedStyles?.get('position') as string),
525528
}),
@@ -549,11 +552,11 @@ export class ZIndexValidator extends CSSRuleValidator {
549552
const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
550553

551554
return new Hint(
552-
i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
555+
i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleReason, {
553556
REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
554557
AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
555558
}),
556-
i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
559+
i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleFix, {
557560
PROPERTY_NAME: buildPropertyName('position'),
558561
PROPERTY_VALUE: buildPropertyValue(computedStyles?.get('position') as string),
559562
}),
@@ -615,11 +618,11 @@ export class SizingValidator extends CSSRuleValidator {
615618
const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
616619

617620
return new Hint(
618-
i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
621+
i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleReason, {
619622
REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
620623
AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
621624
}),
622-
i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
625+
i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleFix, {
623626
PROPERTY_NAME: buildPropertyName('display'),
624627
PROPERTY_VALUE: buildPropertyValue(computedStyles?.get('display') as string),
625628
}),

‎front_end/panels/elements/CSSRuleValidatorHelper.ts‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,21 @@
22
// Use of this source code is governed by a BSD-style license that can be
33
// found in the LICENSE file.
44

5-
export const buildPropertyDefinitionText = (property: string, value?: string): string => {
5+
import {html, type LitTemplate} from '../../ui/lit/lit.js';
6+
7+
export const buildPropertyDefinitionText = (property: string, value?: string): LitTemplate => {
68
if (value === undefined) {
79
return buildPropertyName(property);
810
}
9-
return '<code class="unbreakable-text"><span class="property">' + property + '</span>: ' + value + '</code>';
11+
return html`<code class="unbreakable-text"><span class="property">${property}</span>: ${value}</code>`;
1012
};
1113

12-
export const buildPropertyName = (property: string): string => {
13-
return '<code class="unbreakable-text"><span class="property">' + property + '</span></code>';
14+
export const buildPropertyName = (property: string): LitTemplate => {
15+
return html`<code class="unbreakable-text"><span class="property">${property}</span></code>`;
1416
};
1517

16-
export const buildPropertyValue = (property: string): string => {
17-
return '<code class="unbreakable-text">' + property + '</code>';
18+
export const buildPropertyValue = (property: string): LitTemplate => {
19+
return html`<code class="unbreakable-text">${property}</code>`;
1820
};
1921

2022
export const isFlexContainer = (computedStyles?: Map<string, string>): boolean => {

‎front_end/panels/elements/components/CSSHintDetailsView.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import '../../../ui/kit/kit.js';
77
import '../../../ui/legacy/legacy.js';
88

99
import * as i18n from '../../../core/i18n/i18n.js';
10-
import {Directives, html, render} from '../../../ui/lit/lit.js';
10+
import {html, type LitTemplate, render} from '../../../ui/lit/lit.js';
1111

1212
import cssHintDetailsViewStyles from './cssHintDetailsView.css.js';
1313

@@ -21,8 +21,8 @@ const str_ = i18n.i18n.registerUIStrings('panels/elements/components/CSSHintDeta
2121
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
2222

2323
interface Hint {
24-
getMessage(): string;
25-
getPossibleFixMessage(): string|null;
24+
getMessage(): LitTemplate|string;
25+
getPossibleFixMessage(): LitTemplate|string|null;
2626
getLearnMoreLink(): string|undefined;
2727
}
2828

@@ -43,11 +43,11 @@ export class CSSHintDetailsView extends HTMLElement {
4343
<style>${cssHintDetailsViewStyles}</style>
4444
<div class="hint-popup-wrapper">
4545
<div class="hint-popup-reason">
46-
${Directives.unsafeHTML(this.#authoringHint.getMessage())}
46+
${this.#authoringHint.getMessage()}
4747
</div>
4848
${this.#authoringHint.getPossibleFixMessage() ? html`
4949
<div class="hint-popup-possible-fix">
50-
${Directives.unsafeHTML(this.#authoringHint.getPossibleFixMessage())}
50+
${this.#authoringHint.getPossibleFixMessage()}
5151
</div>
5252
` : ''}
5353
${link ? html`

‎front_end/panels/protocol_monitor/JSONEditor.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -509,12 +509,12 @@ export class JSONEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
509509
const [head, tail] = splitDescription(elementData.description);
510510
const type = elementData.type;
511511
const replyArgs = elementData.replyArgs;
512-
let popupContent = '';
512+
let popupContent: Lit.LitTemplate|string;
513513
// replyArgs and type cannot get into conflict because replyArgs is attached to a command and type to a parameter
514514
if (replyArgs && replyArgs.length > 0) {
515-
popupContent = tail + `Returns: ${replyArgs}<br>`;
515+
popupContent = html`${tail}Returns: ${replyArgs}<br>`;
516516
} else if (type) {
517-
popupContent = tail + `<br>Type: ${type}<br>`;
517+
popupContent = html`${tail}<br>Type: ${type}<br>`;
518518
} else {
519519
popupContent = tail;
520520
}
@@ -523,7 +523,7 @@ export class JSONEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
523523
box: hintElement.boxInWindow(),
524524
show: async (popover: UI.GlassPane.GlassPane) => {
525525
const popupElement = new ElementsComponents.CSSHintDetailsView.CSSHintDetailsView({
526-
getMessage: () => `<span>${head}</span>`,
526+
getMessage: () => html`<span>${head}</span>`,
527527
getPossibleFixMessage: () => popupContent,
528528
getLearnMoreLink: () =>
529529
`https://chromedevtools.github.io/devtools-protocol/tot/${this.command.split('.')[0]}/`,

0 commit comments

Comments
 (0)