Textbox in overlay is invisible, CSS is ignored

[moonbat]

Trying to overlay the PageInfo window for a new extension. I've got the UI to work except for a textbox that is practically invisible. Setting CSS background-color doesn't work. What could be the problem?

This is my overlay - the textbox in question is pplus-pinfo-txtuseragent, and neither adding CSS directly here, nor in the referenced overlay.css works.
permList is the original vBox to which I'm adding an additional entry.

Code: Select all

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/"?>
<?xml-stylesheet type="text/css" href="chrome://permissionsplus/skin/overlay.css"?>
<!DOCTYPE overlay SYSTEM "chrome://permissionsplus/locale/permissionsplus.dtd" >
<overlay id="pplus-pinfo-overlay"
	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
	<script type="application/x-javascript"
		src="chrome://permissionsplus/content/permissionsplus.js" />
	<stringbundleset>
		<stringbundle id="pplus-pinfo-strings"
			src="chrome://permissionsplus/locale/permissionsplus.properties" />
	</stringbundleset>
	<vbox id="permList" flex="1">
		<vbox id="permUseragentRow" class="permission">
			<hbox id="permissionplus-user-agent-override-pref-item"
				class="pref-item" align="center" insertafter="plugins-pref-item">
				<label class="permissionLabel" value="Override user agent" />
			</hbox>
			<hbox>
				<checkbox id="pplus-pinfo-chkuseragent" label="&permissionsplus_chkuseragent;"/>
				<spacer flex="1"/>
				<textbox id="pplus-pinfo-txtuseragent" style="background-color:white;"/>
				<button id="pplus-pinfo-btnsave" label="&permissionsplus_btnuseragent_save;"/>
				<button id="pplus-pinfo-btnreset" label="&permissionsplus_btnuseragent_reset;"/>
			</hbox>
		</vbox>
	</vbox>
</overlay>

This is overlay.css

Code: Select all

#permissionsplus-txtuseragent{
	background-color:white;
}

[Lootyhoof]

You could try adding -moz-appearance: none; which will stop it getting styling from the system. Just be sure to style the border/text too else it might look weird.

Also, is there a reason your CSS selector is #permissionsplus-txtuseragent but the actual ID is #pplus-pinfo-txtuseragent? If that's your ID then you should be styling THAT from your CSS. Then you can remove that inline styling.

[moonbat]

moz appearance didn't work
Didn't notice the identifier mismatch while pasting the code in the question here, I've since removed the inline style but it makes no difference either way. Very frustrating because the extension is functionally ready where pageinfo is concerned (lets you override user agent from the page info permissions tab, I need to apply the same or similar overlay to about:permissions. Funnily there the textbox displays fine).

Relevant XUL now:

Code: Select all

	<vbox id="permList" flex="1">
		<vbox id="permUseragentRow" class="permission">
			<hbox id="permissionplus-user-agent-override-pref-item"
				class="pref-item" align="center" insertafter="plugins-pref-item">
				<label class="permissionLabel" value="Override user agent" />
			</hbox>
			<hbox>
				<checkbox id="pplus-pinfo-chkuseragent" label="&permissionsplus_chkuseragent;"/>
				<spacer flex="1"/>
				<textbox id="pplus-pinfo-txtuseragent" class="fieldValue"/>
				<button id="pplus-pinfo-btnsave" label="&permissionsplus_btnuseragent_save;"/>
				<button id="pplus-pinfo-btnreset" label="&permissionsplus_btnuseragent_reset;"/>
			</hbox>
		</vbox>
	</vbox>

and relevant CSS -

Code: Select all

#pplus-pinfo-txtuseragent{
	-moz-appearance: none;
	background-color:white;
}

Removing class="fieldValue" from the textfield makes no difference either. I saw that used elsewhere on pageinfo and thought maybe it is a common class for conformity.

[JustOff]

Very frustrating because the extension is functionally ready

I think if you could share a working prototype, it would be easier to understand what's wrong.

[moonbat]

Here's the XPI.
To use it, open Tools-Page Info-Permissions on any site and it will have an additional section at the bottom to enter a user agent. There is an invisible textbox there that becomes enabled when you click 'Override user agent'. Best is to try it on a site like Google that already has a default UA override.
Save lets you save any changes you make, while Reset will revert to default (or delete it if there's no default).

[Lootyhoof]

You're being foiled by this line:

Code: Select all

textbox {
  background: transparent !important;
  border: none;
  padding: 0px;
  margin-top: 1px;
  -moz-appearance: none;
}

To override this you will need to set !important on your own background styling. This will make the text invisible on dark system themes though, so make sure to set a color for the text, and also set a border too so it looks more like a textbox.

[moonbat]

Thanks, that helped! Now I can get to work on the about:permissions overlay.

[JustOff]

I would suggest, as an alternative, just use this style:

Code: Select all

#pplus-pinfo-txtuseragent {
	-moz-appearance: listbox;
}

This seems like the easiest and also theme-independent solution.

[moonbat]

Thanks, this is much easier.

[JustOff]

This seems like the easiest and also theme-independent solution.

I apologize, I should have checked it myself before posting. Unfortunately, for a not entirely clear reason, this does not work as expected with dark themes. You still need to additionally specify the text color, i.e.:

Code: Select all

#pplus-pinfo-txtuseragent {
	-moz-appearance: listbox;
	color: black;
}

This seems to work well with both light and dark themes that I checked.

[moonbat]

This seems to work well with both light and dark themes that I checked.

Thanks again
I verified it with a dark theme on my dev profile.

[moonbat]

You're being foiled by this line:

Code: Select all

textbox {
  background: transparent !important;
  border: none;
  padding: 0px;
  margin-top: 1px;
  -moz-appearance: none;
}

To override this you will need to set !important on your own background styling. This will make the text invisible on dark system themes though, so make sure to set a color for the text, and also set a border too so it looks more like a textbox.

I've submitted the extension on Phoebus..could you or someone else from the addons team review/publish it please?