Textbox in overlay is invisible, CSS is ignored

Talk about code development, features, specific bugzilla bugs, enhancements, patches, and other highly technical things.
Forum rules
Please keep everything here strictly on-topic.
This board is meant for Pale Moon source code development related subjects only like code snippets, patches, specific referenced Bugzilla bugs, mercurial, etc.

This is not for tech support! Please do not post tech support questions in the "Development" board!
Please make sure not to use this board for support questions. Most "bug reports" do not belong in this board and should initially be posted in Community Support or other relevant support boards.

Please keep things on-topic as this forum will be used for reference for Pale Moon development. Expect topics that aren't relevant as such to be moved or deleted.
Post Reply
User avatar
moonbat
Board Warrior
Board Warrior
Posts: 1605
Joined: 2015-12-09, 15:45

Textbox in overlay is invisible, CSS is ignored

Post by moonbat » 2020-06-27, 17:34

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;
}
"One hosts to look them up, one DNS to find them and in the darkness BIND them."

Linux Mint 20 Xfce x64 on HP i5 laptop with 12 GB RAM, always latest versions of PM & Basilisk unless specified.

User avatar
Lootyhoof
Themeist
Themeist
Posts: 1431
Joined: 2012-02-09, 23:35
Location: United Kingdom

Re: Textbox in overlay is invisible, CSS is ignored

Post by Lootyhoof » 2020-06-28, 09:31

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.

User avatar
moonbat
Board Warrior
Board Warrior
Posts: 1605
Joined: 2015-12-09, 15:45

Re: Textbox in overlay is invisible, CSS is ignored

Post by moonbat » 2020-06-28, 09:47

moz appearance didn't work :thumbdown:
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.
"One hosts to look them up, one DNS to find them and in the darkness BIND them."

Linux Mint 20 Xfce x64 on HP i5 laptop with 12 GB RAM, always latest versions of PM & Basilisk unless specified.

User avatar
JustOff
Localization Coordinator
Localization Coordinator
Posts: 1964
Joined: 2015-09-03, 19:47
Location: UA
Contact:

Re: Textbox in overlay is invisible, CSS is ignored

Post by JustOff » 2020-06-28, 10:09

moonbat wrote:
2020-06-28, 09:47
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.
Here are the add-ons I made in a spare time. That was fun!

User avatar
moonbat
Board Warrior
Board Warrior
Posts: 1605
Joined: 2015-12-09, 15:45

Re: Textbox in overlay is invisible, CSS is ignored

Post by moonbat » 2020-06-28, 10:23

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).
"One hosts to look them up, one DNS to find them and in the darkness BIND them."

Linux Mint 20 Xfce x64 on HP i5 laptop with 12 GB RAM, always latest versions of PM & Basilisk unless specified.

User avatar
Lootyhoof
Themeist
Themeist
Posts: 1431
Joined: 2012-02-09, 23:35
Location: United Kingdom

Re: Textbox in overlay is invisible, CSS is ignored

Post by Lootyhoof » 2020-06-28, 10:39

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.

User avatar
moonbat
Board Warrior
Board Warrior
Posts: 1605
Joined: 2015-12-09, 15:45

Re: Textbox in overlay is invisible, CSS is ignored

Post by moonbat » 2020-06-28, 11:04

Thanks, that helped! Now I can get to work on the about:permissions overlay.
"One hosts to look them up, one DNS to find them and in the darkness BIND them."

Linux Mint 20 Xfce x64 on HP i5 laptop with 12 GB RAM, always latest versions of PM & Basilisk unless specified.

User avatar
JustOff
Localization Coordinator
Localization Coordinator
Posts: 1964
Joined: 2015-09-03, 19:47
Location: UA
Contact:

Re: Textbox in overlay is invisible, CSS is ignored

Post by JustOff » 2020-06-28, 11:11

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.
Here are the add-ons I made in a spare time. That was fun!

User avatar
moonbat
Board Warrior
Board Warrior
Posts: 1605
Joined: 2015-12-09, 15:45

Re: Textbox in overlay is invisible, CSS is ignored

Post by moonbat » 2020-06-28, 11:28

Thanks, this is much easier.
"One hosts to look them up, one DNS to find them and in the darkness BIND them."

Linux Mint 20 Xfce x64 on HP i5 laptop with 12 GB RAM, always latest versions of PM & Basilisk unless specified.

User avatar
JustOff
Localization Coordinator
Localization Coordinator
Posts: 1964
Joined: 2015-09-03, 19:47
Location: UA
Contact:

Re: Textbox in overlay is invisible, CSS is ignored

Post by JustOff » 2020-06-28, 12:50

JustOff wrote:
2020-06-28, 11:11
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.
Here are the add-ons I made in a spare time. That was fun!

User avatar
moonbat
Board Warrior
Board Warrior
Posts: 1605
Joined: 2015-12-09, 15:45

Re: Textbox in overlay is invisible, CSS is ignored

Post by moonbat » 2020-06-28, 14:16

JustOff wrote:
2020-06-28, 12:50
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.
"One hosts to look them up, one DNS to find them and in the darkness BIND them."

Linux Mint 20 Xfce x64 on HP i5 laptop with 12 GB RAM, always latest versions of PM & Basilisk unless specified.

User avatar
moonbat
Board Warrior
Board Warrior
Posts: 1605
Joined: 2015-12-09, 15:45

Re: Textbox in overlay is invisible, CSS is ignored

Post by moonbat » 2020-06-29, 08:08

Lootyhoof wrote:
2020-06-28, 10:39
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?
"One hosts to look them up, one DNS to find them and in the darkness BIND them."

Linux Mint 20 Xfce x64 on HP i5 laptop with 12 GB RAM, always latest versions of PM & Basilisk unless specified.

Post Reply