Talk about code development, features, specific bugs, enhancements, patches, and similar 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 bugs, git, the repositories, 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. Please post issues with specific websites, extensions, etc. in the relevant boards for those topics.
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.
-
moonbat
- Knows the dark side
- Posts: 4981
- Joined: 2015-12-09, 15:45
-
Contact:
Unread 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;
}
-
Lootyhoof
- Themeist
- Posts: 1569
- Joined: 2012-02-09, 23:35
- Location: United Kingdom
Unread 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.
-
moonbat
- Knows the dark side
- Posts: 4981
- Joined: 2015-12-09, 15:45
-
Contact:
Unread post
by moonbat » 2020-06-28, 09:47
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
Unread 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.
-
moonbat
- Knows the dark side
- Posts: 4981
- Joined: 2015-12-09, 15:45
-
Contact:
Unread 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).
-
Lootyhoof
- Themeist
- Posts: 1569
- Joined: 2012-02-09, 23:35
- Location: United Kingdom
Unread 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.
-
moonbat
- Knows the dark side
- Posts: 4981
- Joined: 2015-12-09, 15:45
-
Contact:
Unread post
by moonbat » 2020-06-28, 11:04
Thanks, that helped! Now I can get to work on the about:permissions overlay.
-
JustOff
Unread 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.
-
moonbat
- Knows the dark side
- Posts: 4981
- Joined: 2015-12-09, 15:45
-
Contact:
Unread post
by moonbat » 2020-06-28, 11:28
Thanks, this is much easier.
-
JustOff
Unread 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.
-
moonbat
- Knows the dark side
- Posts: 4981
- Joined: 2015-12-09, 15:45
-
Contact:
Unread 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.
-
moonbat
- Knows the dark side
- Posts: 4981
- Joined: 2015-12-09, 15:45
-
Contact:
Unread 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?