Giter Club home page Giter Club logo

Comments (2)

glacambre avatar glacambre commented on August 27, 2024 1

Hi! Thanks for describing the various things you tried, despite them not working out it's great to see that you spent some time/effort solving this on your own before opening an issue :)

Firenvim tries very hard to hide and protect itself from the page, which is why you're having a hard time getting CSS from the page/other extensions to apply to the Firenvim frame. The only solution I can think of is to create a new url-specific Firenvim setting that would enable users to customize the CSS that is applied to the Firenvim frame. This setting would be at risk of clobbering some of the CSS settings Firenvim computes on its own and that are required for operating correctly though (e.g. the frame is placed over textareas through CSS), so I'm not quite sure what the right solution would be. I need to think about this some more :)

from firenvim.

MostHated avatar MostHated commented on August 27, 2024 1

Just for some additional context, here is how the frame is currently:

Then, this is what I am attempting to acheive:

Then here are some snippets from the userscript I was playing around with:

let commentField = document.getElementById("new_comment_field")

function clickHandler() {
  console.log("Clicked")

  let spanItem = document.querySelectorAll("span")
  console.log('Found spans: ' + spanItem.length);

  for (let i = 0; i < spanItem.length; i++) {
    if (spanItem[i].tabIndex === -1) {

      // Adding this was just for my own sanity, 
      // to make sure at least *something* was working
      spanItem[i].setAttribute("nvim", true)
      
      let frame = spanItem[i].querySelector('iframe');

      // Just a test to see what happens/if it works -
      // Spoiler: it doesn't -------------------------
      if (frame){
        let leftStyle = frame.style.left;
        frame.style.left = leftStyle + "50px"; 
      }

      // Operation not permitted, it seems
      // ---------------------------------
      const shadow = spanItem[i].attachShadow({
        mode: 'open',
        delegatesFocus: true
      });

      if (shadow) {
        console.log("Found shadow!")
        let frame = shadow.firstChild;
        if (frame) {
          console.log("Found frame!")
          frame.setAttribute("nvim", true)
        }
      }

      // Doesn't work either ---------------
      if (spanItem[i].shadowRoot) {
        console.log("Found shadow root!")
        let frame = spanItem[i].shadowRoot.querySelector('iframe');
        console.log('Found frame: ' + spanItem[i].shadowRoot.querySelector('iframe'));
        if (frame) {
          console.log("Found frame!")
          frame.addEventListener("load", function () {
            console.log("Loaded!");
            frame.setAttribute("nvim", true)
          });
        }
      }
    }
  }

  // Something I found on a forum, but it doesn't work either
  // waitForKeyElements("iframe, frame", function (elem) {
  //   console.log("Found iframe!")
  //   elem.addEventListener("load", function () {
  //     console.log("Loaded!");
  //     elem.setAttribute("nvim")
  //   });
  // });
}

// Detect when the mouse has been clicked within the comment field
if (commentField) {
  console.log("Found comment field")
  commentField.addEventListener("click", function () {
    setTimeout(clickHandler, 2000);
  }, false);
}

from firenvim.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.