mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-01 17:57:36 +08:00
Tim van der Lippe
916495bc58
All usages of the title property were manually audited using the following search regex: \.title\b(([^\(][^=])|(;)) R=jacktfranklin@chromium.org Bug: 1150762 Change-Id: I6ae97ba27f652af9a1cc816643f499ab5fe41088 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2562342 Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org> Commit-Queue: Jack Franklin <jacktfranklin@chromium.org> Auto-Submit: Tim van der Lippe <tvanderlippe@chromium.org> Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
84 lines
3.3 KiB
JavaScript
84 lines
3.3 KiB
JavaScript
// Copyright 2017 The Chromium Authors. All rights reserved.
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
// found in the LICENSE file.
|
|
|
|
import * as Host from '../host/host.js';
|
|
import * as UI from '../ui/ui.js';
|
|
|
|
import {latestReleaseNote, ReleaseNote, releaseNoteViewId} from './HelpImpl.js'; // eslint-disable-line no-unused-vars
|
|
|
|
export class ReleaseNoteView extends UI.Widget.VBox {
|
|
constructor() {
|
|
super(true);
|
|
this.registerRequiredCSS('help/releaseNote.css', {enableLegacyPatching: true});
|
|
this._releaseNoteElement = this._createReleaseNoteElement(latestReleaseNote());
|
|
const topSection = this.contentElement.createChild('div', 'release-note-top-section');
|
|
topSection.textContent = ls`${latestReleaseNote().header}`;
|
|
this.contentElement.appendChild(this._releaseNoteElement);
|
|
}
|
|
|
|
/**
|
|
* @override
|
|
* @return {!Array<!Element>}
|
|
*/
|
|
elementsToRestoreScrollPositionsFor() {
|
|
return [this._releaseNoteElement];
|
|
}
|
|
|
|
/**
|
|
* @param {!ReleaseNote} releaseNote
|
|
* @return {!Element}
|
|
*/
|
|
_createReleaseNoteElement(releaseNote) {
|
|
const hbox = document.createElement('div');
|
|
hbox.classList.add('hbox');
|
|
const container = hbox.createChild('div', 'release-note-container');
|
|
const contentContainer = container.createChild('ul');
|
|
UI.ARIAUtils.setAccessibleName(contentContainer, ls`${latestReleaseNote().header}`);
|
|
|
|
let linkNumber = 1;
|
|
for (const highlight of releaseNote.highlights) {
|
|
const listItem = contentContainer.createChild('li');
|
|
const linkWrapper = UI.XLink.XLink.create(highlight.link, '', 'release-note-link');
|
|
linkWrapper.textContent = '';
|
|
UI.ARIAUtils.markAsLink(linkWrapper);
|
|
UI.ARIAUtils.setAccessibleName(
|
|
linkWrapper, `${highlight.title}: ${highlight.subtitle} ${linkNumber} of ${releaseNote.highlights.length}`);
|
|
|
|
const title = linkWrapper.createChild('div', 'release-note-title');
|
|
title.textContent = highlight.title;
|
|
|
|
const subtitle = linkWrapper.createChild('div', 'release-note-subtitle');
|
|
subtitle.textContent = highlight.subtitle;
|
|
|
|
listItem.appendChild(linkWrapper);
|
|
linkNumber++;
|
|
}
|
|
|
|
const actionContainer = container.createChild('div', 'release-note-action-container');
|
|
const learnMore = UI.UIUtils.createTextButton(ls`Learn more`, event => {
|
|
event.consume(true);
|
|
Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(releaseNote.link);
|
|
});
|
|
UI.ARIAUtils.markAsLink(learnMore);
|
|
actionContainer.appendChild(learnMore);
|
|
|
|
actionContainer.appendChild(UI.UIUtils.createTextButton(ls`Close`, event => {
|
|
event.consume(true);
|
|
UI.InspectorView.InspectorView.instance().closeDrawerTab(releaseNoteViewId, true);
|
|
}, 'close-release-note'));
|
|
|
|
const imageLink = /** @type {!HTMLElement} */ (UI.XLink.XLink.create(releaseNote.link, ' '));
|
|
imageLink.classList.add('release-note-image');
|
|
UI.Tooltip.Tooltip.install(imageLink, ls`${latestReleaseNote().header}`);
|
|
|
|
hbox.appendChild(imageLink);
|
|
const image = /** @type {!HTMLImageElement} */ (imageLink.createChild('img'));
|
|
image.src = 'Images/whatsnew.png';
|
|
UI.Tooltip.Tooltip.install(image, UI.Tooltip.Tooltip.getContent(imageLink));
|
|
image.alt = UI.Tooltip.Tooltip.getContent(image);
|
|
|
|
return hbox;
|
|
}
|
|
}
|