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.

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

Use shadow DOM for CSS injections #44

Closed
ameshkov opened this issue Nov 3, 2015 · 3 comments

Comments

Projects
None yet
2 participants
@ameshkov
Copy link
Member

commented Nov 3, 2015

It seems that CSS styles injected to shadow dom has higher priority than even inline styles.
Please check if I am right before implementing this.

@ameshkov ameshkov added this to the 2.1 milestone Nov 3, 2015

@ameshkov

This comment has been minimized.

Copy link
Member Author

commented Nov 18, 2015

Look at ABP code (especially at that part about google)

        // Use Shadow DOM if available to don't mess with web pages that rely on
        // the order of their own <style> tags (#309).
        //
        // However, creating a shadow root breaks running CSS transitions. So we
        // have to create the shadow root before transistions might start (#452).
        //
        // Also, using shadow DOM causes issues on some Google websites,
        // including Google Docs and Gmail (#1770, #2602).
        if (document.documentElement && "createShadowRoot" in document.documentElement && !/\.google\.com$/.test(document.domain)) {
            shadow = document.documentElement.createShadowRoot();
            shadow.appendChild(document.createElement("shadow"));
        }
@ameshkov

This comment has been minimized.

Copy link
Member Author

commented Nov 18, 2015

That's for inline styles:

function convertSelectorsForShadowDOM(selectors)
{
  var result = [];
  var prefix = "::content ";

  for (var i = 0; i < selectors.length; i++)
  {
    var selector = selectors[i];
    if (selector.indexOf(",") == -1)
    {
      result.push(prefix + selector);
      continue;
    }

    var start = 0;
    var sep = "";
    for (var j = 0; j < selector.length; j++)
    {
      var chr = selector[j];
      if (chr == "\\")
        j++;
      else if (chr == sep)
        sep = "";
      else if (sep == "")
      {
        if (chr == '"' || chr == "'")
          sep = chr;
        else if (chr == ",")
        {
          result.push(prefix + selector.substring(start, j));
          start = j + 1;
        }
      }
    }

    result.push(prefix + selector.substring(start));
  }

  return result;
}

@ameshkov ameshkov modified the milestones: 2.2, 2.1 Dec 2, 2015

@ameshkov ameshkov changed the title Inject CSS to Shadow DOM Inject CSS into Shadow DOM Jan 21, 2016

@ameshkov ameshkov changed the title Inject CSS into Shadow DOM Use shadow DOM for CSS injections Feb 3, 2016

@ameshkov ameshkov added the Chromium label Feb 3, 2016

@ameshkov ameshkov assigned ameshkov and unassigned Mizzick Feb 3, 2016

@ameshkov ameshkov modified the milestones: 2.1, 2.2 Feb 3, 2016

adguard pushed a commit that referenced this issue Feb 3, 2016

@ameshkov

This comment has been minimized.

Copy link
Member Author

commented Feb 3, 2016

Done

@ameshkov ameshkov closed this Feb 3, 2016

adguard pushed a commit that referenced this issue Feb 3, 2016

adguard pushed a commit that referenced this issue Feb 3, 2016

Mizzick pushed a commit that referenced this issue Jan 18, 2018

Aleksandr Tropnikov
Merge pull request #44 in EXTENSIONS/browser-extension from ADG-557-1…
… to master

* commit '70927dc167af248b394990487020275ad20d566b':
  Fixed localizations
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.