Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix and refactor openExtensionPage() #9970

Merged
merged 4 commits into from
Oct 1, 2022
Merged

Fix and refactor openExtensionPage() #9970

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b3d8f16
Fix and refactor openExtensionPage()
bershanskiy Sep 30, 2022
bdffa0e
f
bershanskiy Sep 30, 2022
18a0ffc
f
bershanskiy Sep 30, 2022
a0ff7d6
f
bershanskiy Sep 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions src/ui/devtools/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import Body from './components/body';
import Connector from '../connect/connector';
import type {ExtensionData} from '../../definitions';

declare const __CHROMIUM_MV3__: boolean;

function renderBody(data: ExtensionData, actions: Connector) {
sync(document.body, <Body data={data} actions={actions} />);
}
Expand Down Expand Up @@ -45,3 +47,12 @@ if (__TEST__) {
}
};
}

if (__CHROMIUM_MV3__) {
// See getExtensionPageTabMV3() for explanation of what it is
chrome.runtime.onMessage.addListener((message, _, sendResponse) => {
if (message === 'getExtensionPageTabMV3_ping') {
sendResponse('getExtensionPageTabMV3_pong');
}
});
}
94 changes: 53 additions & 41 deletions src/ui/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import {MessageType} from '../utils/message';
import {isFirefox, isMobile} from '../utils/platform';
import type {Message} from '../definitions';

declare const __CHROMIUM_MV3__: boolean;

export function classes(...args: Array<string | {[cls: string]: boolean}>) {
const classes: string[] = [];
args.filter((c) => Boolean(c)).forEach((c) => {
Expand Down Expand Up @@ -135,7 +137,7 @@ export async function getFontList() {
'monospace',
'cursive',
'fantasy',
'system-ui'
'system-ui',
]);
return;
}
Expand All @@ -146,60 +148,70 @@ export async function getFontList() {
});
}

export async function getExtensionPageObject(path: string): Promise<chrome.windows.Window | chrome.tabs.Tab> {
if (isMobile) {
return new Promise<chrome.tabs.Tab>((resolve) => {
chrome.tabs.query({}, (t) => {
for (const tab of t) {
if (tab.url.endsWith(path)) {
resolve(tab);
return;
}
}
resolve(null);
});
});
}
return new Promise<chrome.windows.Window>((resolve) => {
type page = 'devtools' | 'stylesheet-editor';

// TODO(Anton): There must be a better way to do this
// This function ping-pongs a message to possible DevTools popups.
// This function should have reasonable performance since it sends
// messages only to popups and not regular windows.
async function getExtensionPageTabMV3(): Promise<chrome.tabs.Tab> {
return new Promise<chrome.tabs.Tab>((resolve) => {
chrome.windows.getAll({
populate: true,
windowTypes: ['popup']
windowTypes: ['popup'],
}, (w) => {
const responses: Array<Promise<string>> = [];
let found = false;
for (const window of w) {
if (window.tabs[0].url.endsWith(path)) {
resolve(window);
return;
}
const response = chrome.tabs.sendMessage<string, 'getExtensionPageTabMV3_pong'>(window.tabs[0].id, 'getExtensionPageTabMV3_ping', {frameId: 0});
response.then((response) => {
if (response === 'getExtensionPageTabMV3_pong') {
found = true;
resolve(window.tabs[0]);
}
});
responses.push(response);
}
resolve(null);
Promise.all(responses).then(() => !found && resolve(null));
});
});
}

export async function openExtensionPage(page: 'devtools' | 'stylesheet-editor') {
const path = `${page}/index.html`;
const cssEditorObject = await getExtensionPageObject(path);
async function getExtensionPageTab(url: string): Promise<chrome.tabs.Tab> {
if (__CHROMIUM_MV3__) {
return getExtensionPageTabMV3();
}
return new Promise<chrome.tabs.Tab>((resolve) => {
chrome.tabs.query({
url,
}, ([tab]) => resolve(tab || null));
});
}

export async function openExtensionPage(page: page) {
const url = chrome.runtime.getURL(`/ui/${page}/index.html`);
if (isMobile) {
if (cssEditorObject) {
chrome.tabs.update(cssEditorObject.id, {'active': true});
const extensionPageTab = await getExtensionPageTab(url);
if (extensionPageTab !== null) {
chrome.tabs.update(extensionPageTab.id, {active: true});
window.close();
} else {
chrome.tabs.create({
url: `../${path}`,
});
chrome.tabs.create({url});
window.close();
}
} else if (cssEditorObject) {
chrome.windows.update(cssEditorObject.id, {'focused': true});
} else {
chrome.windows.create({
type: 'popup',
// Note: this is a hack which works on Firefox because all
// UI pages have paths like ui/*/index.html
// See also: https://github.com/w3c/webextensions/issues/273
url: isFirefox ? `../${path}` : `ui/${path}`,
width: 600,
height: 600,
});
const extensionPageTab = await getExtensionPageTab(url);
if (extensionPageTab !== null) {
chrome.windows.update(extensionPageTab.windowId, {focused: true});
window.close();
} else {
chrome.windows.create({
type: 'popup',
url,
width: 600,
height: 600,
});
window.close();
}
}
}