Skip to content

Fetch widget for view-markdown-source instead of maintaining a copy of it #3670

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

Merged
fregante merged 11 commits into from
Oct 21, 2020
Merged

Fetch widget for view-markdown-source instead of maintaining a copy of it #3670

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
d9e4118
Avoid recreating the line-actions in `view-markdown-source`
yakov116 Oct 19, 2020
21f37a9
Feedback
yakov116 Oct 19, 2020
1b64b96
h
yakov116 Oct 19, 2020
255a95c
Background it
yakov116 Oct 20, 2020
86de663
Merge remote-tracking branch 'upstream/fetch_the_dom' into fetch_the_dom
yakov116 Oct 20, 2020
cfb7e40
Clean Up
yakov116 Oct 20, 2020
031e453
Remove console
yakov116 Oct 20, 2020
7551cbc
Restore fetch-dom.ts
fregante Oct 20, 2020
de43d47
Apply suggestions from code review
yakov116 Oct 20, 2020
debf2f1
Fix Build
yakov116 Oct 20, 2020
7250ee2
Update source/features/view-markdown-source.tsx
yakov116 Oct 20, 2020
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
6 changes: 4 additions & 2 deletions source/background.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,8 @@ addDomainPermissionToggle();

// `background` fetch required to avoid avoid CORB introduced in Chrome 73 https://chromestatus.com/feature/5629709824032768
// Don’t turn this into an `async` function https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage#addListener_syntax
browser.runtime.onMessage.addListener(({request}): Promise<Response> | void => {
return fetch(request).then(async response => response.json());
browser.runtime.onMessage.addListener((message): Promise<string> | void => {
if (message?.request) {
return fetch(message.request).then(async response => response.text());
}
});
2 changes: 1 addition & 1 deletion source/features/embed-gist-inline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ async function embedGist(link: HTMLAnchorElement): Promise<void> {
// Get the gist via background.js due to CORB policies introduced in Chrome 73
const gistData = await browser.runtime.sendMessage({request: `${link.href}.json`});

const files = domify.one(gistData.div)!;
const files = domify.one(JSON.parse(gistData).div)!;
const fileCount = files.children.length;

if (fileCount > 1) {
Expand Down
79 changes: 14 additions & 65 deletions source/features/view-markdown-source.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,79 +1,28 @@
import './view-markdown-source.css';
import React from 'dom-chef';
import domify from 'doma';
import select from 'select-dom';
import onetime from 'onetime';
import delegate from 'delegate-it';
import * as pageDetect from 'github-url-detection';

import FileIcon from 'octicon/file.svg';
import CodeIcon from 'octicon/code.svg';
import KebabHorizontalIcon from 'octicon/kebab-horizontal.svg';

import features from '.';
import fetchDom from '../helpers/fetch-dom';
import GitHubURL from '../github-helpers/github-url';
import {buildRepoURL} from '../github-helpers';

const lineActions = onetime(() => (
<details
className="details-reset details-overlay BlobToolbar position-absolute js-file-line-actions dropdown d-none"
aria-hidden="true"
>
<summary
className="btn-octicon ml-0 px-2 p-0 bg-white border border-gray-dark rounded-1"
aria-label="Inline file action toolbar"
aria-haspopup="menu"
role="button"
>
<KebabHorizontalIcon/>
</summary>
<details-menu role="menu">
<ul
className="BlobToolbar-dropdown dropdown-menu dropdown-menu-se mt-2"
style={{width: '185px'}}
>
<li>
<clipboard-copy
role="menuitem"
className="dropdown-item zeroclipboard-link"
id="js-copy-lines"
>
Copy line
</clipboard-copy>
</li>
<li>
<clipboard-copy
role="menuitem"
className="dropdown-item zeroclipboard-link"
id="js-copy-permalink"
>
Copy permalink
</clipboard-copy>
</li>
<li>
<a
className="dropdown-item js-update-url-with-hash"
id="js-view-git-blame"
role="menuitem"
href={new GitHubURL(location.href).assign({route: 'blame'}).href}
>
View git blame
</a>
</li>
<li>
<a
className="dropdown-item"
id="js-new-issue"
role="menuitem"
href={buildRepoURL('issues/new')}
>
Reference in new issue
</a>
</li>
</ul>
</details-menu>
</details>
));
const lineActions = onetime(async () => {
// Avoid having to create the entire 60 lines of JSX. The URL is hardcoded to a file we know the DOM exists.
const randomKnownFile = 'https://github.com/sindresorhus/refined-github/blob/b1229bbaeb8cf071f0711bc2ed1b40dd96cd7a05/.editorconfig';
const html = await browser.runtime.sendMessage({request: randomKnownFile});
const blobToolbar = domify(html).querySelector('.BlobToolbar')!;
select<HTMLAnchorElement>('#js-view-git-blame', blobToolbar)!.href = new GitHubURL(location.href).assign({route: 'blame'}).href;
select<HTMLAnchorElement>('#js-new-issue', blobToolbar)!.href = buildRepoURL('issues/new');
return blobToolbar;
});

const buttonBodyMap = new WeakMap<Element, Element | Promise<Element>>();

Expand Down Expand Up @@ -119,9 +68,9 @@ async function showSource(): Promise<void> {
sourceButton.classList.add('selected');
renderedButton.classList.remove('selected');
blurButton(sourceButton);
(await source).before(lineActions());

dispatchEvent(sourceButton, 'rgh:view-markdown-source');

(await source).before(await lineActions());
}

async function showRendered(): Promise<void> {
Expand All @@ -137,9 +86,9 @@ async function showRendered(): Promise<void> {
sourceButton.classList.remove('selected');
renderedButton.classList.add('selected');
blurButton(renderedButton);
lineActions().remove();

dispatchEvent(sourceButton, 'rgh:view-markdown-rendered');

(await lineActions()).remove();
}

async function init(): Promise<void> {
Expand Down