I am building a Firefox extension which communicates with a web service. In my extension, I am required to change the extension icon in the toolbar based on the login status of the user. Is there a way for me to programmatically access the toolbar icon and then change the image for the toolbar icon?
Here is what extensions usually do in such scenario
If it isn't already, style your toolbar button with CSS.
When the state changes, set or remove some attribute on your toolbar button via .setAttribute, e.g. .setAttribute("loggedin", "true"). I recently answered a question about dealing with modifying toolbar buttons no matter if it is visible.
Add new CSS rules defining the style of the button (e.g. a new icon) for when that attribute is set an has a specific value usung regular CSS selectors, e.g. #xulschoolhello-hello-world-button[loggedin="true"] { /* another icon */ }
Related
I'm using the trix-editor as my wysiwyg editor for a Python Flask app.
It seems to be the easiest editor to use but I'd like to add the option to go full screen with the editor.
I do this currently by toggling fullscreen for the div containing the trix-editor. However, I have a few pages with multiple trix-editors on them, so I'd like to add a button to the trix toolbar to toggle fullscreen rather than having a button outside the editor.
This is purely for cosmetic reasons, the current set up of toggling div to fullscreen does the job.
Is this possible?
I am working on a website based on Prestashop, and there is a tag which classes are changed (from "col-md-12" to "col-md-6") when one activate a switcher.
I would like to be abble to see how and where this changed is made in the javascript code (I suppose it must be Javascript that make the change).
Thank you
Open chrome developer tools (F12 on Windows/Linux,
Command+Option+I on Mac).
Click on the element picker at the top-left corner of the devtools
panel.
With this tool selected, find (in page) and click on the element whose
attribute is changed at runtime. The tag must now be highlighted in devtools panel
too. Right-click the highlighted tag in devtools.
In the pop-up menu, hover over Break on and select attribute
modification.
Click the switch that changes the class to col-md-6.
Please note that this will pause the execution every time one of the attribute is modified, which includes addition/removal of an attribute or change in their values.
I am working on a cms for a smaller company and they want inline editing, my only problem is that they want to have the tinymce toolbar visible at all times, disabled when not in use and active when focus on a field.
So my question is: How can i have a tinymce toolbar that is constantly visible, and disabled when not in use and active when it is?
I am developing extension for chrome browser.
Is there a way to change tab colour in chromium from script by using extension?
(something like chrome.tabs.setcolor(tab.id, 'red'))
I want to change colour when some events triggers (colour can be changed several times and it can be different each time equals the type of event which triggered it). So I can't use theme because I think that theme set tab colour forever and it can't be changed in future.
I'm trying to simulate keypresses and clicks in jQuery, which is working to blur the toolbar in IE6 but in Firefox it seems to remain open.
Is there some way to blur the editor or some setting that I'm missing that makes it so that it doesn't steal focus and show the toolbar by default?
Update it is showing up because I am calling editor.set_html(value); in the OnClientLoad() event for the editor. Is there any way to get the toolbar to hide after calling the set_html() function?
After much googling, I discovered this post:
When the set_html() method is fired, the operation is added to the Undo list. You should use the innerHTML attribute of the editor's content area to set content in the editor
So instead of editor.set_html(value);, I use editor.get_contentArea().innerHTML = value; and now the toolbar doesn't open by default!