mirror of
https://github.com/dart-lang/sdk
synced 2024-09-05 00:13:50 +00:00
dart migrate: Move title bar and add 'Migrate' check box next to title
This check box displays whether a file is migrating, opting out, or already migrated. The check box can be clicked to toggle between migrating and opting out. Clicking the check box updates status in the navigation tree. Clicking on check boxes updates the status in the title bar. Screenshot here: https://screenshot.googleplex.com/9z9v9L5DHhBXzEU.png In terms of the HTML, a new parent above '.content' div was added: the '.file' div, which includes a '.title-bar' div above the '.content' div. Bug: https://github.com/dart-lang/sdk/issues/44101 and Change-Id: I021f0dd873119ae801e29faa92e97fe48d03ef3c https://github.com/dart-lang/sdk/issues/44124 Reviewed-on: https://dart-review.googlesource.com/c/sdk/+/174440 Commit-Queue: Samuel Rawlins <srawlins@google.com> Reviewed-by: Paul Berry <paulberry@google.com>
This commit is contained in:
parent
81986f4a36
commit
17226bbbff
|
@ -56,7 +56,8 @@ class NavigationTreeRenderer {
|
|||
for (var entry in linksGroupedByDirectory.entries)
|
||||
NavigationTreeDirectoryNode(
|
||||
name: entry.key,
|
||||
path: pathContext.joinAll(entry.value.first.pathParts),
|
||||
path: pathContext
|
||||
.dirname(pathContext.joinAll(entry.value.first.pathParts)),
|
||||
subtree: _renderNavigationSubtree(entry.value, depth + 1),
|
||||
)..setSubtreeParents(),
|
||||
for (var link in links.where((link) => link.depth == depth))
|
||||
|
|
|
@ -25,7 +25,6 @@
|
|||
<h1>Dart</h1>
|
||||
<h2 class="before-apply">Proposed null safety changes</h2>
|
||||
<h2 class="after-apply">✓ Null safety migration applied</h2>
|
||||
<h3 id="unit-name"> </h3>
|
||||
<a target="_blank"
|
||||
href="https://goo.gle/dart-null-safety-migration-tool">
|
||||
<button class="action-button">
|
||||
|
@ -63,16 +62,26 @@
|
|||
<div class="nav-tree"></div>
|
||||
</div><!-- /nav-inner -->
|
||||
</div><!-- /nav -->
|
||||
<div class="content">
|
||||
<div class="regions">
|
||||
<!-- The regions overlay code copy of the content to provide -->
|
||||
<!-- tooltips for modified regions. -->
|
||||
</div><!-- /regions -->
|
||||
<div class="code">
|
||||
<!-- Compilation unit content is written here. -->
|
||||
<p class="welcome">
|
||||
Select a source file on the left to preview the proposed edits.
|
||||
</p>
|
||||
<div class="file">
|
||||
<div class="title-bar">
|
||||
<h3 id="unit-name"> </h3>
|
||||
<span id="migrate-unit-status-icon-label">Migrate
|
||||
<span
|
||||
class="material-icons status-icon migrating"
|
||||
id="migrate-unit-status-icon">check_box</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="regions">
|
||||
<!-- The regions overlay code copy of the content to provide -->
|
||||
<!-- tooltips for modified regions. -->
|
||||
</div><!-- /regions -->
|
||||
<div class="code">
|
||||
<!-- Compilation unit content is written here. -->
|
||||
<p class="welcome">
|
||||
Select a source file on the left to preview the proposed edits.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /content -->
|
||||
<div class="info-panel">
|
||||
|
|
|
@ -93,8 +93,7 @@ header {
|
|||
}
|
||||
|
||||
header h1,
|
||||
header h2,
|
||||
header h3 {
|
||||
header h2 {
|
||||
display: inline-block;
|
||||
font-family: "Google Sans","Roboto",sans-serif;
|
||||
font-weight: 400;
|
||||
|
@ -113,13 +112,6 @@ header h2 {
|
|||
top: -2px;
|
||||
}
|
||||
|
||||
header h3 {
|
||||
/* Shift text up */
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
|
||||
header .action-button, header a {
|
||||
right: 0px;
|
||||
float: right;
|
||||
|
@ -222,23 +214,23 @@ footer .sdk-version {
|
|||
color: #676767; /* $secondary-color */
|
||||
}
|
||||
|
||||
.nav-tree .status-icon.already-migrated {
|
||||
.status-icon.already-migrated {
|
||||
color: #007a27; /* $light-green */
|
||||
}
|
||||
|
||||
.nav-tree .status-icon.opted-out {
|
||||
.status-icon.opted-out {
|
||||
color: #676767; /* $secondary-color */
|
||||
}
|
||||
|
||||
.nav-tree .status-icon.opted-out:hover {
|
||||
.status-icon.opted-out:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.nav-tree .status-icon.migrating {
|
||||
.status-icon.migrating {
|
||||
color: #51c686; /* $dark-green */
|
||||
}
|
||||
|
||||
.nav-tree .status-icon.migrating:hover {
|
||||
.status-icon.migrating:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
@ -300,14 +292,41 @@ footer .sdk-version {
|
|||
line-height: 1em;
|
||||
}
|
||||
|
||||
.content {
|
||||
.file {
|
||||
flex: 4 300px;
|
||||
font-family: "Google Sans","Roboto",sans-serif;
|
||||
background: #12202f;
|
||||
font-family: "Roboto Mono", monospace;
|
||||
margin: 0 6px;
|
||||
margin: 6px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.title-bar h3 {
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
/* This aligns the title text with the content text, accounting for the width
|
||||
* of the line numbers.
|
||||
*/
|
||||
margin: 0.5em 24px 0.5em 63px;
|
||||
}
|
||||
|
||||
.title-bar #migrate-unit-status-icon-label {
|
||||
display: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.title-bar #migrate-unit-status-icon-label.visible {
|
||||
/* Change to 'inline' to enable the incremental migration feature. */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.title-bar #migrate-unit-status-icon {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-family: "Roboto Mono",monospace;
|
||||
position: relative;
|
||||
white-space: pre;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.code {
|
||||
|
@ -659,7 +678,7 @@ button[disabled] {
|
|||
* Adjustments to align material icons in the toolbar buttons.
|
||||
*/
|
||||
.action-button > span {
|
||||
position:relative;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
|
|
File diff suppressed because it is too large
Load diff
|
@ -72,6 +72,20 @@ void main() {
|
|||
|
||||
document.querySelector('.popup-pane .close').onClick.listen(
|
||||
(_) => document.querySelector('.popup-pane').style.display = 'none');
|
||||
|
||||
migrateUnitStatusIcon.onClick.listen((MouseEvent event) {
|
||||
var unitPath = unitName.innerText;
|
||||
var unitNavItem = document
|
||||
.querySelector('.nav-panel [data-name*="$unitPath"]')
|
||||
.parentNode as Element;
|
||||
var statusIcon = unitNavItem.querySelector('.status-icon');
|
||||
var entity = navigationTree.find(unitPath);
|
||||
if (entity is NavigationTreeFileNode) {
|
||||
toggleFileMigrationStatus(entity);
|
||||
updateIconsForNode(statusIcon, entity);
|
||||
updateParentIcons(unitNavItem, entity);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('popstate', (event) {
|
||||
|
@ -109,10 +123,18 @@ final Element headerPanel = document.querySelector('header');
|
|||
|
||||
final Element unitName = document.querySelector('#unit-name');
|
||||
|
||||
final Element migrateUnitStatusIconLabel =
|
||||
document.querySelector('#migrate-unit-status-icon-label');
|
||||
|
||||
final Element migrateUnitStatusIcon =
|
||||
document.querySelector('#migrate-unit-status-icon');
|
||||
|
||||
String get rootPath => querySelector('.root').text.trim();
|
||||
|
||||
String get sdkVersion => document.getElementById('sdk-version').text;
|
||||
|
||||
/*late final*/ List<NavigationTreeNode> navigationTree;
|
||||
|
||||
void addArrowClickHandler(Element arrow) {
|
||||
var childList = (arrow.parentNode as Element).querySelector(':scope > ul');
|
||||
// Animating height from "auto" to "0" is not supported by CSS [1], so all we
|
||||
|
@ -430,7 +452,8 @@ void loadNavigationTree() async {
|
|||
final response = await doGet<List<Object>>(path);
|
||||
var navTree = document.querySelector('.nav-tree');
|
||||
navTree.innerHtml = '';
|
||||
writeNavigationSubtree(navTree, NavigationTreeNode.listFromJson(response),
|
||||
navigationTree = NavigationTreeNode.listFromJson(response);
|
||||
writeNavigationSubtree(navTree, navigationTree,
|
||||
enablePartialMigration: false);
|
||||
} catch (e, st) {
|
||||
handleError('Could not load navigation tree', e, st);
|
||||
|
@ -707,6 +730,19 @@ void toggleFileMigrationStatus(NavigationTreeFileNode entity) {
|
|||
}
|
||||
}
|
||||
|
||||
/// Updates the navigation [icon] and current file icon according to the current
|
||||
/// migration status of [entity].
|
||||
void updateIconsForNode(Element icon, NavigationTreeNode entity) {
|
||||
updateIconForStatus(icon, entity.migrationStatus);
|
||||
// Update the status at the top of the file view if [entity] represents the
|
||||
// current file.
|
||||
var unitPath = unitName.innerText;
|
||||
if (entity.path == unitPath) {
|
||||
updateIconForStatus(migrateUnitStatusIcon, entity.migrationStatus);
|
||||
}
|
||||
}
|
||||
|
||||
/// Updates [icon] according to [status].
|
||||
void updateIconForStatus(Element icon, UnitMigrationStatus status) {
|
||||
switch (status) {
|
||||
case UnitMigrationStatus.alreadyMigrated:
|
||||
|
@ -753,6 +789,7 @@ void updatePage(String path, [int offset]) {
|
|||
link.classes.remove('selected-file');
|
||||
}
|
||||
});
|
||||
migrateUnitStatusIconLabel.classes.add('visible');
|
||||
}
|
||||
|
||||
/// Updates the parent icons of [entity] with list item [element] in the
|
||||
|
@ -762,7 +799,7 @@ void updateParentIcons(Element element, NavigationTreeNode entity) {
|
|||
if (parent != null) {
|
||||
var parentElement = (element.parentNode as Element).parentNode as Element;
|
||||
var statusIcon = parentElement.querySelector(':scope > .status-icon');
|
||||
updateIconForStatus(statusIcon, parent.migrationStatus);
|
||||
updateIconsForNode(statusIcon, parent);
|
||||
updateParentIcons(parentElement, parent);
|
||||
}
|
||||
}
|
||||
|
@ -774,11 +811,11 @@ void updateSubtreeIcons(Element element, NavigationTreeDirectoryNode entity) {
|
|||
if (child is NavigationTreeDirectoryNode) {
|
||||
updateSubtreeIcons(childNode, child);
|
||||
var childIcon = childNode.querySelector(':scope > .status-icon');
|
||||
updateIconForStatus(childIcon, entity.migrationStatus);
|
||||
updateIconsForNode(childIcon, entity);
|
||||
} else {
|
||||
var childIcon = (childNode.parentNode as Element)
|
||||
.querySelector(':scope > .status-icon');
|
||||
updateIconForStatus(childIcon, child.migrationStatus);
|
||||
updateIconsForNode(childIcon, child);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -824,11 +861,11 @@ void writeNavigationSubtree(
|
|||
if (enablePartialMigration) {
|
||||
var statusIcon = createIcon('indeterminate_check_box')
|
||||
..classes.add('status-icon');
|
||||
updateIconForStatus(statusIcon, entity.migrationStatus);
|
||||
updateIconsForNode(statusIcon, entity);
|
||||
statusIcon.onClick.listen((MouseEvent event) {
|
||||
toggleDirectoryMigrationStatus(entity);
|
||||
updateSubtreeIcons(li, entity);
|
||||
updateIconForStatus(statusIcon, entity.migrationStatus);
|
||||
updateIconsForNode(statusIcon, entity);
|
||||
updateParentIcons(li, entity);
|
||||
});
|
||||
li.insertBefore(statusIcon, folderIcon);
|
||||
|
@ -837,10 +874,10 @@ void writeNavigationSubtree(
|
|||
} else if (entity is NavigationTreeFileNode) {
|
||||
if (enablePartialMigration) {
|
||||
var statusIcon = createIcon()..classes.add('status-icon');
|
||||
updateIconForStatus(statusIcon, entity.migrationStatus);
|
||||
updateIconsForNode(statusIcon, entity);
|
||||
statusIcon.onClick.listen((MouseEvent event) {
|
||||
toggleFileMigrationStatus(entity);
|
||||
updateIconForStatus(statusIcon, entity.migrationStatus);
|
||||
updateIconsForNode(statusIcon, entity);
|
||||
updateParentIcons(li, entity);
|
||||
});
|
||||
li.append(statusIcon);
|
||||
|
@ -991,3 +1028,19 @@ extension on Element {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
extension on List<NavigationTreeNode> {
|
||||
/// Finds the node with path equal to [path], recursively, or `null`.
|
||||
NavigationTreeNode find(String path) {
|
||||
for (var node in this) {
|
||||
if (node is NavigationTreeDirectoryNode) {
|
||||
var foundInSubtree = node.subtree.find(path);
|
||||
if (foundInSubtree != null) return foundInSubtree;
|
||||
} else {
|
||||
assert(node is NavigationTreeFileNode);
|
||||
if (node.path == path) return node;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
|
0
tools/abiversions/.cipd/pkgs/0/.lock
Normal file
0
tools/abiversions/.cipd/pkgs/0/.lock
Normal file
1
tools/abiversions/.cipd/pkgs/0/_current
Symbolic link
1
tools/abiversions/.cipd/pkgs/0/_current
Symbolic link
|
@ -0,0 +1 @@
|
|||
nUZcDJx3qTxCaT-h-Mw2OLbM-x8VxzrX4YDD9gCGoosC
|
4
tools/abiversions/.cipd/pkgs/0/description.json
Normal file
4
tools/abiversions/.cipd/pkgs/0/description.json
Normal file
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"subdir": "39",
|
||||
"package_name": "dart/abiversions/39"
|
||||
}
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"format_version": "1.1",
|
||||
"package_name": "dart/abiversions/39",
|
||||
"install_mode": "copy",
|
||||
"files": [
|
||||
{
|
||||
"name": "gen_kernel_bytecode.dill",
|
||||
"size": 5280200,
|
||||
"hash": "I1SaF8VZ3FJGz_iT5syDDh0N5Z8zJfLQypxuMpk0gNMC"
|
||||
},
|
||||
{
|
||||
"name": "kernel_service.dill",
|
||||
"size": 9529664,
|
||||
"hash": "XfD_LgRwvrc0dsbcfESHHhRUXKvDz3Owo7-EB1s97xsC"
|
||||
},
|
||||
{
|
||||
"name": "vm_platform_strong.dill",
|
||||
"size": 6202872,
|
||||
"hash": "lbD-hNFdjnZ3VR4xKblv-1e95Wc3KRIgvKh_vw40nkYC"
|
||||
}
|
||||
]
|
||||
}
|
BIN
tools/abiversions/39/gen_kernel_bytecode.dill
Normal file
BIN
tools/abiversions/39/gen_kernel_bytecode.dill
Normal file
Binary file not shown.
BIN
tools/abiversions/39/kernel_service.dill
Normal file
BIN
tools/abiversions/39/kernel_service.dill
Normal file
Binary file not shown.
BIN
tools/abiversions/39/vm_platform_strong.dill
Normal file
BIN
tools/abiversions/39/vm_platform_strong.dill
Normal file
Binary file not shown.
Loading…
Reference in a new issue