[UPDATING] - best way to setup 'CustomCSSforFx' updates

Merseybuoy commented 6 years ago

Hi, I only found this project yesterday, and since then there have been two updates. What is the best way to update without losing all the changes I've already made to your userchrome.css? Thank You.

Aris-t2 commented 6 years ago

There is no perfect solution. Main files content changes often and sometimes the imported files get renamed too.

You could create own userChrome.css and userContent.css files and only copy and paste the stuff you need there from release files, while always replacing css, image and xml folders. At least I think that is what userOperaFF might have tried to say.

Merseybuoy commented 6 years ago

OK, I see. Thanks for the prompt replies.

Pizzapops commented 6 years ago

When a new CustomCSSforFx comes out, I rename the current Chrome folder to version #, IE. Chrome133. Then I create the new Chrome folder. Using EmEditor's compare feature on the two userChrome.css and userContent.css files, I set my preferences and can see what has changed. I also add 1 image file and 2 css files of my own. After doing this for the last 20+ versions, I find it only takes a minute or two. Directory Opus makes file manipulation a breeze.

Merseybuoy commented 6 years ago

I now have a similar strategy to Pizzapops. Using the compare feature in Notepad++, it doesn't take long to see which lines require enabling or disabling.

MarkRH commented 6 years ago

I ended up copying the @import lines into my userChrome.css file and put this project into /profile/chrome/classic.

@import url(./classic/css/tabs/tabs_below_navigation_toolbar.css); /**/

When a new version comes out, I rename /classic/ to /classic133/ for example and create a new /classic/ folder to put the new project in. I then do a file comparison to make sure none of the @import lines have changed names or something. This makes it much quicker than having to always comment or uncomment lines to match what I had.

stonecrusher commented 6 years ago

I think at some point in the future the update frequency will be lower and as it is not security sensitive, you don't need to update all the time as long as you don't experience bugs by yourself or need new features. Updating every new version would be too annoying for me, although comparing files worked well so far.

gombszem commented 6 years ago

It could be solved:

The search bar is returned to the bottom
Restart button, or row on the File tab

Thanks

Speravir commented 6 years ago

I’d suggest to use a diff program that is able to compare directory/folder structures. I myself having Windows use WinMerge2011 which as I just noticed has a wine version, too. but there are more. If you search for a free folder diff program you will also get results from helpful pages comparing these programs not only for Windows.

With Winmerge I compare the existing installation with the update (zip files can be compared without unpacking). I copy updated and new files inside of the diff. I update userChrome.cssand userContent.css inside the diff. The last step takes the most time (depending on how much you’ve altered the settings), but is better then starting again and again from zero.

tvanassche commented 6 years ago

I've been toying with the idea of creating a small configuration tool (or site) in .NET/Mono for this. The tool would create the config files automatically based on the options you chose. I've also got a couple ideas to make updating to newer versions very easy.

I'm not sure if I'll ever actually get around to actually create this tool. But I've got 2 weeks of vacation coming up, and if it's OK with Aris-t2, I'll look into starting to work on it then.

stonecrusher commented 6 years ago

Another approach might be adapting this .bat script that was written to update user.js.

Aris-t2 commented 6 years ago

@tvanassche Sure, I'm fine with it.

Gittyperson commented 6 years ago

I'll make a suggestion: assign a number for each single tweak (001, 002 etc.) and make it clearly visible in the .css file, so users can note the tweaks they are interested in, and easily find and re-enable them (after overwriting them with an update, for example).

stonecrusher commented 6 years ago

@Gittyperson I don't think that that's a good concept as tweaks can be deleted, renamed and added. So after a while you'd have a mess of unordered numbers not winning anything. Unless you give up grouping by topic completely.

Gittyperson commented 6 years ago

Shouldn't be a problem if the numbers are unique. If a tweak is no longer available then the number will not be re-used (tw001, tw003, tw004, tw006 etc). If Aris-t2 feels a tweak has changed significantly then he can just give it a new number. These will only be description/helper numbers for quickly locating the tweaks, nothing more. They cannot interfere with the actual usage of the tweaks in any way.

stonecrusher commented 6 years ago

So it could look like this:

/* navigation toolbar buttons appearance - only use one at a time *******************************/
@import url(./css/buttons/buttons_on_navbar_classic_appearance.css); /* tw001 */
/* @import url(./css/buttons/buttons_on_navbar_classic_appearance_v2.css); /* tw018 */
/* @import url(./css/buttons/buttons_on_navbar_glass_appearance.css); /* tw002*/
/* @import url(./css/buttons/buttons_on_navbar_osx_appearance.css); /* tw003 */

/* squared buttons - only use one at a time (based on Firefox version) **************************/
/* @import url(./css/buttons/buttons_on_navbar_squared_buttons_fx57.css); /* tw004 */
/* @import url(./css/buttons/buttons_on_navbar_squared_buttons_fx58.css); /* tw059 */

/* navigation toolbar buttons - button roundness (edit file to set different roundness) *********/
/* @import url(./css/buttons/buttons_on_navbar_button_roundness.css); /* tw005 */

Or did I get you wrong? Not a big improvement in my eyes as we already have unique file names to search for.

Gittyperson commented 6 years ago

Yes, something like that. The 'tw' part would help in making the quick search more effective ('003' might not be enough for an instant result).

stonecrusher commented 6 years ago

I mean it doesn't hurt, but it may result in additional future work for Aris when updating? However, I'm not in a position to decide.

Aris-t2 commented 6 years ago

I believe this method would leave too much room for misunderstandings. Most of the time only target files change and adding a number to the corresponding tweak inside userChrome.css might be forgotten or overlooked by me.

A better solution is looking watching commits and especially monitoring userChrome.css changes. All the magic like new settings and file name changes happens there.

It is save to update css, image and xml folders without losing anything (if not modified manually).

ao2 commented 6 years ago

Hi,

this is how use CustomCSSforFx:

I enter the chrome dir under my profile, e.g.:

cd ~/.mozilla/firefox/8t2820kedf.default/chrome

I clone CustomCSSforFx as a subdirectory of chrome/ with git:
```
git clone https://github.com/Aris-t2/CustomCSSforFx
```
In userChrome.css I reference the files in the subdirectory, notice the first part of the path:
```
@import url(./CustomCSSforFx/classic/css/buttons/icons_colorized.css); /**/
...
```
When I want to update CustomCSSforFx I run git pull in the CustomCSSforFx directory, this leaves userChrome.css untouched because it is in the parent directory.
If I need to override some details I do that in a local branch of the CustomCSSforFx repository (whch I can rebase when there is a new release), or even directly in userChrome.css after all the @import lines.

Ciao, Antonio

rddim commented 5 years ago

Hello, There are scripts for updating the user.js and prefs.js files from gHacks Technology. I think and believe that it can be adapted for our needs from someone with a good skils in *.bat and *.sh. More is explained in the Wiki. The repo is here: https://github.com/ghacksuserjs/ghacks-user.js

atomGit commented 5 years ago

old issue, but i wanted to comment on this

indeed a script could be written to diff versions, but i'm wondering if there might be a better/easier way...

i wonder if a companion add-on might be a better solution where it would import, compare and export the files - a GUI that lists only the relevant options (auto-hides options that don't match FF version) and allows users to easily select which options they want to enable - an add-on would also allow a GUI color picker to be used, as well as more detailed descriptions and perhaps even images to show what an option affects

albino1 commented 5 years ago

I almost posted something similar yesterday. There's so many changes, and so many of them are version dependent, that's it's getting hard to keep track. A GUI addon that just allowed you to navigate all of that would be super helpful.

Aris-t2 commented 5 years ago

Creating a GUI would require a huge amount of time and it would obviously require being kept up-to-date. It would basically require to create something like CTR was, but being able to import styles from here.

I doubt anyone will create something like that. Keeping CSS up-to-date is already very time consuming.

Aris-t2 commented 4 years ago

This is the easiest way to update to new releases in my opinion:

Backup chrome folder
Replace current folders inside chrome folder with new folders from latest release
If something changed in an unexpected way, look into commits userChrome.css and userContent.css files and copy over changed or new entries of settings you are using.

petsam commented 4 years ago

Since this project is my favorite for changing FF look, I have created a bash script to make updates (and installation easy. Being a bash script, it is easy for Linux users, but I believe it would be easily converted to a Windows script, from a Windows user (I have been Linux-only user for more than ten years, sorry...).

https://github.com/petsam/prettyfirefox

The idea is to include more than the current repo,
userChrome.css and userContent.css are transformed and saved as .readme files (they are actually mostly informational, since the actual active @import lines are comparatively lesser)
Keeping personal settings in my_user{Chrome,Content}.css, confirming a link from user{Chrome,Content}.css.
It is possible to install a specific version.
If there is an existing chrome folder, it is backed up.
I wish to continue with a feature to compare old with new files, but it needs a defined standard.

Depending on the users' response (dev's @Aris-t2 opinion is a priority, of course), I may add more features. Feedback is more than welcome! Bugs are always there ;)

Aris-t2 commented 4 years ago

@petsam

I think making updating easier and more comfortable is a great idea.

atomGit commented 4 years ago

hi @petsam - i know essentially nothing about bash scripting, but i think there's another similar script that may be useful to you and it includes backup and diff functionality - see the updater.sh and updater.bat files at ghacks-user.js

petsam commented 4 years ago

see the updater.sh and updater.bat files

Thanks! I"ll have a look.

atomGit commented 4 years ago

in addition to @petsam script, here's another possible alternative that uses some RegEx...

find and copy all uncommented lines ( ^@ ) for userChrome and userContent and stick them in separate text files (userChrome_regEx.txt and userContent_regEx.txt)
remove everything outside of the double quotes (replace @import with empty string, replace ;.* with |
replace all . with \.
remove last |
(if necessary) remove space after all |

when a new version lands, prepend all uncommented lines with /*, then using the string in the appropriate text files, do a RegEx search for the string to find all lines that need to be uncommented

not a complete solution obviously, but it saves some time

petsam commented 4 years ago

here's another possible alternative that uses some RegEx...

You"ll be surprised to see that happening with an AI assistant ;). My script is doing what you suggest (and more) with user interaction for available choices, when required.

I would appreciate some feedback, so I can make it as foolproof as possible, or improving interaction etc.

atomGit commented 4 years ago

hi @petsam - i didn't forget about you, i was just busy restoring my website after the nut that owned my previous hosting company decided to play O.K. Corral with the coppers

i'm going to pass on testing your script - i'm not super happy with the dos2unix dependency, plus i keep the 'aris-t2' stuff in a subdirectory of /chrome and i'm not sure how the script would handle that - i think maybe it might also be more intuitive if the script were located in the FF profile directory

hope you're not disappointed and please don't take it personally

petsam commented 4 years ago

hope you're not disappointed and please don't take it personally

Why would I? I asked for feedback ;)

i keep the 'aris-t2' stuff in a subdirectory of /chrome

I thought this repo is "designed" to work inside the chrome folder. I followed this convention. If you have another idea, please, explain how it will work. I assume with an @import from original userChrome.css and userContent.css?

i'm not super happy with the dos2unix dependency

This is used to clean Windows line-endings, that break usual bash/Linux search-and-repair commands. If @Aris-t2 is convinced to set Linux-type line-endings in his text editor, it isn't needed.

Also, I hope for a re-thinking of the released files, but I can't ask much from the start. If there is some positive feedback for the script perception, I will ask.

FYI, I cleanup the 2 main files from non-characters and save them as .readme reference manuals, then copy default @import choices to new userC*.css. Until I settle on a way to diff (possible) old files to new version ones, I keep a backup of the (if existing) old userC*.css in a meaningfully named folder (with version Nr.).

The setup can be applied to specific profile, if more than one.

Any feedback and ideas are welcome.

atomGit commented 4 years ago

I thought this repo is "designed" to work inside the chrome folder. I followed this convention. If you have another idea, please, explain how it will work. I assume with an @import from original userChrome.css and userContent.css?

bingo - i keep it all in a subfolder

Aris-t2 commented 4 years ago

You can move this repositories files to any drive location/folder.

The two main files inside chrome folder (userChrome.css and userContent.css) have to point to "other" CSS files from there.

Example This projects files are stored inside E:\Test\.

Inside your chrome folder the userChrome.css file only contains @import "file:///E:/Test/userChrome.css"; and the userContent.css file only contains @import "file:///E:/Test/userContent.css";

Thats it.

petsam commented 4 years ago

You can move this repositories files to any drive location/folder.

The two main files inside chrome folder (userChrome.css and userContent.css) have to point to "other" CSS files from there

I will re-design the script to that then.

What about IDentification of @import entries, so we can confidently compare entries, without making search attempts? If there was a standard, like a naming convention and label usage, it would make comparing new/old/changed entries more confidently.

What do you think of the idea of making Usage instructions and descriptions in a readme/md file, while keeping @import lines in a plain css file?

Aris-t2 commented 4 years ago

I'm not sure this will work for most users.

Offering cleaner base files without descriptions is a good idea I agree, but without them many users would combine/set modules not meant to be set (at the same time) and wondering why things refuse to work. The other problem is labeling modules itself. From time to time names of CSS files change or new files are added for certain Fx versions (e.g. option_name_fx72.css). Using IDs for them might become confusing, but that is only my opinion.

What about a script that looks for lines starting with @import and moving everything else like descriptions or lines starting with /* @import to a userChrome_org.css or similar?

jdie1320 commented 4 years ago

Hi Aris, I just signed up on GitHub. I've been using your userchrome.css files for Firefox to keep the tabs below the address bar for quite some time now. All was well until I updated to Firefox 72. The tabs, still on the bottom, are now broken, with the close X in the center of the tab & the lettering moving around, closer to bottom of tab. Also, The Add-ons Extensions page is truncated, with a small scrolling section at the top. There’s barely enough space to view one extension, and the top of the page is also moved upwards, so clicking the gear icon only displays the bottom half or so of the menu. I see on 'ghacks.net comments' that there are others with this same problem. One comment: "Same problem here! Tabs and addonpage are messed up. Setting “layout.css.xul-box-display-values.survive-blockification.enabled” to “true” solved the problems!" However, doing this moves the tabs back up top. I thank you for your help for a few years now & wondering if you've got an answer for these problems. Many thanks, JDie1320

Aris-t2 commented 4 years ago

Such problems are caused by using outdated CSS files from this project and/or combining those files with other custom code.

Test a new and clean setup of this projects latest files inside chrome folder.

jdie1320 commented 4 years ago

Aris, Wow, thanks so much for the reply so soon.I'm not really well versed in .css files. Any chance you could send the latest correct files to this address or send a link ? I hope I'm not pushing my luck.I've looked on your github v2.9.8 & earlier and I'm a little confused as to what to use.Thanks for any help,JDie1320

-----Original Message----- From: Aris notifications@github.com To: Aris-t2/CustomCSSforFx CustomCSSforFx@noreply.github.com Cc: jdie1320 jdie1320@aol.com; Comment comment@noreply.github.com Sent: Sat, Jan 11, 2020 4:54 am Subject: Re: [Aris-t2/CustomCSSforFx] [UPDATING] - best way to setup 'CustomCSSforFx' updates (#64)

Such problems are caused by using outdated CSS files from this project and/or combining those files with other custom code.Test a new and clean setup of this projects latest files inside chrome folder.— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

atomGit commented 4 years ago

delete your current CustomCSSforFx files go here: https://github.com/Aris-t2/CustomCSSforFx/releases download the zip read: https://github.com/Aris-t2/CustomCSSforFx/blob/master/README.md

jdie1320 commented 4 years ago

atomGit,Thank you for the links.I downloaded the zip, extracted the files and spent 3 hours last night moving filesin & out of the 'userchrome.css' and nothing much changed.Still have the close x over in the middle of the tab & the add-on extension page is stillmessed up. Not much luck.Like I mentioned, everything was fine before Firefox 72 & I'm still pretty green whenit comes to .css files. Just to note, if I change "toolkit.legacyUserProfileCustomizations.stylesheets" to 'false', the tabs are back on top looking good, the add-on extension page is just fine, however, I would like the tabs below the address bar. Hoping you can help,Thanks, JDie1320

-----Original Message----- From: atomGit notifications@github.com To: Aris-t2/CustomCSSforFx CustomCSSforFx@noreply.github.com Cc: jdie1320 jdie1320@aol.com; Comment comment@noreply.github.com Sent: Sat, Jan 11, 2020 12:41 pm Subject: Re: [Aris-t2/CustomCSSforFx] [UPDATING] - best way to setup 'CustomCSSforFx' updates (#64)

delete your current CustomCSSforFx files go here: https://github.com/Aris-t2/CustomCSSforFx/releases download the zip read: https://github.com/Aris-t2/CustomCSSforFx/blob/master/README.md— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

atomGit commented 4 years ago

@jdie1320 - i don't know what you mean by "and spent 3 hours last night moving filesin & out of the 'userchrome.css'" - there's noting to "move"

extract the zip and in your profile folder where prefs.js lies, you should have...

/chrome
    /config
    /css
    /image
    userChrome.css
    userContent.css

the only files you need to edit are the css files

toolkit.legacyUserProfileCustomizations.stylesheets must be 'true'

Aris-t2 commented 4 years ago

Make sure about:config > layout.css.xul-box-display-values.survive-blockification.enabled is set to true or Firefox might have issues displaying a lot of things correctly even without any CSS modifications.

Extract the latest zip of this projects files into chrome folder and edit userChrome.css to enable "tabs below navigation" toolbar. Thats it.

Aris-t2 commented 2 years ago

I think this does not need an own discussion anymore. Use main thread: https://github.com/Aris-t2/CustomCSSforFx/discussions/454

Aris-t2 / CustomCSSforFx

[UPDATING] - best way to setup 'CustomCSSforFx' updates #64