Fix conflict-marker duplicated

[134130]

Description

• Closes conflict-marker duplicated #6809
• Use new patterns
  • element observing
  • seperate gql

Test URLs

• https://github.com/pulls
• https://github.com/refined-github/refined-github/pulls

Screenshot

[fregante]

This unfortunately triggers 25 HTTP requests every time you open the pull requests page, which isn't acceptable. We need to use batched-function to compose the old GraphQL call and inside it add the icons to the DOM. I don’t think we used this exact pattern in the extension yet but we need to start. The .gql file cannot be used in this case because of the composed GraphQL call.

[134130]

This unfortunately triggers 25 HTTP requests every time you open the pull requests page, which isn't acceptable. We need to use batched-function to compose the old GraphQL call and inside it add the icons to the DOM. I don’t think we used this exact pattern in the extension yet but we need to start. The .gql file cannot be used in this case because of the composed GraphQL call.

Ok I'll make bunch API call as it was before

[fregante]

What is this element? Does it exist on the milestones page? Does it work there now?

[134130]

It works ;)

[fregante]

I think this will fail on slower connections because the observer will call the callback as soon as #js-issues-toolbar is found, but at that point the long list of PRs might not be done downloading yet. This is why I was suggesting to use batched-function and the link selector

const addIcon = batchedFunction((icons) => {
  // create query, etc
});

observe('.js-issue-row:has(.octicon-git-pull-request.color-fg-open) a.js-navigation-open', addIcon, {signal})

[134130]

🤔 I've tested a lot but It can detect icons successly. But I'll test more slow network conditions.
And is your suggestion works correctly? As I know, the selector-observe only works as single element, not all elements.

Edit: I think there is some other api; batchedFunction. I'll check this later

[fregante]

As I know, the selector-observe only works as single element, not all elements

No, the observer detects any and all elements that appear on the page until the next page load.

Here's what happens with the suggested code:

1. observe finds 3 elements
2. calls addIcon once per element
3. batched function then calls the anonymous function with a single array: [prLink1, prLink2, prLink3]
4. you can use this array to construct the GQL call
5. if more items are detected later, it repeats from step 1

On fast connections maybe batchedFunction will call the function with 25 items, on slower connections it'll make multiple API calls, that's ok. The difference is that no element risks being forgotten + it always happens as soon as possible, regardless of your connection.

[134130]

Exactly, that was I thought.
I'm just wondering is there existing some utility function: batchedFunction, and the batchedFunction's throttle (or debounce) time.

[fregante]

What do you mean? It does exist and we're already using it. We don't need to change it at this point https://github.com/Richienb/batched-function

[fregante]

Nice, that looks pretty simple to implement in more features

[fregante]

This section exists to simplify testing so we should try to use URLs that do and always will include the feature. Our sandbox repo is where these scenarios exist and can be created.

[fregante]

Without a delay it's too fast even for high-speed internet:

100ms seems to fix it:

We have 2 more functions that use batchedFunction and likely suffer the same issue. PR welcome in that case too, inlining the batchedFunction() call this way