How to get rid of iframe border in toolbar?

Hi! :sweat_smile: Iā€™m brushing up on my js/html/css by making a Firefox addon called ā€œSearchalotā€. It makes a toolbar with a row of configurable search-boxes.

As you can see it looked seamless enough in the Developer Edition of Firefox with the black theme (aside: I tried to find a way for it to automatically clone the style of the native searchbox, to no avail), but in the regular edition there are borders around the iframe and it looks bad

Is there any way to get rid of this border? Any help is much appreciated.

Addendum: The border happily isnā€™t there in mac OS X.

Have you used the Browser Toolbox to inspect the iframe? You should be able to see whatā€™s causing the border.

Sure, itā€™s coming from the sdk-generated ā€œinner-toolbar-searchalotdev-searchalot-toolbarā€ thatā€™s a child of navigator-toolbox (which contains the menu bar, tabs bar, location bar and bookmarks bar). (from inspector)

<toolbox id="navigator-toolbox" ...>
    <toolbar id="toolbar-menubar" ...>
    <toolbar id="TabsToolbar" ...>
    ...
    <toolbar xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="toolbar-searchalotdev-searchalot-toolbar" collapsed="false" toolbarname="Searchalot Toolbar" pack="end" customizable="false" style="padding: 2px 0; max-height: 40px;" mode="icons" iconsize="small" context="toolbar-context-menu" class="chromeclass-toolbar">
        <label value="Searchalot Toolbar" collapsed="true"/>
            <toolbar id="inner-toolbar-searchalotdev-searchalot-toolbar" defaultset="frame-searchalotdev---frame-html" customizable="true" style="-moz-appearance: none; overflow: hidden" mode="icons" iconsize="small" context="toolbar-context-menu" flex="1" class="customization-target" currentset="frame-searchalotdev---frame-html">
                <toolbaritem id="frame-searchalotdev---frame-html" flex="2" cui-areatype="toolbar">
                    <iframe src="resource://gre/modules/commonjs/sdk/ui/frame/view.html#PGlmcmFtZSB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCIgaWQ9ImZyYW1lLXNlYXJjaGFsb3RkZXYtLS1mcmFtZS1odG1sIiBzcmM9InJlc291cmNlOi8vc2VhcmNoYWxvdGRldi9kYXRhL2ZyYW1lLmh0bWwiIHNlYW1sZXNzPSJzZWFtbGVzcyIgc2FuZGJveD0iYWxsb3ctc2NyaXB0cyIgc2Nyb2xsaW5nPSJubyIgZGF0YS1pcy1zZGstaW5uZXItZnJhbWU9InRydWUiIHN0eWxlPSJib3JkZXI6bm9uZTtwb3NpdGlvbjphYnNvbHV0ZTt3aWR0aDoxMDAlO3RvcDogMDtsZWZ0OiAwO292ZXJmbG93OiBoaWRkZW4iPjwvaWZyYW1lPg==" id="outer-frame-searchalotdev---frame-html" data-is-sdk-outer-frame="true" type="content" transparent="true" flex="2" style="overflow: hidden;" scrolling="no" disablehistory="true" seamless="seamless"/>                        
                </toolbaritem>
            </toolbar>
        <toolbarbutton id="close-toolbar-searchalotdev-searchalot-toolbar" class="close-icon" customizable="false"/>
    </toolbar>
    ...
</toolbox>

That toolbar is automatically made in the main addon js via (index.js)

var { Frame } = require("sdk/ui/frame");
var frame = new Frame({
	url: "./frame.html"
});
var { Toolbar } = require("sdk/ui/toolbar");
Toolbar({
	title: "Searchalot Toolbar",
	items: [frame]
});

It contains the iframes and such and is automatically styled by chrome://global/skin/toolbar.css

toolbar {
	min-width: 1px;
	min-height: 19px;
	border-top: 1px solid ThreeDHighlight;
	border-bottom: 1px solid ThreeDShadow;
}

But how I can specify CSS properties for that toolbar I have no idea. Do I have to make my own XUL overlay instead of using sdk/ui/toolbar?

Aside: It looks pretty much perfect on Mac without any modifications :sweat_smile: I donā€™t have Windows 8/10 around or Linux to check that though.

While it propably falls into the ā€œhackā€ category, this should work:

const Windows = require('sdk/windows').browserWindows;
const { viewFor, } = require('sdk/view/core');
const { Cu, } = require('chrome');
Cu.importGlobalProperties([ 'btoa', ]); /* global btoa */ const toBase64 = btoa;

Windows.on('open', window => {
	const { document, } = viewFor(window);
	document.insertBefore(
		document.createProcessingInstruction('xml-stylesheet', 'href="data:text/css;base64,'+ toBase64(`
			#inner-toolbar-searchalotdev-searchalot-toolbar {
				border: none !important; /* or whatever you like */
			}
		`)),
		document.firstChild
	);
});

This extension of mine includes an example which also unloads the styles:

I wonder why itā€™s there in the first place. Itā€™s only there in Windows and dates back to at least 2007. I donā€™t think anything actually uses that border property. Maybe Iā€™ll file a bug though Iā€™ve never done that before and donā€™t know what Iā€™m doing!

https://dxr.mozilla.org/mozilla-central/source/toolkit/themes/windows/global/toolbar.css

Followup: My border bugā€™s been approved and fixed and will be released in April with Firefox 53. https://bugzilla.mozilla.org/show_bug.cgi?id=1043423