chrome-devtools-frontend
Version:
Chrome DevTools UI
122 lines (99 loc) • 4.76 kB
text/typescript
// 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.
/* eslint-disable rulesdir/no-imperative-dom-api */
import '../../ui/legacy/legacy.js';
import * as i18n from '../../core/i18n/i18n.js';
import type * as Platform from '../../core/platform/platform.js';
import type * as Workspace from '../../models/workspace/workspace.js';
import * as WorkspaceDiff from '../../models/workspace_diff/workspace_diff.js';
import * as UI from '../../ui/legacy/legacy.js';
import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
import {ChangesSidebar, Events} from './ChangesSidebar.js';
import changesViewStyles from './changesView.css.js';
import * as CombinedDiffView from './CombinedDiffView.js';
const CHANGES_VIEW_URL = 'https://developer.chrome.com/docs/devtools/changes' as Platform.DevToolsPath.UrlString;
const UIStrings = {
/**
*@description Text in Changes View of the Changes tab if no change has been made so far.
*/
noChanges: 'No changes yet',
/**
*@description Text in Changes View of the Changes tab to explain the Changes panel.
*/
changesViewDescription: 'On this page you can track code changes made within DevTools.',
} as const;
const str_ = i18n.i18n.registerUIStrings('panels/changes/ChangesView.ts', UIStrings);
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
export class ChangesView extends UI.Widget.VBox {
private emptyWidget: UI.EmptyWidget.EmptyWidget;
private readonly workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl;
readonly changesSidebar: ChangesSidebar;
private selectedUISourceCode: Workspace.UISourceCode.UISourceCode|null;
private readonly diffContainer: HTMLElement;
private readonly combinedDiffView: CombinedDiffView.CombinedDiffView;
constructor() {
super(true);
this.registerRequiredCSS(changesViewStyles);
this.element.setAttribute('jslog', `${VisualLogging.panel('changes').track({resize: true})}`);
const splitWidget = new UI.SplitWidget.SplitWidget(true /* vertical */, false /* sidebar on left */);
const mainWidget = new UI.Widget.VBox();
splitWidget.setMainWidget(mainWidget);
splitWidget.show(this.contentElement);
this.emptyWidget = new UI.EmptyWidget.EmptyWidget('', '');
this.emptyWidget.show(mainWidget.element);
this.workspaceDiff = WorkspaceDiff.WorkspaceDiff.workspaceDiff();
this.changesSidebar = new ChangesSidebar(this.workspaceDiff);
this.changesSidebar.addEventListener(
Events.SELECTED_UI_SOURCE_CODE_CHANGED, this.selectedUISourceCodeChanged, this);
splitWidget.setSidebarWidget(this.changesSidebar);
this.selectedUISourceCode = null;
this.diffContainer = mainWidget.element.createChild('div', 'diff-container');
UI.ARIAUtils.markAsTabpanel(this.diffContainer);
this.combinedDiffView = new CombinedDiffView.CombinedDiffView();
this.combinedDiffView.workspaceDiff = this.workspaceDiff;
this.combinedDiffView.show(this.diffContainer);
this.hideDiff();
this.selectedUISourceCodeChanged();
}
private renderDiffOrEmptyState(): void {
// There are modified UI source codes, we should render the combined diff view.
if (this.workspaceDiff.modifiedUISourceCodes().length > 0) {
this.showDiff();
} else {
this.hideDiff();
}
}
private selectedUISourceCodeChanged(): void {
const selectedUISourceCode = this.changesSidebar.selectedUISourceCode();
if (!selectedUISourceCode || this.selectedUISourceCode === selectedUISourceCode) {
return;
}
this.selectedUISourceCode = selectedUISourceCode;
this.combinedDiffView.selectedFileUrl = selectedUISourceCode.url();
}
override wasShown(): void {
UI.Context.Context.instance().setFlavor(ChangesView, this);
super.wasShown();
this.renderDiffOrEmptyState();
this.workspaceDiff.addEventListener(
WorkspaceDiff.WorkspaceDiff.Events.MODIFIED_STATUS_CHANGED, this.renderDiffOrEmptyState, this);
}
override willHide(): void {
super.willHide();
UI.Context.Context.instance().setFlavor(ChangesView, null);
this.workspaceDiff.removeEventListener(
WorkspaceDiff.WorkspaceDiff.Events.MODIFIED_STATUS_CHANGED, this.renderDiffOrEmptyState, this);
}
private hideDiff(): void {
this.diffContainer.style.display = 'none';
this.emptyWidget.header = i18nString(UIStrings.noChanges);
this.emptyWidget.text = i18nString(UIStrings.changesViewDescription);
this.emptyWidget.link = CHANGES_VIEW_URL;
this.emptyWidget.showWidget();
}
private showDiff(): void {
this.emptyWidget.hideWidget();
this.diffContainer.style.display = 'block';
}
}