Understanding Firefox' Autocompletion Popup - javascript

I build my own Richlist-Suggest-Popup for the URLBar along the lines of Mozilla.
When reading their Source I don't understand how they simply do a setAttribute('image', image) as a richlistitem actually doesn't support this attribute.
As far as I know the richlistitem DOM is supposed to look the following:
richlistitem.autocomplete-richlistitem
vbox
hbox
image.ac-site-icon
label
Generating this on my own almost works, but I'm kind of sure that this is the wrong way.
Could anyone explain either how Mozilla provides this feature or show me an example how one would achieve the behaviour?

I highly recommend DOM Inspector and Inspect Context. Using these, you can see that there are a number of different XBL bindings for those list items, and one of them must be the one that lets you add an image using an image attribute. I hope this helps!

Related

Create document-fragment that stays in DOM

Recently I saw following html DOM:
Please see the console output that queries the element display-1 and tells me that it's parentNode is a document-fragment.
How can this happen? I read trough several articles and everyone stated that after appending the document fragment to a DOM element, the document-fragment remains as empty node and it's children are attached normally into the DOM.
I tried to create this situation by using shadow dom, custom elements, and so on. But nothing lead me to exactly this behaviour.
I tried it in chrome and edge.
Hopefully anyone can give me a hint. I struggle with this problem since yesterday...
I don't claim to be an expert on this, but I think at least part of the explanation is something along these lines: lightning web components uses a polyfill to implement a structure that is like a closed Shadow DOM (but isn't actually a native browser Shadow DOM). They use document-fragments in the implementation as well.
Documents with more info:
https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_dom
https://lwc.dev/guide/composition#shadow-dom
https://salesforce.stackexchange.com/questions/243725/understanding-shadow-dom-in-lightning-web-components
https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.testing_dom_api
In the last article, I think this quote gets more directly at how the document-fragment is a part of LWC.
"The article has a screenshot that shows DOM elements in Chrome Developer Tools. The screenshot shows a #shadow-root document fragment, which is the top node of a component’s shadow tree. If you look at a Lightning web component in Chrome Developer Tools, you don’t see the #shadow-root because LWC uses a shadow DOM polyfill. Salesforce supports some browsers that don’t implement the Shadow DOM web standard. The polyfill provides a shadow DOM in these browsers. To find Lightning web components on the page, look for element names that contain a hyphen. Select the element and run $0.shadowRoot in the Console. A Lightning web component returns #document-fragment."
So what salesforce says you need to do to select an element within one of their LWCs is to first select the entire component, then chain .shadowRoot (returns a document-fragment), then select elements within that. I have done this in a site built with LWCs just like this: document.querySelector('c-lb-header.cLB_Theme').shadowRoot.querySelector('#search-1')
I think there are other ways you can come across these document-fragments while traversing the DOM, like apparently .parentNode in your example is one. But even other ways... I can't remember where I read about another now. I imagine this is where problems can arise. And I'm sure other web pages may use document-fragments in ways where this could happen. I just only know about LWCs.
One thing I don't like about most of this documentation is that there are really two concepts at play here. One is a native browser shadow DOM, and the other is a more general concept of a shadow DOM for encapsulation (what SF implements with their polyfill and document-fragments and what not). But I don't think SF does a good job at distinguishing between these, so it can be even more confusing.
Someone more experienced can also probably take all this documentation in and come up with a more specific and precise answer to your question. I still don't really get how LWCs document-fragments appear to be attached to the DOM, but still behaving as if they are inaccessible. It may also have to do with the SF "Locker service", but I really don't know about that yet.
https://developer.salesforce.com/docs/component-library/tools/locker-service-viewer

What does paragraph about figuring out XUL elements mean in MDN document: "How to convert an overlay extension to restartless"

Recently a friend of mine and I have been working on a Firefox extension. He handed the code to me today, and I've been trying to make it restartless. I used the tutorial from How to convert an overlay extension to restartless (on MDN). Since I don't have much experience working with JavaScript and extensions in general, I was wondering if anyone could help to understand what step number 6 means here in this tutorial. They are saying we can't use "no more XUL overlays", and I understand this. What I don't understand is that how to this part:
Figure out what XUL elements you need to create for your add-on to add your interface, where it needs to go into a XUL window, and how to do it. Docs: document.getElementByID(), document.createElement(), Element reference, Node reference (DOM elements are also nodes).
I decided against using document.loadOverlay, since it's very buggy. I'm not sure if this helps much, but here is the code for our overlay.xul. Again, sorry if the question is really basic, any help is much appreciated. If I need to provide more code please let me know. At this point I thought only the code for our overlay.xul file is important.
<?xml version="1.0" encoding="UTF-8"?>
<overlay id="my-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/javascript;version=1.7" src="overlay.js"/>
</overlay>
XUL overlays can be used for a wide variety of things in Firefox. Step 6: No more XUL overlays focuses more on UI elements than other possible uses of overlays (e.g. loading scripts, as you are doing).
In an XUL overlay extension, the UI elements are generally added by providing an XUL overlay file for each portion of the interface which is modified. The XUL overlay extension does not need to consider removal of the interface elements, as they are only removed when the extension is removed or disabled.
In a restartless extension, all UI elements are added programmatically each time the extension is started. Some UI elements are added once; and some must be added both to each open window and when each new window is opened. When the extension is disabled, or removed, the UI elements must be programmatically removed completely from Firefox.
The portion you quoted is attempting to describe the process of converting an actual XUL overlay (used to modify the Firefox UI) to programmatically inserting (and removing) the UI elements. The most common UI element is probably a toolbar button, but it could be anything. Because it could be anything, the description is relatively vague.
That entire section, Step 6: No more XUL overlays, could definitely use some expansion. I remember planning to do so based on the code I used when converting an extension from XUL to overlay. I had wanted to clean the code up a bit, and account for more cases. However, having an example in there would be helpful. I'll see if I can update it in the next week or so (if someone else does not beat me to it).
In your case:
Based on the overlay code which you included in your question, this section is not talking as directly about how you are using your XUL overlay as might be desired. The part you quoted:
Figure out what XUL elements you need to create for your add-on to add your interface, where it needs to go into a XUL window, and how to do it. Docs: [document.getElementByID()][3], [document.createElement()][4], [Element reference][5], [Node reference][6] (DOM elements are also nodes).
is specifically talking about adding UI elements to Firefox, which is not what you are doing with your overlay.
What you are going to need to do is determine how you are going to apply your script, overlay.js, to whatever it is that you are adding it to. Remember, you also need to be able to remove it when your extension is disabled/removed/updated.
In order to provide more detailed information, we are going to need to know what it is that you are adding your script to. For this, we probably need you to include a copy of your chrome.manifest file. It might be helpful to know what your script does as the functionality may be more appropriately handled without applying the script in the way implied by an overlay. However, you should ask this as a new, separate question, not modify this question to ask something different.

How to take a screenshot of a web page by using Javascript

I need to capture the currently active web page as a screenshot. I've already tried html2canvas & GrabzIt but the problem is that I need a precise screenshot of the page I am on currently. The reason why I don't want to use html2canvas is because it does not always return a good version of a screenshot (not rendering properly) and I don't want to use GrabzIt because it's not free.
Do any of you have an idea how to accomplish this either by using javascript/java/flash?
Any option will do as long as it works...
P.S. I'm currently capturing screenshots with my addon for Firefox by using the function that firefox offers : context.drawWindow and now i want to make it available online.
Thanks a lot!
Currently possible alternatives:
rasterizeHTML.js:
this tool looks to be capable to capture a while page containing sophisticated html-structure and an image as well in this demo:
http://cburgmer.github.io/rasterizeHTML.js/
Lively 3D:
On the tool's website you can find a demo as well and it is still supported and developed.
http://livelygoes3d.blogspot.co.at/2011/11/rendering-html-on-canvas.html
HTML2Canvas:
Or after all HTML2Canvas because it does not look like that it is put on hold, quite the opposite there is a new release-version of it. And since I used it it might be handle rendering images onto a canvas better.
https://html2canvas.hertzen.com
Old-Answer:
I used this package in one of my projects and it worked pretty well. The only complain I have to make on this package is that images are not rendered that well in the final screenshot. But may be it's improved since then.
In the end, I ended up using server side generation of screenshots with phantomjs. Found it the most reliable in my scenario and it takes pretty decent screenshots.

How can I find jquery/javascript/modernizer code responsible for a effect

I'm learning web design, and there is no better method than redoing others work. So I'm reading other pages code, but it's so hard to find the jQuery, Javascript or modernizer or ... code responsible for the effect.
I'm using firebug, also used firequery, but the problem is they give me the event but not the code and a big tree of DOM, I don't know where even I look into it.
I really don't care which event is triggered, but I do care how the code is written. If I find the code so I can understand the event is on click or on focus...
Or let's say a website has a some javascript file, linked to a website. when I load the webpage i get a webpage consist of DOM and external/internal script. When I see a cool effect and want to read the code, I run firebug, inspect element to find the element. After that I don't know what to do? I can't search for selector or event in the script because maybe the developer of the site used different selector that I'm searching. Sometimes I find the code, but it's so jammed, not in human readable form, I don't know how to change the code to something indent and neat
The problem becomes more dramatic when the website using other java framework than jQuery.
I've searched a lot, used many tools, but couldn't find anything useful, please with your advice light my way to learn web developing
edit:--
I found a way but I'm sure there should be a better way outside
first in chrome I inspect the element to find the corresponding element, then i right click and check all the break point on it(if it doesn't work i do the same for parent element)
after that i play with that element to trigger the function and it break
usually the function that called the method is down in the callstack
also for reading
also for reading the script i use pretty print of chrome, i used some online prettyfier but most of them has limitation in number of character, for a long script none of the google first page resault is good enough. so the only good option here is for now is chrome, anyone have any other method?
It is difficult to learn how to do things just from inspecting it, as many effects may be implemented entirely in JavaScript, which may be deep, hidden away in a source file.
You mention that the code is not in human readable form, beautifying it may help:
https://stackoverflow.com/a/6318092/1061602
Most 'visual' effects should be able to be viewable from the CSS, e.g. JQuery Mobile's buttons, it is possible to see how the different classes are combined, ui-shadow, ui-btn, ui-disabled etc
Otherwise, searching for selectors is pretty much all you can do. Personally, if I am learning, looking at too much code at one time can be overwhelming. Also a lot of the UI effects may be difficult to trace.
My advice is, perhaps a better way around it would be to try and describe one single effect that you require, and then search on Google or Stack Overflow for guidance on how to create that effect.
The usual documentation sources will be useful:
http://www.w3schools.com/css3/default.asp
http://api.jquery.com/
Happy learning!

Create a textfield which can include html markup

I was wondering how one could create something that resembles a textfield, but can contain html elements in it. For example, something like what Stackoverflow uses for tags on its "Ask Question" page. Can this be done this done using a particular plugin/library or does it need to be created from scratch?
I have seen some solutions using the "contenteditable" property, but I am worried about cross browser compatibility. In fact it would appear that the Stackoverflow example does not use this. I have tried searching for info on how to do this but haven't found anything. Would be grateful if someone could point me in the right direction.
You don't need to create it from scratch. Here is the one I use: TinyMCE
You might also find this useful. But you dont need to make a new one. There are a plenty of open source options available.

Categories