Is there a way to customize the background color of the address bar in Firefox according to different protocols? For example, using blue for https, orange for mixed content warning, green for ev-certificate, and red for invalid certificates.
Is there a way to customize the background color of the address bar in Firefox according to different protocols? For example, using blue for https, orange for mixed content warning, green for ev-certificate, and red for invalid certificates.
In the past, I tackled this task using Firefox 7. Reflecting on it now reveals numerous issues, but it accomplishes the desired outcome. Nonetheless, enhancements to the code are definitely necessary:
var {Cc, Ci} = require('chrome');
var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
var ios = Cc['@mozilla.org/network/io-service;1'].getService(Ci.nsIIOService);
var windowUtils = require('window-utils');
var wm = Cc['@mozilla.org/appshell/window-mediator;1'].getService(Ci.nsIWindowMediator);
exports.main = function() {
//no exports required
};
var aWin = wm.getMostRecentWindow('navigator:browser'); //aWin refers to anyWindow used by functions like encodeURI
//hide extended label when page is verified
var identityBoxCss = '.verifiedDomain .plain {display:none}';
var identityBoxCssData = 'data:text/css;charset=utf-8,' + aWin.encodeURI(identityBoxCss);
var identityBoxCssUri = ios.newURI(identityBoxCssData, null, null);
//end hide extended label for verified pages
//colorize URL bar
var gUrlBarColorize = {
func: function(win) {
var identityIconLabel = win.document.getElementById('identity-icon-label');
var identityBox = win.document.getElementById('identity-box');
var gURLBar = win.gURLBar;
if (gURLBar.value.search(/https/i) == 0) {
if ((identityBox.classList.contains('verifiedDomain') || identityBox.classList.contains('verifiedIdentity'))&& identityIconLabel.value.length > 0) {
gURLBar.style.backgroundColor = '#D0F7B9';
} else {
gURLBar.style.backgroundColor = '#F8D6DE';
}
} else {
gURLBar.style.backgroundColor = '';
}
}
};
//end - colorize URL bar
//hide icons in bookmarks toolbar
var bookmarksToolbarCss = '.bookmark-item .toolbarbutton-icon {display:none}';
var bookmarksToolbarCssData = 'data:text/css;charset=utf-8,' + aWin.encodeURI(bookmarksToolbarCss);
var bookmarksToolbarCssUri = ios.newURI(bookmarksToolbarCssData, null, null);
//end - hide icons in bookmarks toolbar
var wt = new windowUtils.WindowTracker({
onTrack: function (window) {
//hide extended label when page is verified
var IdentityBox = window.document.getElementById('identity-box');
if (IdentityBox) {
if (sss.sheetRegistered(identityBoxCssUri, sss.USER_SHEET)) {
sss.unregisterSheet(identityBoxCssUri, sss.USER_SHEET);
}
sss.loadAndRegisterSheet(identityBoxCssUri, sss.USER_SHEET);
}
//end hide extended label for verified pages
//colorize URL bar
if (window.gBrowser) {
window.FF7TweaksForScot = {}
window.FF7TweaksForScot.gUrlBarColorize = function() { gUrlBarColorize.func(window) };
window.FF7TweaksForScot.gUrlBarColorize();
window.gBrowser.addEventListener('load', window.FF7TweaksForScot.gUrlBarColorize, true);
window.gBrowser.addEventListener('pageshow', window.FF7TweaksForScot.gUrlBarColorize, true);
window.gBrowser.tabContainer.addEventListener('TabSelect', window.FF7TweaksForScot.gUrlBarColorize, true);
}
//end - colorize URL bar
//hide icons in bookmarks toolbar
var PlacesToolbarItems = window.document.getElementById('PlacesToolbarItems');
if (PlacesToolbarItems) {
if (sss.sheetRegistered(bookmarksToolbarCssUri, sss.USER_SHEET)) {
sss.unregisterSheet(bookmarksToolbarCssUri, sss.USER_SHEET);
}
sss.loadAndRegisterSheet(bookmarksToolbarCssUri, sss.USER_SHEET);
}
//end - hide icons in bookmarks toolbar
},
onUntrack: function (window) {
//hide extended label when page is verified
var IdentityBox = window.document.getElementById('identity-box');
if (IdentityBox) {
if (sss.sheetRegistered(identityBoxCssUri, sss.USER_SHEET)) {
sss.unregisterSheet(identityBoxCssUri, sss.USER_SHEET);
}
}
//end hide extended label for verified pages
//colorize URL bar
if (window.gBrowser) {
window.gURLBar.style.backgroundColor = '';
window.gBrowser.removeEventListener('load', window.FF7TweaksForScot.gUrlBarColorize, true);
window.gBrowser.removeEventListener('pageshow', window.FF7TweaksForScot.gUrlBarColorize, true);
window.gBrowser.tabContainer.removeEventListener('TabSelect', window.FF7TweaksForScot.gUrlBarColorize, true);
delete window.FF7TweaksForScot;
}
//end - colorize URL bar
//hide icons in bookmarks toolbar
var PlacesToolbarItems = window.document.getElementById('PlacesToolbarItems');
if (PlacesToolbarItems) {
if (sss.sheetRegistered(bookmarksToolbarCssUri, sss.USER_SHEET)) {
sss.unregisterSheet(bookmarksToolbarCssUri, sss.USER_SHEET);
}
}
//end - hide icons in bookmarks toolbar
}
});
Take a look at this code snippet: <div class="paymentOption"> <input type="radio" name="paymentOption" value="1" /> <span class="marginLeft10">1-time payment using a different credit card</span> </div> Is it feasible ...
Hey everyone, I recently created an HTML5 page and utilized the <section> tag. However, I'm encountering issues with the CSS file I'm using. It seems to work perfectly on Firefox, but the layout is all over the place when viewed on Chrome a ...
Is it feasible to utilize pure HTML for the background-image property? Consider the following scenario: The original: background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height=&apo ...
Why is the pagination not showing up on the image carousel I created with Swiper? Despite being in the DOM, it has a height of 0 and manual changes have no effect. Any suggestions? import Swiper from '../../vendor/swiper.min.js'; export default ...
I am interested in developing a conditional sass class that can be customized based on an argument provided. I am unsure about the terminology for this feature. For instance: <img class="width-200" .../> I would like to create a sass mixin that tak ...
I am facing an issue where the input box remains static with old numbers when it overflows, and newly typed numbers do not appear at all. <!DOCTYPE html> <html> <body> <input type="text" id="output-area" placehold ...
Working on my Ionic 3 project, I have encountered an issue with the ion-item click listener. The scenario is that I am adding text over a canvas and then attempting to change the style of the text (such as font-family, font-size, bold, and italic). The UI ...
For my Angular application, I have a simple requirement of adding a CSS class when a row expands or collapses to highlight the row. I attempted to use gridOptions.getRowClass following the documentation at https://www.ag-grid.com/javascript-grid-row-styles ...
JS Fiddle Link http://jsfiddle.net/Xfvpu/1/ Having a perplexing issue with image rendering in Firefox compared to other browsers. The xhtml doctype is used with proper br / tag spacing, but the gap between two images on this specific document displays dif ...
I'm looking to add a hover animation to certain elements after a specific time, but I haven't been able to make it work correctly. Here's my attempted solution: CODE $(document).ready(function(){ function setHover() { $(' ...
<!Doctype html> <html> <head> <meta charset="utf-8" /> <title>testing code</title> </head> <body> <div style="float: left; width: 200px; height: 150px; background-color: ...
Hello there, I am completely new to the world of web development and particularly to using JavaScript and jQuery. I am interested in learning how to adjust the speed at which my Sidebar scrolls down as the user navigates through the page. Here is the jQue ...
A generous Stack Overflow user provided me with the code you see here and their JSFiddle can be accessed at http://jsfiddle.net/f18513hw/. The code functions properly in JSFiddle. I copied and pasted the code into my Textpad, saved it in my htdocs folder o ...
I'm currently working with a jQuery code that is functioning properly. $(window).load(function() { $('.menuBtn').click(function(e) { e.preventDefault(); (this.classList.contains('is-active') === true) ? this.c ...
I've been developing a portfolio website to showcase my design work, but I've encountered a minor issue. My goal is to have the images load in random positions and then make them draggable using Dragabilly. However, sometimes all the images end ...
Hey there! I've been trying to figure out how to highlight the current page in the header of my website. I'm using the include method to call the header on all pages, but I can't seem to figure out how to highlight the current page while sti ...
Are you working with Angular's ng-repeat to display a table with multiple rows? Do you wish to add an animation effect to specific cells when a user hovers over a row in the table? In the scenario outlined below, the goal is to have only certain cell ...
While using the ps_mainmenu top menu with the default Prestashop theme, I noticed that the drop-down menu only works for parent categories and not subcategories. You can see this in the attached image and HTML code from Chrome. I'm looking for a way t ...
Lately, I've been having issues with the gradient not displaying correctly in Webkit, although it seems to be working fine in Firefox. Could someone take a look and see if there's an error in how I set it up? Please disregard the images, as it&ap ...
JSBIN Is it possible to center the number row without using JavaScript to calculate its position, considering its parent has a fixed attribute? I've tried using CSS properties like margin and text-align with no success. Any suggestions on achieving t ...