Skip to content

Fix CSS features disappearing after clicking on a link#5752

Merged
fregante merged 1 commit into
mainfrom
preserve-body-classes
Jul 1, 2022
Merged

Fix CSS features disappearing after clicking on a link#5752
fregante merged 1 commit into
mainfrom
preserve-body-classes

Conversation

@fregante
Copy link
Copy Markdown
Member

@fregante fregante commented Jun 29, 2022

Test URLs

  1. Open https://github.com/refined-github/refined-github/issues
  2. Click on Issues tab

Before

Screen.Recording.mov

After

Screen.Recording.1.mov

@fregante fregante marked this pull request as ready for review June 29, 2022 16:41
@fregante fregante added the bug label Jun 29, 2022
@yakov116
Copy link
Copy Markdown
Member

yakov116 commented Jun 29, 2022

Working for me but has a very noticeable jump

@fregante
Copy link
Copy Markdown
Member Author

fregante commented Jun 29, 2022

I've been noticing that jump too, but only sometimes (in a Safari window I always get a jump on reload, but on the other window I do not 😰).

This is on 22.6.25

Screen.Recording.1.mov

Either way it's unrelated to this specific issue and we should probably open a new issue for that if it persists. The only reason why it could be happening is in globalReady (or due to an unavoidable browser restriction/bug)

@yakov116
Copy link
Copy Markdown
Member

is it

await waitFor(() => document.body);
??

@yakov116 yakov116 closed this Jun 29, 2022
@yakov116 yakov116 reopened this Jun 29, 2022
@fregante
Copy link
Copy Markdown
Member Author

fregante commented Jun 29, 2022

ha!

Screen Shot

@yakov116
Copy link
Copy Markdown
Member

RAAA LOL

@fregante
Copy link
Copy Markdown
Member Author

 await waitFor(() => document.body); 

That's potentially the issue, but it's not really something new or anything that GitHub or us can affect, that's the weird part.

We can replace it with an observeElement(document.documentElement), assuming that it always exists (can we assume that?)

@yakov116
Copy link
Copy Markdown
Member

yakov116 commented Jun 29, 2022

I forgot already how did we land up with document.body? I would want to check in history why we did not use observe element.

We went though a few options before we came to this

@fregante
Copy link
Copy Markdown
Member Author

I forgot already how did we land up with document.body?

The content scripts are injected on document_start, which may happen before the document is parsed. This means that the script might find an empty page so we have to wait for it. We use to have requestAnimationFrame to catch the first draw, but that means we can't do anything until the tab becomes visible, even if it loaded a minute ago.

Maybe we can combine the two in a race:

await Promise.race([
	frame(),
	waitFor(() => document.body)
])

@fregante fregante closed this Jun 29, 2022
@fregante fregante reopened this Jun 29, 2022
@yakov116
Copy link
Copy Markdown
Member

If I am not mistaken, requesting the frame broke Firefox. (GitHub froze)

@fregante
Copy link
Copy Markdown
Member Author

If I am not mistaken, requesting the frame broke Firefox. (GitHub froze)

Almost! It wasn't the frame, but the logic around it:

// Wait for the document to be at least partially available
const oneFrame = frame();
while (!document.body) {
// eslint-disable-next-line no-await-in-loop
await Promise.race([delay(10), oneFrame]);
}

More pre-bug context/assumptions #4316 (comment)

Full explanation in #4316 (comment)

Basically that's the code I just suggested

@fregante fregante closed this Jun 29, 2022
@fregante fregante reopened this Jun 29, 2022
Copy link
Copy Markdown
Contributor

@cheap-glitch cheap-glitch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Working on Firefox, but it is somewhat slower than before.

@cheap-glitch
Copy link
Copy Markdown
Contributor

Btw there's still some document.body.classList calls in https://github.com/refined-github/refined-github/blob/main/safari/Shared%20(App)/Resources/Script.js, not sure if those should be updated too.

@fregante
Copy link
Copy Markdown
Member Author

That’s a web view in the native app.

@fregante fregante changed the title Preserve some CSS features after navigation Fix CSS features disappearing after clicking on a link Jul 1, 2022
@fregante fregante merged commit 654d0f4 into main Jul 1, 2022
@fregante fregante deleted the preserve-body-classes branch July 1, 2022 12:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Development

Successfully merging this pull request may close these issues.

Nothing works until you refresh the page (Ajax issue)

3 participants