Mypal 68 in Windows XP - Custom Buttons and Extensions

[tinman2000]

On 8/21/2024 at 8:37 AM, AstroSkipper said:

Make the tab bar invisible in Mypal 68

@tinman2000 This is the code of my self-created tabs-toolbar-invisible.css file to make the tab bar invisible in Mypal 68. This file has to be created in the mypal_profile_folder\chrome\css folder (mypal_profile_folder has to be replaced by the name of your profile folder, of course):

#tabbrowser-tabs {
  visibility: collapse !important;
}
.tabs-newtab-button {
  display: none !important;
}

As you can see, it is a short code which was created and successfully tested by me in a new, clean profile. Contrary to the code you linked to, I modified only relevant IDs and classes. And just for clarification, CSS code can't really remove elements but change their appearance, i.e. in this case make them invisible. Whether this CSS stylesheet also works in a heavily customised profile, I can't say. This has to be tested by the user. If necessary, the code must be modified then. And this is how your userChrome.css file in the mypal_profile_folder\chrome folder should look like:

/* Copyright (c) 2017 Haggai Nuchi
Available for use under the MIT License:
https://opensource.org/licenses/MIT
*/

@import "./css/tabs-toolbar-invisible.css";

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

toolbarbutton#alltabs-button {
    -moz-binding: url("userChrome.xml#js");
}

You see the tabs-toolbar-invisible.css file has to be imported by the userChrome.css file. The advantages of this approach is the modularity of your CSS implementations and the better overview. You always know exactly which code was responsible for what and can quickly activate or deactivate certain CSS stylesheets. The deactivation of the file tabs-toolbar-invisible.css is done inside the userChrome.css file as follows:

/* @import "./css/tabs-toolbar-invisible.css"; */

The requirements for use is, as already mentioned, the package MYPAL_68_CB_requirements.7z provided by me in the first post of this thread. If all done, your browser with a new, clean profile should look like this:


HI AstroSkipper - thanks for putting the code together for me! I'll see if I can work through the different requirements before adding the code. As I'd mentioned, I'm not very technically inclined but I'll see what I can do. If I end up getting stumped, I might just live with the tab bar after all. 

 

[AstroSkipper]

21 hours ago, tinman2000 said:

HI AstroSkipper - thanks for putting the code together for me! I'll see if I can work through the different requirements before adding the code. As I'd mentioned, I'm not very technically inclined but I'll see what I can do. If I end up getting stumped, I might just live with the tab bar after all. 

First of all, a little tip when replying to a post by quoting. Afler clicking the quote button, you should put your reply outside the quote. Otherwise your actual reply is hidden inside the quote, and only expanding the quote would make it readable. 
Back to the CSS code. All is described in detail in my article and additionally inside the MYPAL_68_CB_requirements.7z package. It's almost like an instruction manual. You can't really do anything wrong.  The whole thing actually only takes a few minutes.  Once this initial setup is done, you can easily add or manage UC.JS scripts as well as CSS stylesheets. If you have problems following the instructions, feel free to ask here! 

Edited August 23, 2024 by AstroSkipper
Update of content

[tinman2000]

Thanks AstroSkipper - I'll try to work this one out on the weekend.

[AstroSkipper]

23 hours ago, tinman2000 said:

Thanks AstroSkipper - I'll try to work this one out on the weekend.

TBH, there is actually nothing to work out. Just a bit copy and paste following the instructions. Reading and directly doing is the method.

[AstroSkipper]

On 8/21/2024 at 3:37 PM, AstroSkipper said:

Make the tab bar invisible in Mypal 68

@tinman2000 This is the code of my self-created tabs-toolbar-invisible.css file to make the tab bar invisible in Mypal 68. This file has to be created in the mypal_profile_folder\chrome\css folder (mypal_profile_folder has to be replaced by the name of your profile folder, of course):

#tabbrowser-tabs {
  visibility: collapse !important;
}
.tabs-newtab-button {
  display: none !important;
}

As you can see, it is a short code which was created and successfully tested by me in a new, clean profile. Contrary to the code you linked to, I modified only relevant IDs and classes. And just for clarification, CSS code can't really remove elements but change their appearance, i.e. in this case make them invisible. Whether this CSS stylesheet also works in a heavily customised profile, I can't say. This has to be tested by the user. If necessary, the code must be modified then. And this is how your userChrome.css file in the mypal_profile_folder\chrome folder should look like:

/* Copyright (c) 2017 Haggai Nuchi
Available for use under the MIT License:
https://opensource.org/licenses/MIT
*/

@import "./css/tabs-toolbar-invisible.css";

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

toolbarbutton#alltabs-button {
    -moz-binding: url("userChrome.xml#js");
}

You see the tabs-toolbar-invisible.css file has to be imported by the userChrome.css file. The advantages of this approach is the modularity of your CSS implementations and the better overview. You always know exactly which code was responsible for what and can quickly activate or deactivate certain CSS stylesheets. The deactivation of the file tabs-toolbar-invisible.css is done inside the userChrome.css file as follows:

/* @import "./css/tabs-toolbar-invisible.css"; */

The requirements for use is, as already mentioned, the package MYPAL_68_CB_requirements.7z provided by me in the first post of this thread. If all done, your browser with a new, clean profile should look like this:




Cheers, AstroSkipper
 

Personally, I prefer the tab bar visible to manage tabs and jump to the one I need, just the way it has always been. I only made the CSS code above on request and to show that the corresponding code can be easily created for hiding the complete tab bar, even including the New tab button. For all who need as much free screen as possible while surfing, but do not want to do without tabs completely, there will be soon a modified version of "Make the tab bar invisible in Mypal 68" in the next posts.

Edited August 26, 2024 by AstroSkipper

[AstroSkipper]

Hiding the tab bar with still full access to all open tabs via a toolbar button in Mypal 68

Edited August 26, 2024 by AstroSkipper
Update of content

[AstroSkipper]

Hiding the tab bar with still full access to all open tabs via the sidebar in Mypal 68



 

[tinman2000]

On Sat Aug 24 2024 (GMT+0000) at 5:35 PM, AstroSkipper said:

TBH, there is actually nothing to work out. Just a bit copy and paste following the instructions. Reading and directly doing is the method.

Hi AstroSkipper - Will I still be able to add the Menu bar and Bookmarks toolbar if I make the Tab bar invisible this way?

[AstroSkipper]

12 hours ago, tinman2000 said:

Hi AstroSkipper - Will I still be able to add the Menu bar and Bookmarks toolbar if I make the Tab bar invisible this way?

Yes. As you can see in the screenshots, the menu bar has already been enabled. The File, Edit etc. menu is located at the top left of the window. The background colour is blue, the font colour is white. That's why it is only difficult to see in my screenshots. I only unchecked the bookmarks bar. In any case, all is working. The CSS code 

#tabbrowser-tabs {
  visibility: collapse !important;
}

only hides the tab bar and nothing else. When you assign to the ID tabbrowser-tabs, which determines the tab bar, a property in CSS, then only this ID will be modified and nothing else. The last two screenshots show how Mypal 68 can be retrofitted to still get access to all open tabs when hiding the tab bar. I removed the CSS code

.tabs-newtab-button {
  display: none !important;
}

to get back the New Tab button, which is the class tabs-newtab-button in CSS. I then manually moved it to the position shown in the screenshots. 
BTW, may I remind you what I already wrote:

On 8/21/2024 at 11:16 AM, AstroSkipper said:

Personally, I am a friend of minimal and more universal code that actually achieves the desired result.

On 8/21/2024 at 3:37 PM, AstroSkipper said:

Contrary to the code you linked to, I modified only relevant IDs and classes.

Cheers, AstroSkipper 

Edited August 27, 2024 by AstroSkipper
Update of content

[tinman2000]

Hi AstroSkipper - I downloaded and unzipped your files and went through the following steps. But nothing happened to the tab bar. Do you have any suggestions?

 

Requirements for custom buttons, other script-generated objects and CSS code implementations in Mypal 68

1. In the profile folder of Mypal 68 a new folder "chrome" and a subfolder "css" of folder chrome have to be created if not already existent. Now you should have the following structure in your profile folder:

mypal_profile_folder\
mypal_profile_folder\chrome\
mypal_profile_folder\chrome\css\

2. Five files have to be added to Mypal 68. Copy config.js to Mypal's installation folder, next to mypal.exe. Copy config-prefs.js to \defaults\pref inside Mypal installation folder, next to channel-prefs.js. Finally, save userChrome.js, userChrome.css and userChrome.xml into Mypal chrome folder.

3. The variable general.config.sandbox_enabled has to be set to false in about:config which should be done automatically by file config-prefs.js after restarting the browser. Two further variables will be set by this file: general.config.filename to string config.js and general.config.obscure_value to value 0. Another variable toolkit.legacyUserProfileCustomizations.stylesheets has to be set to true which should be done automatically by config.js.

4. Now, new custom button UC.JS scripts can be added to the profile's chrome folder. They all end with the extension .uc.js, for example RestartFirefoxButton_Movable.uc.js. In some cases, the userChrome.css file has to be edited to load additional CSS files needed by the already added UC.JS script files. In any case, all CSS stylesheets files have to be copied to the css subfolder from where they have to be always imported by the userChrome.css file via the import command.

In simple terms, all provided files need to be copied to the appropriate folders from my archive, respecting the folder structure.

Last step:
This is the code of my self-created tabs-toolbar-invisible.css file to make the tab bar invisible in Mypal 68. This file has to be created in the mypal_profile_folder\chrome\css folder (mypal_profile_folder has to be replaced by the name of your profile folder, of course):

#tabbrowser-tabs {
  visibility: collapse !important;
}
.tabs-newtab-button {
  display: none !important;
}

[AstroSkipper]

14 hours ago, tinman2000 said:

Hi AstroSkipper - I downloaded and unzipped your files and went through the following steps. But nothing happened to the tab bar. Do you have any suggestions?

Then, you did something wrong. Check all steps again! All files have to be copied into the correct folders. And check if all modified prefs have been assigned to the correct values via about:config! Don't forget to delete the startup cache in the profile folder before you restart your browser! You have to start Mypal 68 with the profile where the chrome folder was created, of course.  One thing is clear. All was tested in depth and is working. And my CSS code, too.
BTW, re-posting what I wrote in my instructions is not helpful. I definitely know what I did. You should better post what you exactly did. And provide screenshots of all relevant folders' content and your userchrome.css!  This is the only way I can help you. 

Edited August 29, 2024 by AstroSkipper
Update of content

[tinman2000]

Unfortunately, I still couldn't get your steps to work. So I went back to the original process I was using (i.e. add a chrome folder and a userChrome.css file in it). Then I added the following code to the .css file again:

.tabbrowser-tab {
  visibility: collapse;
}
.titlebar-button {
  height: 27px !important;
}
#nav-bar {
  margin-top: -42px;
  margin-right: 140px;
  box-shadow: none !important;
}

[uidensity="compact"]:root .titlebar-button {
  height: 32px !important;
}
[uidensity="compact"]:root #nav-bar {
  margin-top: -32px;
}

#titlebar-spacer {
  background-color: var(--chrome-secondary-background-color);
}
#titlebar-buttonbox-container {
  background-color: var(--chrome-secondary-background-color);
}
.titlebar-color {
  background-color: var(--toolbar-bgcolor);
}

#main-window[inFullscreen="true"] #sidebar-box,
#main-window[inFullscreen="true"] #sidebar-box + splitter {
    visibility: collapse;
}

#sidebar-box #sidebar-header {
  display: none !important;
}

And it WORKED! The tab bar is gone. (See below.) But there's one more issue...

The "go back one page" button has become an "open a new tab" button - and all the buttons, search bar, etc. to the right of it are inaccessible. 

Is there a tweak I can make to the code that will restore the bar's proper functions?

 

 

[AstroSkipper]

28 minutes ago, tinman2000 said:

Unfortunately, I still couldn't get your steps to work. So I went back to the original process I was using (i.e. add a chrome folder and a userChrome.css file in it). Then I added the following code to the .css file again:

.tabbrowser-tab {
  visibility: collapse;
}
.titlebar-button {
  height: 27px !important;
}
#nav-bar {
  margin-top: -42px;
  margin-right: 140px;
  box-shadow: none !important;
}

[uidensity="compact"]:root .titlebar-button {
  height: 32px !important;
}
[uidensity="compact"]:root #nav-bar {
  margin-top: -32px;
}

#titlebar-spacer {
  background-color: var(--chrome-secondary-background-color);
}
#titlebar-buttonbox-container {
  background-color: var(--chrome-secondary-background-color);
}
.titlebar-color {
  background-color: var(--toolbar-bgcolor);
}

#main-window[inFullscreen="true"] #sidebar-box,
#main-window[inFullscreen="true"] #sidebar-box + splitter {
    visibility: collapse;
}

#sidebar-box #sidebar-header {
  display: none !important;
}

And it WORKED! The tab bar is gone. (See below.) But there's one more issue...

The "go back one page" button has become an "open a new tab" button - and all the buttons, search bar, etc. to the right of it are inaccessible. 

Is there a tweak I can make to the code that will restore the bar's proper functions?

 

 

No. Unfortunately, this code is not effective. It does totally unnecessary things. Look at my posted screenshots! My code is working as it should. Furthermore, you didn't provide any information what you did. Thus, I can't help you.

[tinman2000]

I substituted your code for my code, and the tab bar's gone. Everything's working! Thanks for your help, sir. 

The other files and steps you'd suggested apparently weren't necessary for my situation.

[AstroSkipper]

HideTabbarWithOneTab

In my download archive, I found an old but still working UC.JS script called HideTabbarWithOneTab.uc.js. This script hides the tab bar including the Open a new tab button, if only one tab is open, and shows it again, if a further tab is loaded. According to its author the script is based on the extension of the same name. Since Firefox 23, the tab bar can no longer be hidden if only one tab is open. This script solves this problem. In contrast to many pure CSS implementations as recently discussed in another thread starting from this post, it works perfectly in Mypal 68. The HideTabbarWithOneTab.uc.js file has to be copied in the Mypal's profile subfolder chrome. It has been tested by me and is fully working. Here is a short animated GIF file to show the script in action:



Requirements: The package MYPAL_68_CB_requirements.7z from the first post of this thread.

Download link: https://www.mediafire.com/file/r84j3z9krrqxzks/HideTabbarWithOneTab.uc.js/file

Edited August 31, 2024 by AstroSkipper
Update of content