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 I donāt have Windows 8/10 around or Linux to check that though.