Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

General discussions, feedback, questions belong here (v1, v2 -outdated- use v3) #3

Closed
Aris-t2 opened this issue Oct 8, 2017 · 211 comments

Comments

@Aris-t2
Copy link
Owner

Aris-t2 commented Oct 8, 2017

Instead of opening new "issues" for general talk we can use this area for discussions, feedback and questions. Open new "issues" for real bugs and problems.

Trying to makes CSS code Firefox 57+ ready?
Remove all @namespace references. They are the reason, if your code refuses to work.

Application/hamburger button in tabs toolbar?
Look here: #46

Things this project will not target/recreate

  • curved tabs
  • old complete themes
  • ...

Things not possible with CSS

  • more toolbars like add-on/status bar (CSS can not create new toolbars)
    • displaying full sized status popup below window content is possible
    • moving bookmarks toolbar to windows bottom is possible
  • new buttons (CSS can not create new buttons)
  • additional menuitems (CSS can not create new items)
  • old search (some things are not compatible to Fx 57+)
  • custom/new/different functions for buttons/menuitems/menus
  • activity indicator
  • preferences window
  • additional location bar
  • favicon in location bar
  • moving menubar items to a different toolbar
  • restart button
  • ... many more
@reuk334
Copy link

reuk334 commented Oct 9, 2017

Can I possible modify about:(...) pages with userContent.css file?

@Acid-Crash
Copy link

Yes, guess this is doable. It would be great if Aris has plans to add such functionality in future.
To be precise I'm interested in about:addons tweaks:

  • always view recent updates
    #category-recentUpdates[disabled] { opacity: 1 !important; min-height: 48px !important; }
  • compact view for the page

@Aris-t2
Copy link
Owner Author

Aris-t2 commented Oct 9, 2017

I was under the impression about:... pages were not changeable in Firefox 57+, but it seems I was wrong.
Thanks for the info.

@Acid-Crash
Copy link

Happy to Help, Aris
I had some issues with them too.
Guess it was because i used @namespace url(http://www.w3.org/1999/xhtml);
instead of @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

Anyways currently this one works fine for me.

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url-prefix(chrome://mozapps/content/extensions/extensions.xul), url-prefix(about:addons) {

#category-recentUpdates[disabled] {
    opacity: 1 !important;
    min-height: 48px !important;
}
#category-discover {visibility: collapse !important;}
.addon {counter-increment: addoncount !important; content: counter(addoncount) !important;}
.addon:first-child {counter-reset: addoncount !important;}
.addon[active="false"] {counter-increment: disabled !important;}
#addon-list:after {
    display: block !important;
    width: 120px !important;
    content: "[ "counter(addoncount)" Включено | "counter(disabled)" Отключено ]" !important;
    color: #444444 !important;
    text-align: center !important;
    white-space: nowrap !important;
    position: fixed !important;
    top: 11px !important;
    left: calc(50% - 112px) !important;
    cursor: default;}
}

@Aris-t2
Copy link
Owner Author

Aris-t2 commented Oct 9, 2017

I'm currently looking into CTRs alternative appearances for about:addons and about:preferences.
Not only most of the code is portable, some other nice stuff is possible too.

v

@reuk334
Copy link

reuk334 commented Oct 10, 2017

Maybe change search positon in settings (about:preferences), I propose tests:

/* search in right top corner */
	.search-container {
	  background: transparent !important;
	  position: fixed !important;
	  width: auto !important;
	  top: 60px !important;
	  z-index: 1 !important;
	  right: 60px !important;
	}

/* repair margin after change position search box */	
	.pane-container {
	  margin: 30px 0 0 0 !important;
	}
big window smaller window
big window smaller window

@Aris-t2
Copy link
Owner Author

Aris-t2 commented Oct 10, 2017

To be honest, the search box overlay bugs me. Its kind of annoying, that is actually can overlap with pages content.
I think a better approach is keeping it as contents first "item" and make it disappear while scrolling, so it becomes a default page item like everything else.

.search-container {
  background: transparent !important;
  position: absolute !important;
  top: 20px !important;
}

prefs

Further more I will tweak the small window case so content and search box are still visible even on smaller windows. Currently small width corrupts/moves some areas the way they should not.

@Acid-Crash
Copy link

Acid-Crash commented Oct 11, 2017

Hi Aris,
Do you have any plans on adding Australias style (default-one from FF56) module for tabs?
Also could you give some details whether number of included @import url(.*.css) inside userCrome.css affects browser speed in any way?

@Aris-t2
Copy link
Owner Author

Aris-t2 commented Oct 11, 2017

I have no plans to work on curved tabs, I'm glad they are gone. ;-) They were the main reason I started to work on CTR back then.

No idea about how or if many imports have an affect on browsers speed/performance issue. Testing in Portable Firefox on a very old slow usb 1.1 stick might give some insight, if anyone wants to test.

@happysurf
Copy link

Aris, great work as always.
How hide the separator near to hamburger icon in 57+?

@Aris-t2
Copy link
Owner Author

Aris-t2 commented Oct 12, 2017

I will add the code to next update.

#PanelUI-button {
  margin-inline-start: 0px !important;
  border-inline-start: 0px solid !important;
  border-image: unset !important;
  border-image-slice: 0 !important;
}

@Acid-Crash
Copy link

Hi Aris, I have I minor suggestion regarding classic_button_appearance_on_navbar.
Current module adds squared style buttons to navbar.
CTB offered an option to make those buttons rectangular.
navbarbuttons

Maybe you consider adding some more customization for those buttons (aka additional module to make them rectangular instead of squared)
P.S. Button height is totally fine here perfectly matched with addressbar

@happysurf
Copy link

happysurf commented Oct 13, 2017

Other interesting codes to add that I use:

/* Find Bar on top */
.browserContainer findbar, #viewSource #FindToolbar { -moz-box-ordinal-group: 0; width: 100% !important; }

/* Global text size UI */
* { font-size: 10pt !important; }

/* Active tab text in bold */
.tabbrowser-tab[selected="true"] { font-weight: bold !important; }

@happysurf
Copy link

Aris, is possible make in bold or change the color of the host in Location Bar?

host

@Aris-t2
Copy link
Owner Author

Aris-t2 commented Oct 13, 2017

@Acid-Crash
I will look into it.
EDIT
The main problem with modifying button appearance is still even in Firefox57+ the non-standardized button appearance for all toolbar buttons. We have buttons with and without badges, we have buttons with special indicator cases like downloads button, action buttons, WebExtension buttons, which Firefox is handling differently compared to default buttons... Creating such a toolbar buttons CSS modification would mean to take care of many buttons individually. I will add experimental code, but can't promise it will work for all buttons.

@happysurf

  • there is a short findbar on top css file in this collection ( https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/generalui/findbar_on_top.css ). I can add code inside that file users can "enable optionally" to increase findbars width to full window width.

  • setting a global font size for everything might break the appearance of some items, that rely on default font size. Appbutton in titlebar would need adjustment. Too high font values for tab text would break squared tabs appearance, button badges (uBlock Origin) look weird etc.. Maybe something like:

* {
  font-size: 10pt !important;
}
#PanelUI-button, #PanelUI-button * {
  font-size: 12px !important;
}
.toolbarbutton-badge-stack .toolbarbutton-badge{
  font-size: 10px !important;
}

@happysurf
Copy link

happysurf commented Oct 13, 2017

here is the code to set a custom location bar background color (will be added to this collection):

Thank you for reply but I don't want change the background but only the host text, in my screenshot is github.com.

@Aris-t2
Copy link
Owner Author

Aris-t2 commented Oct 13, 2017

Noticed that, edited message afterwards. ;-)

@Acid-Crash
Copy link

Acid-Crash commented Oct 13, 2017

@Aris-t2. Thx for the update regarding those buttons.
Experimental code will do. On the other hand I totally agree that if 2-4 pixels increase requires major changes and constant oversight for other buttons, it doesn't worth it so I will not be so sad about it.

@happysurf If you need to get rig of that light gray color for the domain part, you could flip browser.urlbar.formatting.enabled in about:config

@happysurf
Copy link

happysurf commented Oct 14, 2017

An other useless separator that take too much space in Location Bar when the Reader View is available.
Will be great hide the separator and move the Reader icon more close to the dots.

Inactive:
separator2

On mouse over:
separator

@Aris-t2
Copy link
Owner Author

Aris-t2 commented Oct 15, 2017

#urlbar-container #pageActionSeparator{
  visibility: collapse !important;
}

@stampis
Copy link

stampis commented Oct 16, 2017

Is there or will there be anyway to create new toolbars for the locationbar?
like such:
demo

(excuse my poor paint skills, removed some text etc..)

@Aris-t2
Copy link
Owner Author

Aris-t2 commented Oct 16, 2017

You can not create new toolbars at the moment. Nobody knows, if something changes once Mozilla releases a new toolbar API. They were supposed to come with something up for Firefox 57, but they didn't.

@Acid-Crash
Copy link

Hi Ares,
Don't know whether this is a bug or a Design choice.
In modules

  • buttons_on_navbar_button_roundness_for_classic_appearance
  • locationbar_border_roundness

border-radius is set to 12px.
I've noticed that when using a compact density mode affected elements have min-height/height set to 26px. Hence for maybe that roundness should be 13px instead of 12px?

@Aris-t2
Copy link
Owner Author

Aris-t2 commented Oct 17, 2017

12px was the max value in Classic Toolbar Button, so I just adopted it.

@daveranan
Copy link

Is there a way to copy default theme styles and modify those? All I really want is to use default Dark theme but with the background and tabs styles from the Default theme. Dark theme is nice and easy on the eye but that complete dark background on tabs is retarded, no contrast what so ever.

@Aris-t2
Copy link
Owner Author

Aris-t2 commented Oct 18, 2017

You can look into default compact theme file and use any code you like:
chrome://browser/skin/compacttheme.css

@Achille-Grs
Copy link

Achille-Grs commented Oct 19, 2017

Hi Aris and thank you for this beautiful settings in Firefox 57
(text from translator)

I have an issue with the download button.
In file "buttons_on_navbar_classic_appearance.css" I added "width 90px - height 25px"
and all buttons works perfect, except the dowload button when I press it, fails. (see pic).
Ιs there a way to fix it?
ff

Thanks!
P.S: I made a css file with Bookmarks multiple lines if you want it.

@Aris-t2
Copy link
Owner Author

Aris-t2 commented Oct 20, 2017

You have found Mozillas most complex button. It has multiple internal layers, which have to be adjusted once button size changes in some cases.

#downloads-button
#downloads-button .toolbarbutton-badge-stack
#downloads-button .toolbarbutton-text
#downloads-button .toolbarbutton-badge-stack .toolbarbutton-icon
#downloads-button .toolbarbutton-badge-stack .toolbarbutton-badge
#downloads-button .toolbarbutton-badge-stack #downloads-indicator-anchor
#downloads-button .toolbarbutton-badge-stack #downloads-indicator-anchor #downloads-indicator-icon
#downloads-button .toolbarbutton-badge-stack #downloads-indicator-anchor #downloads-indicator-progress-outer
#downloads-button .toolbarbutton-badge-stack #downloads-indicator-anchor #downloads-indicator-progress-outer #downloads-indicator-progress-inner

Here is the code you need for your button width:

#nav-bar toolbarbutton .toolbarbutton-icon,
#nav-bar toolbarbutton .toolbarbutton-badge-stack {
  width: 90px !important;
  height: 25px !important;
}
#nav-bar .webextension-browser-action .toolbarbutton-icon,
#nav-bar #downloads-button #downloads-indicator-anchor {
  margin-left: 32px !important;
  margin-right: 32px !important;
}

(The .webextension-browser-action part is for buttons like uBlock Origins).

Share your bookmarks multiple lines code. I could add it to this collection too.

@Achille-Grs
Copy link

Achille-Grs commented Oct 20, 2017

Thank you sooo much! Now work Perfecty! :-)

Here is the the code.

/* bookmarks multiple lines */

#personal-bookmarks {
display:block;
}
#personal-bookmarks #PlacesToolbar {
display:block;
min-height: 0px;
overflow-x:hidden;
overflow-y:auto;
max-height: 999px;
}
#personal-bookmarks #PlacesToolbar > hbox {
display: -moz-stack !important;
left:0px;
right:0px;
width: 100%;
}
#personal-bookmarks #PlacesToolbar #PlacesToolbarItems {
/display:block;/
overflow-x:visible;
overflow-y:visible;
}
#personal-bookmarks #PlacesToolbar #PlacesToolbarItems > box {
display:block;
}
#personal-bookmarks #PlacesToolbar > .bookmark-item{
visibility: visible !important;
}
#personal-bookmarks #PlacesToolbar .chevron{
display:none;
}
#personal-bookmarks #PlacesToolbar > hbox > hbox{
overflow-x:hidden;
overflow-y:hidden;
}
#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator[collapsed="true"]{
display:none;
}
#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator{
display:none;
}
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item{
padding-top: 2px;
padding-bottom: 2px;
margin-left: -4px !important;
padding-right: 10px !important;
}
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item:hover:active:not([disabled="true"]),
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item[open="true"] {
padding-top: 2px !important;
padding-bottom: 2px !important;
-moz-padding-start: 4px;
-moz-padding-end: 2px;
}
#personal-bookmarks #PlacesToolbar toolbarseparator{
-moz-appearance: none !important;
visibility: visible !important;
display:inline;
text-shadow: none !important;
border-left: 3px solid ThreeDShadow !important;
border-right: 3px solid ThreeDHighlight !important;
vertical-align: left;
}
#personal-bookmarks toolbarbutton.bookmark-item[dragover][open]{
-moz-appearance: toolbarbutton;
}

@Aris-t2
Copy link
Owner Author

Aris-t2 commented Oct 20, 2017

@Achille-Grs
Does the code work for you with more than two rows?

@Aris-t2
Copy link
Owner Author

Aris-t2 commented Nov 15, 2017

Well, I have no explanation for the different results between your test and my test. Maybe you can try to run Portable Firefox?

  • Firefox 57 x64
  • new profile
  • added unmodified 1.2.8 files to chrome folder
  • switched to Windows AeroBasic OS theme on Win7
  • start Firefox, closed some tabs, maximized window

2

Also tested different screen resolutions below my default 1920x1080, switching between compact, normal and touch modes.
We need someone else on Windows 7 to test this too.

@lazerhawk
Copy link

Possible strangeness with multirow toolbar. The normal toolbar customize menu offers only one "toolbar" where one can add addon buttons and the bookmarks toolbar item. Using the multirow css causes the actual bookmarks to bunch up into multiple rows correctly within the larger outer container to emulate multiple rows, but the addon buttons exist as a separate vertical centered group.

Does this mean we still can't achieve a proper separation between addon buttons and bookmark items in separate rows?
bunching

@Aris-t2
Copy link
Owner Author

Aris-t2 commented Nov 15, 2017

Bookmarks use their own box independent of the toolbar they are on. The code only modifies those bookmarks not the toolbar buttons on bookmarks toolbar.

@Poonkraft
Copy link

Hola Aris-t2, I think I have an (at least partial) explanation. The difference is the theme. I do not use Aero, I have my own very simple (XP like) theme (with reduced frames). However, I tested with a bunch of themes, some are perfect like your example, some are messed up like mine. Food for thought though: Waterfox + CTR does not have this problem.

An unrelated question: is it possible to make the panels (app button, bookmarks popup, etc) stay inside the browser frame? For instance when I click the Firefox button, the menu is outside the browser to the left (if there is room). I would like it to stay within the frames. Not a big deal though, but would be nice.

@stonecrusher
Copy link
Contributor

stonecrusher commented Nov 15, 2017

Hi,
could you add a little warning/explanation to the privacy.resistFingerprinting in the readme.md?
It will make your browser behave strange and I couldn't relate it to that setting.
e.g. window won't start maximized and you can't install many webextensions from AMO because wrong user agent is reported and therefore requirements are not met. I made that preference change weeks ago and it took me hours to find out what's going on with that profile.
Thank you for your work! - modifying the .css files will be the future of customizing FF :-/

@Kavouras
Copy link

Hello,
Great work.
I just want the tabs below navigation thing - nothing more. This is what i did, which doesn't work.
Added @import url(./css/tabs/tabs_below_navigation_toolbar.css); to my userChrome.css
Added css/tabs subfolder to the chrome folder.
Added tabs_below_navigation_toolbar.css to the tabs folder.
Didn't add or change anything else.
What I'm doing wrong?
Thanks.

@readingsnail
Copy link

Sorry, i forgot this article, also thanks

so i wanna classic search bar, so i found this -
https://userstyles.org/styles/122214/firefox-search-bar-show-engine-names-firefox-43

maybe it's include to cssfix?

@Random-github-name
Copy link

@Random-github-name
I will look into text mode tweaks.
To hide back and forward buttons you can use this code:
#back-button, #forward-buttons {visibility: collapse !important;}

Thanks! It didn't work at first, then I checked it and realized that it should be #forward-buttons without the plural, thus #forward-button. Look at me, I am learning things! ;)

Thanks for this and if you can look into the expanding the text, that would be great!

Cheers!

@Aris-t2
Copy link
Owner Author

Aris-t2 commented Nov 15, 2017

@Poonkraft
Well, I can not do much about "custom OS themes" especially, if not all of them behave the same.

You can force the popups more to the right or left, if needed, but you have to find own values for your configuration.

#main-window[tabsintitlebar] #appMenu-popup,
#appMenu-popup {
  -moz-margin-start: 400px !important;
  -moz-margin-end: -400px !important;
}

#main-window #navigator-toolbox #PersonalToolbar #bookmarks-menu-button #BMB_bookmarksPopup,
#BMB_bookmarksPopup {
  -moz-margin-start: 400px !important;
  -moz-margin-end: -400px !important;
}

@stonecrusher
OK

@Kavouras
Most likely your current userChrome.css contains something, that breaks tabs_below_navigation_toolbar.css code.
Test a clean setup of this project.
Check your current code for errors and remove all @namespace stuff, if present.

@readingsnail
I will write my own version of this.

@Random-github-name
The typo was my fault. ;-)

@stonecrusher
Copy link
Contributor

Suggested UI tweak:
For Addons Manager, give an option to dismiss the "Get Add-ons" button (first one) as it is misleading and looks like you could search for addons there. In fact it's just useless selfpromotion and search is available under the "Extensions" item.

#category-discover { display: none !important; }

@Fixer-007
Copy link

Are multirow tabs possible? Like in good old Tab Mix Plus..

@electrotype
Copy link

electrotype commented Nov 15, 2017

@Aris-t2 :

  1. About ./css/buttons/custom_backforward_connected_to_location_bar.css, I found an issue I think. If I enter "Customize..." and move the back button, or the url input, I'm not able to get the "connected" styles to work anymore, even by repositioning everything exactly as they were... I actually then have to restore a backup copy of my full profile for the styles to work.

Here's what it looks like after messing in "Customize..." :

  1. My layout is, thanks to you, now almost exactly how I want it! The only thing remaining would be to have the menu at the start of the url bar, and then to remove the menu bar. Is this possible?

Thanks again for your awesome work! You probably have a lot of requests this week!

@Aris-t2
Copy link
Owner Author

Aris-t2 commented Nov 15, 2017

@stonecrusher
Good idea.

@Fixer-007
I don't think so, at least not with this project.

@electrotype

  1. I can not reproduce that. You don't have to restore your profile, if something is messed on a toolbar. Just hit the restore defaults button and rearrange everything again.

  2. Not possible.

@bodisor
Copy link

bodisor commented Nov 15, 2017

#category-discover { display: none !important; }

Alternatively, set extensions.getAddons.showPane to false

@Poonkraft
Copy link

Hi Aris-t2, I do not expect you to fix the custom OS theme, the workaround code (supplied earlier) works well.
Thanks for the code to move the popups, I'll play with it to find what I like.

@stonecrusher
Copy link
Contributor

@bodisor That preference is not available here (Version 57.0, Build-ID 20171112125346)
ss1

@Aris-t2
Copy link
Owner Author

Aris-t2 commented Nov 15, 2017

@bodisor
Thanks

@Poonkraft
Ok.

@stonecrusher
You can create it manually, it works.

@stonecrusher
Copy link
Contributor

@bodisor @Aris-t2 Thank you, it's nice and easy! And already in the readme :-)

@Aris-t2 Thanks for the link regarding fingerprinting. Have you seen that buglist? Oh boy, no wonder I experienced strange behaviour. I wouldn't recommend to set that to true.

@aolszowka
Copy link

Is there any way to adjust the size of the Bookmark "Show more bookmarks" to its original size in Pre-Firefox 57? I think I need to mess with "PlacesChevron" but its unclear if this is an image or text projected on to a button.

image

Also I'm trying to remove this Go arrow; I think I need to hide element .search-go-button; but I'm unsure of how best to do that; any pointers? I really just want my old search bar back; keep hoping someone develops an add-in (I know its beyond the scope of this project) removing elements should help a bit

image

@Merlin2802
Copy link

Hi all,

is there a way to move the tab-bar "only" to bottom?

Thanks for hints!
Regards

zwischenablage01

@Aris-t2
Copy link
Owner Author

Aris-t2 commented Nov 16, 2017

@aolszowka

Use this to shrink chevron (aka "Show more bookmarks" ) on bookmarks toolbar.

#PlacesChevron .toolbarbutton-icon {
  min-width: 0px !important;
  min-height: 0px !important;
  width: 10px !important;
  height: 10px !important;
}

To hide searchbars go button use the corresponding "option" of this project (v1.2.9+).

I tried to recreate the old search the same way I did in CTR and only was partly successful.
I works, but the icon won't change, when you change the search engine, although it changes and works with the "next" one.

Here is what I got so far
oldsearch_test.zip

Add CSS code to userChrome.css, xml file to xml folder, image files to image folder.

@Merlin2802
Unfortunately not. You can only move all top toolbars to the bottom as a block.
The code that "cheats" only tabs toolbar to the bottom breaks some parts of the ui and does not work properly.

@Merlin2802
Copy link

Hi Aris,

thanks for your fast feedback and your commitment.

Regards

@MarkRH
Copy link

MarkRH commented Nov 16, 2017

This thread's getting long. Anyway, just wanted to thank you Aris for all your hard work putting this together. Like having the search engine labels again. Anyway, I put my current config here: Firefox Configuration - MarkRH

I'm importing your userChrome.css into mine and copied the Windows Classic theme section of tabs_below_navigation_toolbar.css into mine so I don't have to keep uncommenting it.

@Aris-t2
Copy link
Owner Author

Aris-t2 commented Nov 16, 2017

@MarkRH

You are right about his thread.

@ALL
Continue here #41

Repository owner locked and limited conversation to collaborators Nov 16, 2017
@Aris-t2 Aris-t2 changed the title General discussions, feedback, questions belong here General discussions, feedback, questions belong here (v1 -outdated- use v2) Nov 17, 2017
@Aris-t2 Aris-t2 changed the title General discussions, feedback, questions belong here (v1 -outdated- use v2) General discussions, feedback, questions belong here (v1, v2 -outdated- use v3) Dec 10, 2017
@Aris-t2 Aris-t2 closed this as completed Dec 19, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests