General discussions, feedback, questions belong here (v4) #109

Aris-t2 · 2018-03-02T17:55:20Z

Continued from #3, #41 and #88.

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 make CSS code ready for Firefox Quantum (57+)?
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)
custom/new/different functions for buttons/menuitems/menus
activity indicator
preference/options window
additional location bar
favicon in location bars identity box
moving menubar items to a different toolbar
restart button
... many more

The text was updated successfully, but these errors were encountered:

stonecrusher · 2018-03-02T22:52:09Z

Regarding screenshots_alternative_save_ui.css:

html body #target or html > body #target identifiers make no sense as they will match almost everywhere (only gives more overhead).
body > #target would make more sense.
html > body > #target doesn't bring any advantage.
html[dir="ltr"] > body > #target adds more specifity and is not as generic because most website's html tags don't have that dir element. However it doesn't target rtl-systems which then would need own selectors - so I'd strip it completely.
Technically the sibling cascade brings more specifity but also makes it unclear and at that point of the selector it's already very tough to get there by accident.

Therefore

body > div.highlight > div.highlight-buttons:first-child > button.highlight-button-download

instead of

html body div.highlight div.highlight-buttons button.highlight-button-cancel + button.highlight-button-copy + button.highlight-button-download

Not sure about -moz-margin-start. In rtl the icon position is switched, not only button order.
FF58 targets ltr and rtl separately:
html[dir="rtl"] .highlight-button-save { padding-right: 40px; } html[dir="ltr"] .highlight-button-save { padding-left: 34px; }

Should I make a pull request?

Aris-t2 · 2018-03-02T23:44:55Z

Please no pull requests.

Its true html body #target equals html > body #target, body > #target makes more sense and html > body > #target doesn't bring any advantage.

I know about html[dir="ltr"].. adds more specificity, but in this case the code should affect both ltr and rtl locales, not just one for them, so stripping [dir="ltr"] makes sense.

I prefer the "button + button + button..." code here. Makes it less likely to occur on a different page. Don't worry about the readability or complexity. The code is not written for educational purposes.

In this case internal screenshot add-ons code does not work like most parts of the ui, Normally it would cover the case you mention, but devs use a reversed direction here, so -moz-margin/padding-start/end causes exactly the opposite. After testing this on a rtl locale I switched back to padding/margin-left/right.

v777 · 2018-03-03T17:21:29Z

Removing the tooltips that appear on the back-forward buttons if you left-click more than half a second:

#nav-bar :-moz-any(#back-button, #forward-button) > menupopup {
  display: none !important;
}

This is for me a very annoying behavior for which I made a request a long time ago for CTR.

By the way, thanks a lot for this new project!

yurikhan · 2018-03-03T17:40:14Z

@v777 Actually those popup menus (which also pop up on a right click) are the only reason I keep the Back/Forward buttons on my toolbar. Otherwise I would do away with them and just use the thumb buttons on the mouse.

Yes, it’s puzzling that they pop up on a long click as if we were on a touch screen. But they enable arbitrary jumps through history, and that comes in handy e.g. in cases you need to go back two pages when the previous page is an immediate redirect.

v777 · 2018-03-03T18:20:16Z

@yurikhan I too sometimes use this menu. It is very handy if it appears when I want. And for that, there is already the right click.

In fact, the true issue is that we cannot tell Firefox: no touch screen here!

Anyway, I know there are a few people who are interested by that, so I hope it will be useful, and possibly added to this wonderful project.

Aris-t2 · 2018-03-03T18:44:39Z

I can add this to the project.

yurikhan · 2018-03-03T18:47:20Z

@v777 The point is that your snippet above will hide popup menus no matter how they are invoked, right click or long click, making the functionality inaccessible.

Aris-t2 · 2018-03-03T18:53:54Z

In my tests they only hide popups for left clicks / left long clicks, right clicks don't hide them.
Anyway this is optional, so nobody has to enable it. ;-)

krystian3w · 2018-03-03T19:02:16Z

@yurikhan - Right click menu maybe no create in #navbar, I see this element in popupset#mainPopupSet.

yurikhan · 2018-03-03T19:05:32Z

Hm, indeed, there are three separate (identical?) menupopups. Sorry for the noise then.

krystian3w · 2018-03-03T19:21:19Z

FX Screenshots have diffrent/randomly Internal UUID?

@-moz-document url-prefix("moz-extension://83173b3b-33d0-4a9b-8ad5-76fe827549eb/") {
/* css */
}

OK ramdomly.

Aris-t2 · 2018-03-03T21:55:31Z

Yes its random. It contains a function for that:

this.makeUuid = (function() {

  // generates a v4 UUID
  return function makeUuid() { // eslint-disable-line no-unused-vars
    // get sixteen unsigned 8 bit random values
    const randomValues = window
      .crypto
      .getRandomValues(new Uint8Array(36));

    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
      const i = Array.prototype.slice.call(arguments).slice(-2)[0]; // grab the `offset` parameter
      const r = randomValues[i] % 16|0, v = c === "x" ? r : (r & 0x3 | 0x8);
      return v.toString(16);
    });
  };
})();
null;

Gittyperson · 2018-03-04T00:25:55Z

Is it possible to change the alignment of the titlebar text? (for "Tab Title In Firefox Titlebar")
In Windows 10 it's set to the left by default, looking for a way to center it. Thanks.

Aris-t2 · 2018-03-04T13:26:01Z

v1.7.5 offers an option for that now.

dana86 · 2018-03-07T14:18:00Z

Hello, first of all huge thank you for this project! I'm now trying to set up my old visuals on the new portable Quantum in various degrees of success.

This is my FF 56.0.2 look which I'm trying to recreate (don't mind the language):

This is what I have right now:

I have a few issues:

I can't seem to separate the back and forward buttons + reload/stop
I can't click on the tabs to switch between them, nothing happens, closing them works though
I successfully edited the "addon bar" using the bookmark bar at the bottom. I have Gmail Notifier on the bottom right and right-clicking usually brings up its context menu. When I right-click on it here, it just shows the toolbar menu. Is there any fix for that?

My userChrome.css on Pastebin
I use the latest version 1.7.5 from here.

Any help is appreciated!

Aris-t2 · 2018-03-07T16:56:39Z

Make sure you are not using the crappy, broken Firefox 58. Switch to 59: http://ftp.mozilla.org/pub/firefox/candidates/59.0-candidates/build1/

I can't seem to separate the back and forward buttons

Your screenshot shows and active "custom_backforward_connected_to_location_bar.css" in userChrome.css, while your css file does not. Buttons are separated be default and you can add other buttons between them and location bar.
Install separated stop and reload buttons from addons.mozilla.org. There are WebExtensions for that, if needed.

I can't click on the tabs to switch between them, nothing happens, closing them works though

Try to start over with a clean profile (again) without other add-ons installed. Tabs work fine here.

I successfully edited the "addon bar" using the bookmark bar at the bottom. I have Gmail Notifier on the bottom right and right-clicking usually brings up its context menu. When I right-click on it here, it just shows the toolbar menu. Is there any fix for that?

Gmail Notifier + 0.3.0 (red/white mail icon on toolbar) does not offer a right-click context menu anywhere.
Notifier for Gmail 0.9.1 (blue/white mail icon on toolbar) offers a right-click context menu everywhere in my tests.

I suggest to setup a new version of Portable Firefox and replace the included Firefox 58 with Firefox 59 (it will be officially out in a week anyway and has far less issues with custom css code). Extract a clean new 1.7.5 version of the project to the corresponding chrome folder and test Notifier for Gmail 0.9.1 with this projects default setup. Afterwards replace userChrome.css with your current one your attached to your previous post.

Edit
Using "australized squared tabs" and "tabs not on top" requires custom tab text colors, so setup custom_text_settings.css too.

dana86 · 2018-03-07T18:09:17Z

Thank you for the help! I updated the portable version and the tabs, icons and right-click gmail notifier were fixed right away. I had no idea FF58 was so buggy!

Aris-t2 · 2018-03-07T22:16:42Z

Mozilla tested and left many CSS restrictions in Firefox 58 regarding userChrome.css/userContent.css. They knew about the complains, but refused to fix them. See #101

In my opinion it was a highly hypocritical move to allow own internal CSS code to do one thing, but restrict the same thing in userChrome.css/userContent.css. I had to add a few *_Fx58_fix.css options as a workaround to the package.

rayman89 · 2018-03-08T16:02:58Z

I have my tab context menu looking like this

Would it be possible to re arrange the item's order so that "Duplicar pestaña" is the first item after the addons menu items? Also is it possible to remove the separator at the bottom?

Thank you

Aris-t2 · 2018-03-08T16:47:04Z

It is possible, but I suggest not to do this. Tab context menu might reorder its content randomly resulting in something you never planned to get. Or it might stick with an order even after removing the code.

If you still want to try, you have to add a -moz-box-ordinal-group: # to every item. (I suggest to test this in portable Firefox first).
To get every id you need to do this first: https://github.com/Aris-t2/CustomCSSforFx/#how-to-find-item-ids-and-attributes.

After getting all ids, start ordering context items

#id_of_first_item {
  -moz-box-ordinal-group: 0 !important;
}

#id_of_second_item {
  -moz-box-ordinal-group: 1 !important;
}
...

To affect a menuseparator you need to use code like this:

#id_of_item_before_separator + menuseparator {
  -moz-box-ordinal-group: # !important;
}

To hide a separator use something like this:

#id_of_item_before_separator + menuseparator {
  display: none !important;
}

rayman89 · 2018-03-08T17:56:12Z

@Aris-t2
Thank you. One last think if it's not too much to ask. I updated and the things for the location bar seems to have changed and I wasn't able to make the search icons at the bottom appear. Could you tell me how to fix that please? or could you tell me how to just change the width of the popup to be the same as the location bar instead of the whole browser window?

EDIT: BTW does this help with the xbl thing on firefox being removed?

https://www.jeffersonscher.com/gm/url-bar-tweaks.html

Is it possible to change the star icon that appears in the location bar popup to be blue like it used to be?

Speravir · 2018-03-08T19:23:43Z

(Unfortunately not for CustomCCSforFx.) I’ve recently discovered the addon Bookmark search plus 2 (BTW: This implements a behaviour that should in my opinion be the default). After installation one can select a new group in the sidebar. Alas, this shows the default ugly, grey bookmark icons. I am now interested, how I could apply the yellow icons (from bookmark_icons_colorized.css I guess) or at least add some fill code as second best solution. From the addon code it seems I had to add code to userContent.css, but I do not get how to.

Aris-t2 · 2018-03-09T13:46:37Z

@rayman89

One off search does not work with my two lined version of autocomplete popup. Rebinding the popup with XBL broke something there, so I added CSS to hide one off search completely (I know it worked fine in previous Firefox versions). No need to reenable it.

I know there are CSS tweaks to get two lined results (in fact the first versions of the project used something similar), but the popup misses a few main features (with rebinding):

autocomplete popup does not get attached to the location bar properly (in every tested Fx version 57-60)
autocomplete popup can not determine location bars width (manual popup width does not match location bars width)
type icon (star, tab...) can not be at result items end (or at least I haven't found a way)

Once XBL is gone, I might try the CSS only way again.

@Speravir

Add this to your userContent.css to override the hard-coded gray icons with the ones from this project.

div.bkmkitem_f img[src="/icons/folder.png"] {
  -moz-padding-start: 20px !important;
  background: -moz-image-rect(url("./image/folder-item.png"), 0, 32, 16, 16) center no-repeat !important;
}

div.bkmkitem_f img[src="/icons/menubkmk.png"] {
  -moz-padding-start: 20px !important;
  background: -moz-image-rect(url("./image/bookmarksMenu.png"), 0, 16, 16, 0) center no-repeat !important;
}

div.bkmkitem_f img[src="/icons/otherbkmk.png"] {
  -moz-padding-start: 20px !important;
  background: -moz-image-rect(url("./image/unsortedBookmarks.png"), 0, 16, 16, 0) center no-repeat !important;
}

div.bkmkitem_f img[src="/icons/toolbarbkmk.png"] {
  -moz-padding-start: 20px !important;
  background: -moz-image-rect(url("./image/bookmarksToolbar.png"), 0, 16, 16, 0) center no-repeat !important;
}

aflove65 · 2018-03-09T15:19:39Z

I have a bit of an issue. When I use the tabs under the main content and tabs multiple lines v2 I am unable to see the bottom of the webpage when there is two lines. Is there any fix for that?

Aris-t2 · 2018-03-09T15:39:37Z

@aflove65
This combination is not supported. Either use multiple tab lines or tabs below main content.

Speravir · 2018-03-09T19:12:08Z

@Aris-t2

Add this to your userContent.css to override the hard-coded gray icons with the ones from this project.

Wow, thank you once again! How did you find this? Because with the browsertools I did not get it.

JFYI: Bookmark search plus 2 - möglicher Ersatz für Go Parent Folder & Show Parent Folder.

Aris-t2 · 2018-03-09T21:20:23Z

@Speravir
I looked into BS+2 add-on code and found how the dev hardcoded images into img node inside a js file. The only difference between those images was the src tag, that can be used to distinguish between different images. The -moz-padding moves the initial icon out of the visible area and the new icon can be cheated into the visible area as a background image.

Speravir · 2018-03-09T21:33:02Z

OK, I found it – not that I had been able to find out it from there on my own … But for potential changes I know now where to search for. THX (again ;-) ).

krystian3w · 2018-07-06T07:03:40Z

I do not know if anyone will process the js files addon convert for compatibility:

chrome directory or
firefox installation directory.

happysurf · 2018-07-06T10:16:44Z

This addon https://addons.mozilla.org/en-US/firefox/addon/tab-flag/ is able to tell which tabs are unread. Maybe the code can help recover the lost functionality to be able to change the font color and style for unread tabs like we were used to be able before?

This addon is a good start but is not sufficient, because when the user have many tabs opened, a symbol for unread tab is not clear enough to view.
I'm looking for a way for make a colored top line (like the active one) for mark the unread tabs.
In this way, together with the code below for unload tabs, is possible have a consistence Quantum style.

/* Colored line for unload tabs */ .tabbrowser-tab[pending] .tab-content { margin-bottom: 2px !important; border-top-style: solid !important; border-width: 2px !important; border-color: red !important; }

Aris-t2 · 2018-07-06T11:08:17Z

@happysurf
I don't think WebExtensions can modify tab contents appearance like that (yet?).

happysurf · 2018-07-06T14:07:52Z

@Aris-t2
Unfortunately you are right, but I hope in the future,

krystian3w · 2018-07-06T21:00:04Z

How to activate [pending] attrib in Firefox.

Aris-t2 · 2018-07-06T21:35:22Z

@krystian3w
You are using restart scripts, yes?

Open a few different websites in tabs and hit restart button/menuitem. After restart all opened tabs, that where not yet selected, will offer [pending] attribute.

pending tabs = unloaded tabs

krystian3w · 2018-07-06T21:45:38Z

And this is works only when recover session or use restart button? Funny and impractical / unhandy.

/* Colored line for unload tabs */ 

.tabbrowser-tab[pending] .tab-content .tab-label { 
  margin-bottom: 7px !important;
  border-top-style: solid !important;
  border-width: 5px !important;
  border-color: red !important;
  width: 100vw;
}

Works "OK" with squared tabs:

Aris-t2 · 2018-07-06T21:52:59Z

And this is works only when recover session or use restart button?

Works in both cases for me.

krystian3w · 2018-07-06T21:58:58Z

Still impractical / unhandy.

Speravir · 2018-07-07T17:17:47Z

@Aris-t2

Can you remind me about the tab animation stuff? I really don't remember anymore what the code was about.

I really do not expect you to go through it again. It was just thought as example of things changed so code/rules do not work anymore like before. But your code is in issue #88, see p. 3 of your post on 13 Dec 2017.
~~The rules for Bookmark search plus I will have to check after writing.~~

Edit: Works again: Great! Actually only the folder image did not work before (the rules provided by you are identical for the others like last time).

This one

Looks like the src tag is not set properly for folders

sounds like a Fx bug to me.

Edit: I used the first version from you with the general div.bkmkitem_f img and this works here in the moment.

Speravir · 2018-07-07T17:24:44Z

@rayman89 @krystian3w

This addon https://addons.mozilla.org/en-US/firefox/addon/tab-flag/ is able to tell which tabs are unread. Maybe the code can help recover the lost functionality to be able to change the font color and style for unread tabs like we were used to be able before?

Actually this addon is a direct consequence of a discussion in German Camp Firefox forum regarding the unread/notselectedsinceload issue. If you are able to read see Farbige Tab's (we overlook the wrong plural, do we?).

Speravir · 2018-07-07T17:32:08Z

@krystian3w

And this is works only when recover session or use restart button?

If you install a suiting addon this works also for all tabs opened in background. I know 4 of these – 3 of them should be the first results here: search results for "load on select" (edit: after looking it seems only both LoadTabOnSelect variants work), and the fourth is HoldTab. (I actually only tested the last.)

peter-lyons-kehl · 2018-07-09T21:13:33Z

Hi @Aris-t2,

Thank you for classic/css/toolbars/menubar_in_fullscreen_mode.css. It shows the menu bar via Alt key.

Pizzapops · 2018-07-10T15:23:56Z

[Win10][Nitely 2018-07-10]
It looks like Mozilla broke icon hover info popups starting with 2018-7-09 update. At first I suspected it was something I did in my highly modified version. A clean version with no Chrome folder or other mods still exhibited the problem. Many icons only popup text with no background box. Screen clip show results with Library icon hover.

.

krystian3w · 2018-07-10T16:05:30Z

Maybe fix tomorrow if dev show problem.

Aris-t2 · 2018-07-10T18:14:43Z

Sounds like a Firefox bug. Maybe the devs are already on it.

Aris-t2 · 2018-07-11T04:33:49Z

This thread is getting way too long. Lets continue here: #133

Aris-t2 added the DISCUSSION label Mar 2, 2018

Aris-t2 mentioned this issue Mar 2, 2018

General discussions, feedback, questions belong here (v3) #88

Closed

Aris-t2 mentioned this issue Jul 11, 2018

General discussions, feedback, questions belong here (v5) #133

Closed

Aris-t2 closed this as completed Jul 11, 2018

Aris-t2 mentioned this issue Sep 22, 2018

Searching for a thread here ... #142

Closed

Aris-t2 mentioned this issue Nov 6, 2018

[!] GENERAL discussion, feedback, questions belong here! (v6) #163

Closed

Aris-t2 mentioned this issue Feb 12, 2019

[!] GENERAL discussion, feedback, questions belong here! (v7) #189

Closed

Aris-t2 mentioned this issue Jun 6, 2019

[!] GENERAL discussion, feedback, questions belong here! (v8) #211

Closed

This was referenced Jul 20, 2019

v.2.0.64: Settings are not saved aaFn/Bookmark-search-plus-2#111

Closed

[Feature request] Make folder icons adjustable aaFn/Bookmark-search-plus-2#112

Closed

Aris-t2 mentioned this issue Oct 25, 2019

[!] GENERAL discussion, feedback, questions belong here! (v9) #241

Closed

Aris-t2 mentioned this issue Jan 15, 2020

[!] GENERAL discussion, feedback, questions belong here! (v10) #273

Closed

Aris-t2 mentioned this issue Jun 16, 2020

[!] GENERAL discussion, feedback, questions belong here! (v11) #308

Closed

Aris-t2 mentioned this issue Jun 5, 2021

GENERAL discussion, feedback, questions belong here! (v12) #368

Closed

Repository owner locked as too heated and limited conversation to collaborators Jul 20, 2021

General discussions, feedback, questions belong here (v4) #109

General discussions, feedback, questions belong here (v4) #109

Comments

Aris-t2 commented Mar 2, 2018 • edited Loading

stonecrusher commented Mar 2, 2018

Aris-t2 commented Mar 2, 2018

v777 commented Mar 3, 2018

yurikhan commented Mar 3, 2018

v777 commented Mar 3, 2018

Aris-t2 commented Mar 3, 2018

yurikhan commented Mar 3, 2018

Aris-t2 commented Mar 3, 2018 • edited Loading

krystian3w commented Mar 3, 2018 • edited Loading

yurikhan commented Mar 3, 2018

krystian3w commented Mar 3, 2018 • edited Loading

Aris-t2 commented Mar 3, 2018

Gittyperson commented Mar 4, 2018 • edited Loading

Aris-t2 commented Mar 4, 2018 • edited Loading

dana86 commented Mar 7, 2018

Aris-t2 commented Mar 7, 2018 • edited Loading

dana86 commented Mar 7, 2018

Aris-t2 commented Mar 7, 2018

rayman89 commented Mar 8, 2018

Aris-t2 commented Mar 8, 2018

rayman89 commented Mar 8, 2018 • edited Loading

Speravir commented Mar 8, 2018 • edited Loading

Aris-t2 commented Mar 9, 2018

aflove65 commented Mar 9, 2018

Aris-t2 commented Mar 9, 2018

Speravir commented Mar 9, 2018 • edited Loading

Aris-t2 commented Mar 9, 2018

Speravir commented Mar 9, 2018

krystian3w commented Jul 6, 2018

happysurf commented Jul 6, 2018 • edited Loading

Aris-t2 commented Jul 6, 2018

happysurf commented Jul 6, 2018

krystian3w commented Jul 6, 2018

Aris-t2 commented Jul 6, 2018

krystian3w commented Jul 6, 2018 • edited Loading

Aris-t2 commented Jul 6, 2018

krystian3w commented Jul 6, 2018

Speravir commented Jul 7, 2018 • edited Loading

Speravir commented Jul 7, 2018

Speravir commented Jul 7, 2018 • edited Loading

peter-lyons-kehl commented Jul 9, 2018

Pizzapops commented Jul 10, 2018

krystian3w commented Jul 10, 2018 • edited Loading

Aris-t2 commented Jul 10, 2018

Aris-t2 commented Jul 11, 2018

Aris-t2 commented Mar 2, 2018 •

edited

Loading

Aris-t2 commented Mar 3, 2018 •

edited

Loading

krystian3w commented Mar 3, 2018 •

edited

Loading

krystian3w commented Mar 3, 2018 •

edited

Loading

Gittyperson commented Mar 4, 2018 •

edited

Loading

Aris-t2 commented Mar 4, 2018 •

edited

Loading

Aris-t2 commented Mar 7, 2018 •

edited

Loading

rayman89 commented Mar 8, 2018 •

edited

Loading

Speravir commented Mar 8, 2018 •

edited

Loading

Speravir commented Mar 9, 2018 •

edited

Loading

happysurf commented Jul 6, 2018 •

edited

Loading

krystian3w commented Jul 6, 2018 •

edited

Loading

Speravir commented Jul 7, 2018 •

edited

Loading

Speravir commented Jul 7, 2018 •

edited

Loading

krystian3w commented Jul 10, 2018 •

edited

Loading