johngraciliano / simplewhite

A minimal theme for Mozilla Firefox.
https://addons.mozilla.org/addon/simplewhitex/
Mozilla Public License 2.0
44 stars 4 forks source link

Recently there is a problem with my Simple White drop down menu text size #32

Open Jessicasyj opened 7 years ago

Jessicasyj commented 7 years ago

To whom this may concern,

I currently use MAC OS, FireFox 48.0.1 along with the Simple White theme & I notice a day ago, the address bar drop down menu fonts has all been made smaller, wondering if there is anyway to make the address bar drop down menu fonts bigger or as it was in the previous versions?

I already have a short sight vision & wear glasses by having the font size smaller than previous versions is current a big problem for me at the moment.

On the same day I also asked mozilla for help, they suggested me to add-on "Stylish" which can help fix the problem.

In a way it does, but afterwards in the address bar drop down menu after the titles of the websites the links addresses text are still too small. I tried hard to make it bigger, but no dice.

To provide a better explanation below are screen caps of my address bar drop down menu.

First is where all the text in the drop down menu bar are too small, without using "Stylish" Second, is after I added "Stylish" according to the advice mozilla told me to do & the titles of the websites the links addresses text are still too small.

1-screen shot 2016-08-25 at 11 12 08 pm 2-screen shot 2016-08-25 at 11 03 44 pm

Sorry, if my explanation on the matter is not clear, but help on this matter would be appreciated alot, Jessica

johngraciliano commented 7 years ago

Thank you for your feedback. I am near-sighted, perhaps in more than one way! (Seriously, I normally wear glasses.)

In my experience, Mozilla made the fonts in the suggestions larger when they changed the format from two lines to single line listings in Firefox 48. I purposely tried to keep the size closer to the size used in earlier versions of Firefox using _Simple White X_. I understand that may not be true for all platforms and if so I will need to fix it. There may be an extension or two that can help making the fonts larger. But you can change the size directly in your profile. I will explain how.

First, you should be aware you can apply changes to the styles used in web pages and Firefox's interface easily with _Stylish_. You may create a new style with the following code:

#urlbar {
    font-size: 14px; 
    /* The base size for the text in the location bar.
       The default is 12px in my platform. */
}
.autocomplete-richlistitem {
    font-size: 13px; 
    /* The base (smaller) size for the suggestions (for URLs, etc.).
       The default is 12px in my platform. */
}
.ac-title {
    font-size: 1.07em !important;
    /* The size for suggestion titles. The default is 1.06em, which 
       makes it proportionally larger than the basis size. */
}

Because this is processed after normal code, you may omit the !important clause. You may also omit all comments between and including the delimiters /* and */. Please take note there should be no space between the values and their units. Note the size for the suggestion titles is expressed in proportional units, which are taken over the base size for the suggestions (e.g., the size use for the URLs). You may state that size in other units, e.g., 14px or 3.7mm. I do not recommend using sizes over 16px for any of the values.

You may have Firefox use the code without using _Stylish_ by creating a chrome/userChrome.css file in your profile. For this, enter about:profiles in location bar the of Firefox 46 or later. In your working profile (probably default) press the Show Folder button for the Root Directory. Inside your profile's root directory open the folder named chrome (if it is missing, create it first!). In the chrome folder, create a simple text file named userChrome.css containing the code listed above, or append the code to the file if it exists. You may not omit the !important clause this time but you may omit all comments. That is because this code is processed before the code in the theme.

Please note the code will be in effect with other themes. However the code could be overridden by code from other extensions or themes (probably not the code with the !important clause). Note I presume your problem is not due to another extension.

Reference: UserChrome.css MozillaZine - Knowledge Base

P.S. There are differences in what I can see in my system and yours, e.g., there are font differences. The base/smaller size for the suggestions should be as large as the default size in the address bar. Your images suggest this is not true in your system. I need to make sure the theme does not apply other rules for using a mac instead of a Windows platform.

P.P.S. If the code fails for some reason. Please try including the !important clause after the font size values where it is missing.

P.P.P.S. I really need to see how the theme works in non Windows 8 platforms to fix any potential problems. Thank you for the images. Now I know I may need to fix the search glass, the Switch to Tab, and perhaps other icons in highlighted items (I may be missing to invert the images).

Jessicasyj commented 7 years ago

Hey,

Thank you for responding, below is my FireFox default theme screen cap after using Stylish Codes which everything in the drop down menu is nice & large.

1-defaulttheme-screen shot

However, switching to the Simple White X Theme with the use of Stylish codes this is how my drop down menu looks like below ..

4-simplewhitextheme-screen shot

I still can't fix the problem of the address websites text being way too small than the website titles texts. Plus in the Stylish Codes on your page & mine seems to be sort of different as seen below .. 2-stylishcode-screen shot1 3-stylishcode-screen shot1 png

Basically, I set both text to 16px, but still no dice.

As for your suggestion of making adjustment without using Stylish by creating chrome/userChrome.css , I do not want to mess with my computer codes or any codes too much, so I'm not going to proceed on that stage.

Anyways, I appreciate all your help & support, I've been using your theme for years now before yours I used the mx4 & mx3 after FireFox said it is not compatible with the current FireFox version I am using.

The mx3, mx4 & your theme were my favorite the look was really clean & all the tabs were compact which allow me more space to work with. I am still shock how FireFox would suddenly decide to make a move like this by making all the texts small tho?

I posted my problem on the mozilla support page & a technician there told me people were complaining to mozilla that the texts were too big that's why they made it smaller.

Anyways, as of now, I'm just using the FireFox default theme for the time being.

Thank you once again :)

johngraciliano commented 7 years ago

I have to check on this more closely. Unfortunately I cannot stay connected to the WWW at this moment nor in the next few days so I cannot provide a solution for you. Yet I will be certain to look review this and get back to you within a week (sorry for asking for the hardest thing: Patience!).
Nevertheless, I noticed the lines in the code about font-size do not have the clause !important after the measurement. You can try inserting it before the semicolon, it is a wild guess.
Also, please just answer me this: In Firefox with _Simple White X_ and no additional code, is the smaller size in the suggestions smaller than the default size in the location bar? It should be the same, or at least that is what I wanted in the theme.

suishouen commented 7 years ago

I don't know this issue is OS X specific or not, because browser-common.css line 3174 sets down:

.ac-url-text,
.ac-action-text {
  font-size: 1em;
  color: -moz-nativehyperlinktext;
}

I tested this only with userChrome.css using Firefox 50.0a1 on OS X El Capitan, but adding the following seems to fix this issue.

Please try and test using Stylish.

.autocomplete-richlistitem,
.ac-url-text,
.ac-action-text {
  font-size: 16px !important;
}
suishouen commented 7 years ago

@johngraciliano:

I've tested this on Firefox 48.02, Firefox 49.0b9, Firefox 50.0a2 and Firefox 51.0a1 with Simple White X Version 2.2b18.x1.23 using userChrome.css noted above.

The above code works. I hope you find it informative.

Best Regards,

Jessicasyj commented 7 years ago

@johngraciliano

Sorry for my late respond, to answer your questions you posted to me 7 days ago ..

  1. I added the clause !important after the measurement before the semicolon on the Simple White Styles Code. The results are as seen in the pictures below.

2016_simplewhite-screenshot1-codes 2016_simplewhite-dropmenuscreenshot2-codes

The result is as in the picture below

2016_simplewhite-dropmenuscreenshot-codes

Still small, no improvements really.

  1. On answering your second question in Firefox with Simple White X and no additional code, is the smaller size in the suggestions smaller than the default size in the location bar?

2016_simplewhite-dropmenuscreenshot-nocodes

They seem the same to me, the only difference I notice is when I use codes & the drop down menu titles of the websites are larger, but the details after them are not.

Please be advice that my knowledge in coding is limited, so I might not be able to give you a technical answer or perform certain tasks correctly.

Best Regards,

suishouen commented 7 years ago

@Jessicasyj

Try this using Stylish.

.autocomplete-richlistitem,
.ac-url-text,
.ac-action-text {
  font-size: 16px !important;
}
johngraciliano commented 7 years ago

@suishouen: Thanks for the find! Yes, the lines of code you cited could bring up the problem (depending on other factors). And it would be especially hard for me to trace since the fonts are different in my system and thus whatever 1em means is to be found out when you have the font. em units are relative, which may give an advantage at certain moments, yet perhaps in may be better to use something as ex since that unit is more related to the height of the font. It is hard to work for different platforms this way. I am really concerned about this problem but yet I am not sure I want to set font-size: 16px in browser-common.css. I believe I should probably set font-size: inherit or eliminate the lines completely since what I want is to make sure those parts of the presentation use the same font size used in the location bar. I have not tried that change yet in my platform but I will. Please let me know what you find setting the value to inherit instead of 16px.

suishouen commented 7 years ago

@johngraciliano:

but yet I am not sure I want to set font-size: 16px

Jessicasyj wants 16px, so I set it so.

Please let me know what you find setting the value to inherit instead of 16px.

I tested, but the value "inherit" seems to be small. It's better to set "1.06em" or "1.07em" instead.

Attaching Screenshots (Sorry for using my private SimpleWhite):

Inherit inherit

1.06em 1 06em

13px 13px

suishouen commented 7 years ago

Just for reference I'm attaching using default theme screenshot:

default

I hope you find it informative. Best Regards.

Jessicasyj commented 7 years ago

@suishouen @johngraciliano

Hey thanks for the advice people I follow suishouen advice on inserting the following styles code below

.autocomplete-richlistitem, .ac-url-text, .ac-action-text { font-size: 16px !important; }

As a result, everything is now the way it was before nice & big fonts.

simplewhite-screenshot 2016-09-10

Thanks for all your help guys :) Regards

johngraciliano commented 7 years ago

@suishouen: I must be clear: I am trying to keep the base font size in the suggestion box to 12px, which is the same size used by the _default_ in Firefox. I am also trying to keep the larger font size for the suggestions titles to 13px and this is smaller than the 14px used by _default_ in the newer Firefox but about the same size used in Firefox 46 and earlier. I want to keep the size small to give a chance to fit longer page titles while using single line suggestions. I see you prefer 13px as your basic size since that appears to be the size in your location line. I actually considered using font size 11px, which that appears to be the smaller font size in @Jessicasyj first image. But I find myselft often with my face too close to my computer screen.

I added a test version that may be downloaded from the release section. Please try it. The basic size should be set now by the line font: message-box. This should set the size to 12px (or whatever the system decides is convenient). The code now sets font-size: calc(100% + 1px) for the titles* in the suggestions to use exactly 13px if the URL size is 12px (I am avoiding to use 1.06em because em units may be problematic). _default_ sets font the size for the URL explicitly to 12px and the font size for the titles to 14px. The code .ac-title {font-size: 14px;} may be added with _Stylish_ so _Simple White X_ uses the same size as _default_ in the new Firefox. Avoiding that code, the alternative code .autocomplete-richlistitem {font-size: 15px;} (or an alternative size) will set the URLs' size to 15px (or the alternative size) and the titles' size to 16px (or 1px larger than the alternative size).

*The theme also raises the titles 1px to align them properly with the URLs.

suishouen commented 7 years ago

@johngraciliano Attaching the screenshot with a test version ( v2.2b18.x1.23+S ).

screenshot

I hope you find it informative. Best Regards.

johngraciliano commented 7 years ago

@suishouen: I realized I did not remove the lines of code I intended. Also, the image you provide sets me back to the begining because the smaller font appears to be 11px and the larger font 12px as it was in the first image from @Jessicasyj. However now I think the problem is that the basic font used in the OS-X platform is 11px and not 12px as I believed, and that makes 1em = 11px. The size of the text in the tabs reinforces that belief.

I made a new test release. It includes .autocomplete-richlistitem {font-size: 12px;} in a section of code used only for OS-X. In platforms where -moz-windows-default-theme fails, the titles are 2px larger than the basic size used in the suggestions.* Thus under OS-X the font sizes used in the suggestions with _Simple White X_ should be the same as those used with _default_.

Also for platforms where -moz-windows-default-theme fails, this release changes special icons when they appear in the highlighted entry. For example, the search glass will share the highlightText color with the text in a highlighted line. The bookmark icon will remain blue even when the item is highlighted, but it now has a glow effect that should add sufficient contrast to make it distinct from any background.

The changes included should only affect Firefox 48 and later. However for earlier versions of Firefox the font size for the suggested page titles will be a fraction of a pixel larger and that could have visible effects under some circumstances, e.g., with very high resolution screens. The changes regarding special icons should become available for earlier versions of Firefox in a future release.

@Jessicasyj: Please try adding .autocomplete-richlistitem {font-size: 14px;} and no additional code with _Stylish_. That will should enlarge the suggested URLs to 14px and the titles to 16px, which may be sufficient for you. As I stated in my first response, you may also want to add the code #urlbar {font-size: 14px;} to enlarge the text in the address bar.

@suishouen: I am a bit puzzled because your last image shows no border or shadow for the suggestions panel. I hope there is a good reason for that and I have not broken something by accident.

P.S. I included some changes that affect earlier Firefox, e.g., Firefox 45 ESR. The theme should now make the Search with ... text smaller and the search text for keyword searches larger. Also, the tag labels will be gray unless highlighted. These changes may contrast with _default_.

*I am keeping the difference of 1px for the special case of Windows with the default theme. No other changes should have in effect for this platform.

suishouen commented 7 years ago

@johngraciliano Attaching the screenshot with a new test version ( v2.2b18.x1.23+S ) on Firefox 51.0a1.

screenshot2

Best Regards.

johngraciliano commented 7 years ago

Latest is v2.2b18.x1.23+S1 perhaps I linked it wrongly....

suishouen commented 7 years ago

Just to make sure: attaching the screenshot again.

screenshot

Best Regards.

suishouen commented 7 years ago

@johngraciliano

@suishouen: I am a bit puzzled because your last image shows no border or shadow for the suggestions panel. I hope there is a good reason for that and I have not broken something by accident.

I'm using Firefox 51.0a (latest-mozilla-central). Suggestions panel width has been changed to window width. So it seems to show no border or shadow, I think.

johngraciliano commented 7 years ago

@suishouen: I see. I also use the latest Nightly. Whatever was changed for OS-X did not make it into the Windows code I use or does not have an effect in my platform. It is yet something more for me to be concerned about!

From the last image you posted, it is clear to me 100% + 2px = 14px in my latest code, as I expect. However, after removing any code that may change the font size for the URL it still looks as if it is 11px. I find there are some lines I could not understand that state:

.autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
.autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
{
  color: GrayText;
  font-size: smaller;
}

Perhaps that is related to the problem but I do not know. For now, I am adding

  .ac-tags, .ac-separator, .ac-url, .ac-action {
    font-size: inherit;
  }

which should technically be the same as setting the value to 1em or 100%. If that works I would be surprised, yet it seem to work in a sample image you posted. The test theme is here.

Perhaps you are not aware, you may install DOM Inspector and Element Inspector as tools that will allow you to inspect Firefox's interface directly (e.g., read the value for the font-size for .ac-url). Please try them if you have not. This tool will also show the rules that are affecting the elements so the problem could be more easily diagnosed. Be aware the elements are nested so I may be missing things, e.g., there is .ac-url-text inside a .ac-text-overflow-container inside .ac-url! The font size may change during the nesting!

EXTRA: As an additional experiment please try adding .autocomplete-richlistitem {font-size: 14px;} (and no other code) with _Stylish_ and see if that changes the size of the smaller print (as I would expect).


In order to simplify some of my code I need help from users from platforms different to Windows. I need anyone to create an html file with the following code and open it in Firefox and report back what they see. If it is possible, in different versions of Firefox, because I am trying to support versions as early as Firefox 37, so my code should work there. The code follows:

<html>
<style>
  #Question {
    background-color: yellow;
  }
@media not all and (-moz-windows-theme), (-moz-windows-theme) {
  #Question {
    background-color: lightGreen;
  }
}
  #SecondQuestion {
    background-color: yellow;
  }
@media not all and (-moz-os-version), (-moz-os-version) {
  #SecondQuestion {
    background-color: lightBlue;
  }
}
  #ThirdQuestion {
    background-color: yellow;
  }
@media not all and (-moz-mac-lion-theme), (-moz-mac-lion-theme) {
  #ThirdQuestion {
    background-color: pink;
  }
}
  #FourthQuestion {
    background-color: yellow;
  }
@media not all and (-moz-windows-default-theme), (-moz-windows-default-theme) {
  #FourthQuestion {
    background-color: plum;
  }
}
  #ExtraQuestion {
    background-color: lightGray;
  }
@media not all and (-moz-undefined-test), (-moz-undefined-test) {
  #ExtraQuestion {
    background-color: yellow;
  }
}
</style>
<body>
  <span id="Question">1. What color is the background for this question?</span><br/>
  <span id="SecondQuestion">2. What color is the background for this second question?</span></br>
  <span id="ThirdQuestion">3. What color is the background for this third question?</span></br>
  <span id="FourthQuestion">4. What color is the background for this fourth question?</span></br></br>
  <span id="ExtraQuestion">X. What color is the background for this final question?</span>
</body>
</html>

It may seem like a silly test, but the documentation about media tests I have read seems a bit missleading, incorrect, or confusing to me and I need to be really certain about media properties being true, false, and undefined.

suishouen commented 7 years ago

@johngraciliano

I'm attaching two screnshots.

1. Using "Third Special Test for #32" and without ".autocomplete-richlistitem {font-size: 14px;}"

screenshot1

2. Using "Third Special Test for #32" and with ".autocomplete-richlistitem {font-size: 14px;}"

screenshot2

Best regards.

johngraciliano commented 7 years ago

Can you add

.ac-url-text,
.ac-action-text {
  font-size: inherit;
}

with _Stylish_?

suishouen commented 7 years ago

@johngraciliano

Can you add

.ac-url-text, .ac-action-text { font-size: inherit; } with Stylish?

I'm not using Stylish, so adding to userChrome.css as below:

.ac-url-text,
.ac-action-text {
  font-size: inherit !important;
}

Screenshot is here. screenshot

johngraciliano commented 7 years ago

That actually looks right! I will have some new test file for tomorrow. I can not stay connected anymore...

johngraciliano commented 7 years ago

I finally realized the root of this OS-X specific problem. I found whitefox\ostarget\darwin\browser.css has:

.tabbrowser-tab,
.tabs-newtab-button,
.ac-url-text,
.ac-action-text {
  font: message-box;
}

The file chrome://browser/skin/browser-common.css is processed by an @import statement in '...\darwin\browser.css` so all its contents is processed first. So inserting:

.ac-url-text,
.ac-action-text {
  font-size: 1em;
}

or 12px, or inherit, or 100px in browser-common.css becomes meaningless unless I insert !important* or make the selectors more specific.

I am placing a release with two test theme files. I am hoping both of them work properly. Please pay attention the default site, swicth to tab, search glass, tag, and bookmark icons should change color when a suggestion becomes highilghted in Firefox 48 and later for all platforms not using one of the default Windows themes. That correction is not yet available for earlier Firefox.

Now I am curious if font: message-box sets a font size for Firefox 48 different to the one set for Firefox 47 or earlier. I believe that would be reflected as a change in the size of the text in the tabs (unless there is a rule that overrides the setting in browser.css). Indeed I never got an image of the suggestion box with the current release of Simple White X 2.2b18.x1.23** (or the original _Simple White 2.2.10_) in Firefox 47 or earlier, or the current Firefox ESR 45.3.0, within OS-X. I cannot find how the URL font size could be smaller than it was without a change in the semantics for font: message-box (possibly for not researching hard enough). I however I agree the fonts by _Simple White X_ are smaller than by _default_ in Firefox 48 because I made it that way. But I need images from earlier Firefox with released (not test) Simple White X.

Nevertheless, I am changing the size for the fonts for all platforms not using one of the default Windows themes. Please note the line spacing by _Simple White X_ will remain smaller than by _default_ for all platforms.

*I avoid inserting !important in production code as if it meant pressing the red button to start a nuclear war.

If there was a change in the tab's font size in Firefox 48** from earlier versions then I may want to reset it 12px (if that was the previous size).

suishouen commented 7 years ago

@johngraciliano

Sorry for testing with Firefox 51. I always set search suggestion off, so I hope this will become helpful in fixing this issue.

This time I set "Always use private browsing mode" off for reference #33. Anyway, I'm attaching screenshots with Fourth Special Test for #32.

screenshot1

screenshot2

Best Regards.

johngraciliano commented 7 years ago

[@suishouen: I am working with the assumption there is no other code affecting the issue (from userChrome.css or _Stylish_) in the images you provide.]

If the issue is stated as:

_"The page suggestions in the drop panel by the location bar use fonts that are too small or smaller than those in the _default theme in OS-X."

then the last test files solve the issue (and improve the special icons behavior in Firefox 48 and later). As I wrote earlier, the line spacing is tighter in my design (which makes the box narrower and also changes the placement for special icons!). Please correct me if what I stated is wrong.

The last image also reveals the panel border and shadow is missing in Firefox 51 (I hope it is not missing in Firefox 50) with OS-X. Please verify there is nothing else affecting this behavior and open a separate issue for that. I will soon (within a week!) make a new release to close this issue as stated in this comment.


Anyone please: I still need images of the panel as it looks with _Simple White X_ in Firefox 47 and/or earlier and OS-X. Also, please post reference images with the _default_ theme. Images showing the tabs are also welcome.

suishouen commented 7 years ago

@johngraciliano

I made sure that the panel border or shadow is missing in Firefox 51, and I confirm that border or shadow is NOT missing.

I took a screenshot in a different way, and attach:

screenshot

suishouen commented 7 years ago

@johngraciliano

P.S.

[@suishouen: I am working with the assumption there is no other code affecting the issue (from userChrome.css or Stylish) in the images you provide.]

I took all screenshots without userChrome.css or using Stylish. Of course I used userChrome.css when you suggest to test.

Best Regard.

suishouen commented 7 years ago

@johngraciliano

To show my respect for your effort:

Screenshot of Firefox47.01 firefox47 01

Screenshot of Firefox48.02 firefox48 02

Screenshot of Firefox49.0b9 firefox49 0b9

Screenshot of Firefox50.0a2 firefox50 0a2

Screenshot of Firefox51.0a1 firefox51 0a1

I hope this will be helpful to you. Best Regards.

johngraciliano commented 7 years ago

@suishouen: Thank you for the images. I take they are with the last test file. I added another that should fix the special icons when they are part of the highlighted suggestion for Firefox 47 and earlier. It has one correction for right to left (RTL) locales in those versions of Firefox. It has a few minor adjustments too: It increases the height of the boxes by one (1) pixel so the text does not look too close together in the cases covered by the text size change. If you can, please try it out. I hope you can just say everything is OK with no need of additional images. I am especially glad there was no real issue about the shadow that surrounds the panel. However I am extremely curious as for what code was causing it, because I am unable to change the shadow of the panel in my platform. Whatever was your accident could give me a lot of information. You can also verify that both font sizes are changed by setting:

.autocomplete-richlistitem {
    font-size: 16px !important; /* To control the text size */
    min-height: 32px !important; /* To increase the spacing */
}
suishouen commented 7 years ago

@johngraciliano

As I wrote earlier, I always set search suggestion off. You wrote above:

If the issue is stated as: "The page suggestions in the drop panel by the location bar use fonts that are too small or smaller than those in the default theme in OS-X."

Then everything seems to be O.K. for me