Skip to content

Commit 8c88f7d

Browse files
ktranDevtools-frontend LUCI CQ
authored andcommitted
[GM3Restyling] Update What's new Panel
Before: https://i.imgur.com/wNFNuxA.png After: https://i.imgur.com/7i8c5Ub.png Bug: 325441858 Change-Id: I6d0b9c1613d1c0766c04b535f027714769c1b2da Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6084417 Commit-Queue: Kim-Anh Tran <[email protected]> Reviewed-by: Danil Somsikov <[email protected]>
1 parent e6e5b2d commit 8c88f7d

File tree

15 files changed

+354
-213
lines changed

15 files changed

+354
-213
lines changed

config/gni/devtools_grd_files.gni

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,7 @@ grd_files_release_sources = [
274274
"front_end/Images/warning-filled.svg",
275275
"front_end/Images/warning.svg",
276276
"front_end/Images/watch.svg",
277-
"front_end/Images/whatsnew.avif",
277+
"front_end/Images/whatsnew.svg",
278278
"front_end/Images/width.svg",
279279
"front_end/Images/zoom-in.svg",
280280
"front_end/Tests.js",
@@ -654,7 +654,6 @@ grd_files_release_sources = [
654654
"front_end/panels/webauthn/webauthn-meta.js",
655655
"front_end/panels/webauthn/webauthn.js",
656656
"front_end/panels/whats_new/resources/WNDT.md",
657-
"front_end/panels/whats_new/resources/whatsnew.avif",
658657
"front_end/panels/whats_new/whats_new-meta.js",
659658
"front_end/panels/whats_new/whats_new.js",
660659
"front_end/rehydrated_devtools_app.html",

config/gni/devtools_image_files.gni

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ devtools_image_files = [
1818
"toolbarResizerVertical.png",
1919
"touchCursor_2x.png",
2020
"touchCursor.png",
21-
"whatsnew.avif",
2221
]
2322

2423
devtools_svg_sources = [
@@ -270,6 +269,7 @@ devtools_svg_sources = [
270269
"warning-filled.svg",
271270
"warning.svg",
272271
"watch.svg",
272+
"whatsnew.svg",
273273
"width.svg",
274274
"zoom-in.svg",
275275
]

front_end/Images/src/whatsnew.svg

Lines changed: 61 additions & 0 deletions
Loading

front_end/Images/whatsnew.avif

-11.8 KB
Binary file not shown.

front_end/panels/whats_new/BUILD.gn

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,10 @@ devtools_entrypoint("meta") {
6565

6666
ts_library("unittests") {
6767
testonly = true
68-
sources = [ "ReleaseNote.test.ts" ]
68+
sources = [
69+
"ReleaseNote.test.ts",
70+
"ReleaseNoteView.test.ts",
71+
]
6972

7073
deps = [
7174
":bundle",

front_end/panels/whats_new/ReleaseNote.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ describe('Release Note', () => {
4141
persistence: UI.ViewManager.ViewPersistence.CLOSEABLE,
4242
order: 1,
4343
async loadView() {
44-
return WhatsNew.ReleaseNoteView.ReleaseNoteViewWrapper.instance();
44+
return new WhatsNew.ReleaseNoteView.ReleaseNoteView();
4545
},
4646
});
4747

front_end/panels/whats_new/ReleaseNoteText.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import * as MarkdownView from '../../ui/components/markdown_view/markdown_view.j
1010

1111
let registeredLinks = false;
1212

13-
interface ReleaseNote {
13+
export interface ReleaseNote {
1414
version: number;
1515
header: string;
1616
markdownLinks: {key: string, link: string}[];
@@ -33,7 +33,7 @@ export function getReleaseNote(): ReleaseNote {
3333

3434
let releaseNote: ReleaseNote = {
3535
version: 73,
36-
header: 'Highlights from the Chrome 132 update',
36+
header: 'What\'s new in DevTools 132',
3737
markdownLinks: [
3838
{
3939
key: 'ai-assistance',
Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
// Copyright 2024 The Chromium Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
import * as Host from '../../core/host/host.js';
6+
import type * as Platform from '../../core/platform/platform.js';
7+
import {
8+
describeWithEnvironment,
9+
} from '../../testing/EnvironmentHelpers.js';
10+
import type * as Buttons from '../../ui/components/buttons/buttons.js';
11+
import type * as UI from '../../ui/legacy/legacy.js';
12+
13+
import * as WhatsNew from './whats_new.js';
14+
15+
const CONTENT1 = 'Something something topic-1.\n';
16+
const CONTENT2 = 'Something something topic-2.\n';
17+
18+
describeWithEnvironment('Release Note View', () => {
19+
before(() => {
20+
WhatsNew.ReleaseNoteText.setReleaseNoteForTest(
21+
{
22+
version: 99,
23+
header: 'What\'s new in DevTools 100',
24+
markdownLinks: [
25+
{
26+
key: 'topic-1',
27+
link: 'https://google.com.com/#topic-1',
28+
},
29+
],
30+
link: 'https://google.com',
31+
},
32+
);
33+
});
34+
35+
it('splits up markdown file content into separate sections', async () => {
36+
const h1 = '### [Topic 1](topic-1)\n';
37+
const h2 = '### [Topic 2](topic-2)\n';
38+
39+
const content = [h1, CONTENT1, h2, CONTENT2];
40+
const notes = content.join('');
41+
42+
sinon.stub(WhatsNew.ReleaseNoteView.ReleaseNoteView, 'getFileContent').returns(Promise.resolve(notes));
43+
const splitContent = await WhatsNew.ReleaseNoteView.getMarkdownContent();
44+
assert.lengthOf(splitContent, 2);
45+
46+
for (let i = 0; i < 2; ++i) {
47+
assert.lengthOf(splitContent[i], 2);
48+
assert.deepStrictEqual(splitContent[i][0].type, 'heading');
49+
assert.deepStrictEqual(splitContent[i][1].type, 'paragraph');
50+
assert.deepStrictEqual(splitContent[i][0].raw, content[i * 2]);
51+
assert.deepStrictEqual(splitContent[i][1].raw, content[i * 2 + 1]);
52+
}
53+
});
54+
55+
it('groups nested markdown headers into one', async () => {
56+
const h1 = '### [Topic 1](topic-1)\n';
57+
const h2 = '#### [Topic 2](topic-2)\n';
58+
59+
const content = [h1, CONTENT1, h2, CONTENT2];
60+
const notes = content.join('');
61+
62+
sinon.stub(WhatsNew.ReleaseNoteView.ReleaseNoteView, 'getFileContent').returns(Promise.resolve(notes));
63+
const splitContent = await WhatsNew.ReleaseNoteView.getMarkdownContent();
64+
assert.lengthOf(splitContent, 1);
65+
assert.lengthOf(splitContent[0], 4);
66+
67+
assert.deepStrictEqual(splitContent[0][0].raw, h1);
68+
assert.deepStrictEqual(splitContent[0][1].raw, CONTENT1);
69+
assert.deepStrictEqual(splitContent[0][2].raw, h2);
70+
assert.deepStrictEqual(splitContent[0][3].raw, CONTENT2);
71+
});
72+
73+
it('splits headerless paragraphs into its own section', async () => {
74+
const h1 = '### [Topic 1](topic-1)\n';
75+
const content = [CONTENT1, h1];
76+
const notes = content.join('');
77+
78+
sinon.stub(WhatsNew.ReleaseNoteView.ReleaseNoteView, 'getFileContent').returns(Promise.resolve(notes));
79+
const splitContent = await WhatsNew.ReleaseNoteView.getMarkdownContent();
80+
assert.lengthOf(splitContent, 2);
81+
assert.lengthOf(splitContent[0], 1);
82+
assert.lengthOf(splitContent[1], 1);
83+
84+
assert.deepStrictEqual(splitContent[0][0].raw, CONTENT1);
85+
assert.deepStrictEqual(splitContent[1][0].raw, h1);
86+
});
87+
88+
it('renders markdown content', async () => {
89+
sinon.stub(WhatsNew.ReleaseNoteView.ReleaseNoteView, 'getFileContent').returns(Promise.resolve(CONTENT1));
90+
const releaseNoteView = new WhatsNew.ReleaseNoteView.ReleaseNoteView();
91+
await releaseNoteView.pendingUpdate();
92+
93+
const markdown = releaseNoteView.contentElement.querySelector('devtools-markdown-view');
94+
assert.isNotNull(markdown);
95+
});
96+
97+
it('renders link to video', async () => {
98+
sinon.stub(WhatsNew.ReleaseNoteView.ReleaseNoteView, 'getFileContent').returns(Promise.resolve(CONTENT1));
99+
const releaseNoteView = new WhatsNew.ReleaseNoteView.ReleaseNoteView();
100+
await releaseNoteView.pendingUpdate();
101+
const link = releaseNoteView.contentElement.querySelector<UI.XLink.XLink>('x-link');
102+
assert.isNotNull(link);
103+
assert.deepStrictEqual(link.href, 'https://google.com/');
104+
});
105+
106+
it('renders button that links to blogpost', async () => {
107+
sinon.stub(WhatsNew.ReleaseNoteView.ReleaseNoteView, 'getFileContent').returns(Promise.resolve(CONTENT1));
108+
const releaseNoteView = new WhatsNew.ReleaseNoteView.ReleaseNoteView();
109+
await releaseNoteView.pendingUpdate();
110+
const button = releaseNoteView.contentElement.querySelector<Buttons.Button.Button>('devtools-button');
111+
assert.isNotNull(button);
112+
const openInNewTabStub = sinon.stub(Host.InspectorFrontendHost.InspectorFrontendHostInstance, 'openInNewTab');
113+
114+
button.click();
115+
assert.strictEqual(openInNewTabStub.callCount, 1);
116+
assert.isTrue(
117+
openInNewTabStub.firstCall.calledWith('https://google.com' as Platform.DevToolsPath.UrlString),
118+
'openInNewTab was not called with the expected URL.');
119+
});
120+
});

0 commit comments

Comments
 (0)