zzos/react-native-devtools-frontend
1
0
Fork 0
mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-10-20 13:35:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

[DevTools Quick Open] Add icon to Help menu

Browse Source 
Before: https://imgur.com/a/hJ28tFc
After: https://imgur.com/a/PqohakM, also other panels are not changed visually (https://imgur.com/a/jsXJ2DT)

Bug: 1201997
Change-Id: I512c742e95b9bf773115f0a818233d3d5b1e9db8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3144495
Commit-Queue: Nancy Li <nancyly@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Benedikt Meurer <bmeurer@chromium.org>
This commit is contained in:
Nancy Li
2021-09-08 12:56:50 +00:00
committed by Devtools-frontend LUCI CQ
parent 84af71c7da
commit 7e289166ae
14 changed files with 64 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/gni/devtools_grd_files.gni
+6
View File
@@ -58,6 +58,12 @@ grd_files_release_sources = [
"front_end/Images/flex-wrap-icon.svg",
"front_end/Images/help_outline.svg",
"front_end/Images/ic_checkmark_16x16.svg",
"front_end/Images/ic_command_go_to_line.svg",
"front_end/Images/ic_command_go_to_symbol.svg",
"front_end/Images/ic_command_help.svg",
"front_end/Images/ic_command_open_file.svg",
"front_end/Images/ic_command_run_command.svg",
"front_end/Images/ic_command_run_snippet.svg",
"front_end/Images/ic_delete_filter.svg",
"front_end/Images/ic_delete_list.svg",
"front_end/Images/ic_dimension_single.svg",
config/gni/devtools_image_files.gni
+6
View File
@@ -70,6 +70,12 @@ devtools_svg_sources = [
"flex-wrap-icon.svg",
"help_outline.svg",
"ic_checkmark_16x16.svg",
"ic_command_go_to_line.svg",
"ic_command_go_to_symbol.svg",
"ic_command_help.svg",
"ic_command_open_file.svg",
"ic_command_run_command.svg",
"ic_command_run_snippet.svg",
"ic_delete_filter.svg",
"ic_delete_list.svg",
"ic_dimension_single.svg",
front_end/Images/src/ic_command_go_to_line.svg
+4
View File
@@ -0,0 +1,4 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 6.83333C10 6.92538 9.91046 7 9.8 7H8.2C8.08954 7 8 6.92538 8 6.83333V5.16667C8 5.07462 8.08954 5 8.2 5H9.8C9.91046 5 10 5.07462 10 5.16667V6.83333Z" fill="#202124"/>
<path d="M10 12.8333C10 12.9254 9.91046 13 9.8 13H8.2C8.08954 13 8 12.9254 8 12.8333V11.1667C8 11.0746 8.08954 11 8.2 11H9.8C9.91046 11 10 11.0746 10 11.1667V12.8333Z" fill="#202124"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 467 B

front_end/Images/src/ic_command_go_to_symbol.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 9C4 6.24 6.24 4 9 4C11.76 4 14 6.24 14 9V9.715C14 10.7 13.235 11.5 12.25 11.5C11.655 11.5 11.095 11.21 10.77 10.765C10.32 11.22 9.69 11.5 9 11.5C7.62 11.5 6.5 10.38 6.5 9C6.5 7.62 7.62 6.5 9 6.5C10.38 6.5 11.5 7.62 11.5 9V9.715C11.5 10.11 11.855 10.5 12.25 10.5C12.645 10.5 13 10.11 13 9.715V9C13 6.83 11.17 5 9 5C6.83 5 5 6.83 5 9C5 11.17 6.83 13 9 13H11.5V14H9C6.24 14 4 11.76 4 9ZM7.5 9C7.5 9.83 8.17 10.5 9 10.5C9.83 10.5 10.5 9.83 10.5 9C10.5 8.17 9.83 7.5 9 7.5C8.17 7.5 7.5 8.17 7.5 9Z" fill="#202124"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 666 B

front_end/Images/src/ic_command_help.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 9C4 6.24 6.24 4 9 4C11.76 4 14 6.24 14 9C14 11.76 11.76 14 9 14C6.24 14 4 11.76 4 9ZM9.5 11V12H8.5V11H9.5ZM9 13C6.795 13 5 11.205 5 9C5 6.795 6.795 5 9 5C11.205 5 13 6.795 13 9C13 11.205 11.205 13 9 13ZM7 8C7 6.895 7.895 6 9 6C10.105 6 11 6.895 11 8C11 8.64146 10.605 8.98666 10.2204 9.32277C9.85551 9.64163 9.5 9.95231 9.5 10.5H8.5C8.5 9.58936 8.97106 9.22829 9.38522 8.91084C9.71012 8.6618 10 8.43961 10 8C10 7.45 9.55 7 9 7C8.45 7 8 7.45 8 8H7Z" fill="#202124"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 621 B

front_end/Images/src/ic_command_open_file.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.5 14C13.5 14.2761 13.2761 14.5 13 14.5H5C4.72386 14.5 4.5 14.2761 4.5 14V4C4.5 3.72386 4.72386 3.5 5 3.5H13C13.2761 3.5 13.5 3.72386 13.5 4V14Z" stroke="#202124"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 280 B

front_end/Images/src/ic_command_run_command.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.11523 13.115L7.00023 14L12.0002 9L7.00023 4L6.11523 4.885L10.2302 9L6.11523 13.115Z" fill="#202124"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 217 B

front_end/Images/src/ic_command_run_snippet.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.5 10H8.5V5.5H9.5V10ZM9.5 11.5H8.5V12.5H9.5V11.5Z" fill="#202124"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 182 B

front_end/panels/snippets/SnippetsQuickOpen.ts
+1
View File
@@ -76,6 +76,7 @@ export class SnippetsQuickOpen extends QuickOpen.FilteredListWidget.Provider {
QuickOpen.FilteredListWidget.registerProvider({
prefix: '!',
iconName: 'ic_command_run_snippet',
title: i18nLazyString(UIStrings.runSnippet),
provider: () => Promise.resolve(SnippetsQuickOpen.instance()),
});
front_end/panels/sources/sources-meta.ts
+3
View File
@@ -1700,6 +1700,7 @@ UI.ContextMenu.registerItem({
QuickOpen.FilteredListWidget.registerProvider({
prefix: '@',
iconName: 'ic_command_go_to_symbol',
title: i18nLazyString(UIStrings.goToSymbol),
async provider() {
const Sources = await loadSourcesModule();
@@ -1709,6 +1710,7 @@ QuickOpen.FilteredListWidget.registerProvider({
QuickOpen.FilteredListWidget.registerProvider({
prefix: ':',
iconName: 'ic_command_go_to_line',
title: i18nLazyString(UIStrings.goToLine),
async provider() {
const Sources = await loadSourcesModule();
@@ -1718,6 +1720,7 @@ QuickOpen.FilteredListWidget.registerProvider({
QuickOpen.FilteredListWidget.registerProvider({
prefix: '',
iconName: 'ic_command_open_file',
title: i18nLazyString(UIStrings.openFile),
async provider() {
const Sources = await loadSourcesModule();
front_end/ui/legacy/components/quick_open/CommandMenu.ts
+1
View File
@@ -380,6 +380,7 @@ export class ShowActionDelegate implements UI.ActionRegistration.ActionDelegate
registerProvider({
prefix: '>',
iconName: 'ic_command_run_command',
title: (): Common.UIString.LocalizedString => i18nString(UIStrings.runCommand),
provider: () => Promise.resolve(CommandMenuProvider.instance()),
});
front_end/ui/legacy/components/quick_open/FilteredListWidget.ts
+1
View File
@@ -596,4 +596,5 @@ export interface ProviderRegistration {
provider: () => Promise<Provider>;
title?: (() => string);
prefix: string;
iconName: string;
}
front_end/ui/legacy/components/quick_open/HelpQuickOpen.ts
+15 -3
View File
@@ -2,6 +2,7 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import * as IconButton from '../../../components/icon_button/icon_button.js';
import * as UI from '../../legacy.js';
import {getRegisteredProviders, Provider, registerProvider} from './FilteredListWidget.js';
@@ -12,6 +13,7 @@ let helpQuickOpenInstance: HelpQuickOpen;
export class HelpQuickOpen extends Provider {
private providers: {
prefix: string,
iconName: string,
title: string,
}[];
@@ -33,10 +35,11 @@ export class HelpQuickOpen extends Provider {
private addProvider(extension: {
prefix: string,
iconName: string,
title?: () => string,
}): void {
if (extension.title) {
this.providers.push({prefix: extension.prefix || '', title: extension.title()});
this.providers.push({prefix: extension.prefix || '', iconName: extension.iconName, title: extension.title()});
}
}
@@ -54,8 +57,16 @@ export class HelpQuickOpen extends Provider {
renderItem(itemIndex: number, _query: string, titleElement: Element, _subtitleElement: Element): void {
const provider = this.providers[itemIndex];
const prefixElement = titleElement.createChild('span', 'monospace');
prefixElement.textContent = (provider.prefix || '…') + ' ';
const iconElement = new IconButton.Icon.Icon();
iconElement.data = {
iconName: provider.iconName,
color: 'var(--color-text-primary)',
width: '18px',
height: '18px',
};
titleElement.parentElement?.parentElement?.insertBefore(iconElement, titleElement.parentElement);
UI.UIUtils.createTextChild(titleElement, provider.title);
}
@@ -72,6 +83,7 @@ export class HelpQuickOpen extends Provider {
registerProvider({
prefix: '?',
iconName: 'ic_command_help',
title: undefined,
provider: () => Promise.resolve(HelpQuickOpen.instance()),
});
front_end/ui/legacy/components/quick_open/filteredListWidget.css
+12 -3
View File
@@ -76,10 +76,9 @@
.filtered-list-widget-item-wrapper {
display: inline-flex;
height: 45px;
width: 502px;
border-bottom: 1px solid var(--color-details-hairline-light);
padding: 8px;
padding-left: 8px;
}
.filtered-list-widget-item-wrapper devtools-icon {
@@ -96,7 +95,7 @@
text-overflow: ellipsis;
overflow: hidden;
align-self: center;
color: var(--color-text-secondary);
color: var(--color-text-primary);
max-width: 446px;
font-size: 12px;
font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
@@ -170,9 +169,19 @@
}
.filtered-list-widget-item.one-row {
height: 36px;
line-height: 20px;
padding-top: 8px;
padding-bottom: 8px;
display: flex;
}
.filtered-list-widget-item.two-rows {
height: 45px;
padding-top: 8px;
padding-bottom: 8px;
}
.filtered-list-widget-item.two-rows .filtered-list-widget-title {
font-weight: bold;
}