Migrate userChrome.css from 62.0.3 to 63.0

[MarcosD2]

Good morning, everybody.

I have the following userChrome.css (Aris):

Code: Select all

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

@import url(./css/locationbar/ac_popup_classic_with_two_lines.css);

@import url(./css/locationbar/ac_popup_searchwith_and_visit_items_hidden.css);

@-moz-document url(chrome://browser/content/browser.xul) { 
  /* Remove " - Visit" or " - Search with" bar in the drop-down */ 
  #PopupAutoCompleteRichResult richlistitem:first-of-type[type*="heuristic"], 
  #PopupAutoCompleteRichResult richlistitem:first-of-type[actiontype="searchengine"], 
  #PopupAutoCompleteRichResult richlistitem:first-of-type[actiontype="visiturl"], 
  #PopupAutoCompleteRichResult richlistitem:first-of-type[actiontype="keyword"] { 
    display:none !important; 
  } 
  #PopupAutoCompleteRichResult .autocomplete-richlistbox { 
    padding-top: 0 !important; 
    padding-bottom: 0 !important; 
  }
 
  /* Create sufficient height for two lines */ 
  #PopupAutoCompleteRichResult .autocomplete-richlistitem:not([actiontype="searchengine"]) { 
    position: relative !important; 
    height: 45.5px !important; 
  } 
  /* Subtle border between results */ 
  #PopupAutoCompleteRichResult .autocomplete-richlistitem { 
    border-bottom-color: #eee !important; 
  } 
  /* Position page title, set font-size */ 
  #PopupAutoCompleteRichResult .autocomplete-richlistitem:not([actiontype="searchengine"]) .ac-title { 
    position: absolute !important; 
    left: 54px; 
    top: 0px; 
    font-size: 16px !important; 
  } 
  /* Position page url / action, set font-size */ 
  #PopupAutoCompleteRichResult .autocomplete-richlistitem:not([actiontype="searchengine"]) .ac-url, 
  #PopupAutoCompleteRichResult .autocomplete-richlistitem:not([actiontype="searchengine"]) .ac-action { 
    position: absolute !important; 
    left: 54px; 
    top: 22px; 
    font-size: 14px !important; 
  } 
 
  /* Position bookmark tags */ 
  #PopupAutoCompleteRichResult .autocomplete-richlistitem .ac-tags { 
    position: absolute !important; 
    right: 0px; 
    top: 3px; 
  } 
  /* Hide separator between title and URL */ 
  #PopupAutoCompleteRichResult .autocomplete-richlistitem:not([actiontype="searchengine"]) .ac-separator { 
    display: none !important; 
  } 
  /* Position special icon (bookmark, switch-to-tab) */ 
  #PopupAutoCompleteRichResult .autocomplete-richlistitem .ac-type-icon { 
    margin-left: 4px !important; 
 } 
  /* Prevent excess indenting of icons in Photon */ 
  #PopupAutoCompleteRichResult .autocomplete-richlistitem [anonid="type-icon-spacer"] { 
    display: none !important; 
  } 
  #PopupAutoCompleteRichResult { 
     --item-padding-start: 0 !important; 
  } 
 
  .autocomplete-richlistitem[selected=true] { 
    background-color: Highlight !important; 
  } 
  .autocomplete-richlistitem[selected=true] .ac-title,  
  .ac-title[selected], 
  .autocomplete-richlistitem[selected=true] .ac-url,  
  .ac-url[selected], 
  .autocomplete-richlistitem[selected=true] .ac-action, 
  .ac-action[selected], 
  .autocomplete-richlistitem[selected=true] .ac-separator, 
  .ac-separator[selected] { 
    color: HighlightText !important; 
  } 
  /* Use default text matching style */ 
  /* Ability to scroll in Fx57 */ 
  #PopupAutoCompleteRichResult .autocomplete-richlistbox > scrollbox { 
    overflow-y: auto !important;  
    padding-right: 3px !important; 
  } 
  #PopupAutoCompleteRichResult .autocomplete-richlistbox { 
    padding-right: 0 !important; 
  } 
}

... using the following ac_popup_classic_with_two_lines.css provided by Aris also:

Code: Select all

/*AGENT_SHEET*/

/* Firefox 57+ userChrome.css tweaks ****************************************************/
/* code mostly taken from 'Classic Theme Restorer' & 'Classic Toolbar Buttons' add-ons **/
/* by Aris (aris-addons@gmx.net)*********************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/

@-moz-document url(chrome://browser/content/browser.xul) {

	panel[type="autocomplete-richlistbox"]:not(#PopupAutoComplete),
	#PopupAutoCompleteRichResult[autocompleteinput="urlbar"] {
	  -moz-binding: url("./../../xml/urlbarBindings_fx57.xml#urlbar-rich-result-popup") !important;
	}

	panel[type="autocomplete-richlistbox"]:not(#PopupAutoComplete) .autocomplete-richlistitem,
	#PopupAutoCompleteRichResult[autocompleteinput="urlbar"] .autocomplete-richlistitem {
	  -moz-binding: url("./../../xml/urlbarBindings_fx57.xml#autocomplete-richlistitem") !important;
	}
	
	/* remove space around box */
	#PopupAutoCompleteRichResult .autocomplete-richlistbox {
	  padding: 0 !important;
	}
	
	/* restyle popup items */
	panel[type="autocomplete-richlistbox"]:not(#PopupAutoComplete) .autocomplete-richlistitem,
	#PopupAutoCompleteRichResult[autocompleteinput="urlbar"] .autocomplete-richlistitem {
	  -moz-box-orient: vertical !important;
	  min-height: unset !important;
	  height: unset !important;
	  max-height: unset !important;
	  padding: 4px 0px !important;
	  border-radius: 0 !important;
	}

	panel[type="autocomplete-richlistbox"]:not(#PopupAutoComplete) .autocomplete-richlistitem .ac-separator,
	#PopupAutoCompleteRichResult[autocompleteinput="urlbar"] .autocomplete-richlistitem .ac-separator {
	  display:none !important;
	  visibility: collapse !important;
	}

	panel[type="autocomplete-richlistbox"]:not(#PopupAutoComplete) .autocomplete-richlistitem :-moz-any(.ac-site-icon,.ac-title,.ac-action,.ac-url),
	#PopupAutoCompleteRichResult[autocompleteinput="urlbar"] .autocomplete-richlistitem :-moz-any(.ac-site-icon,.ac-title,.ac-action,.ac-url){
	  -moz-margin-start: unset !important;
	  -moz-margin-end: unset !important;
	  -moz-padding-start: unset !important;
	  -moz-padding-end: unset !important;
	}

	panel[type="autocomplete-richlistbox"]:not(#PopupAutoComplete) .autocomplete-richlistitem .ac-type-icon,
	#PopupAutoCompleteRichResult[autocompleteinput="urlbar"] .autocomplete-richlistitem .ac-type-icon {
	  margin-inline-start: 4px !important;
	  margin-inline-end: 4px !important;
	}

	panel[type="autocomplete-richlistbox"]:not(#PopupAutoComplete) .autocomplete-richlistitem .ac-site-icon,
	#PopupAutoCompleteRichResult[autocompleteinput="urlbar"] .autocomplete-richlistitem .ac-site-icon {
	  -moz-margin-start: 4px !important;
	}

	panel[type="autocomplete-richlistbox"]:not(#PopupAutoComplete) .autocomplete-richlistitem .ac-title,
	#PopupAutoCompleteRichResult[autocompleteinput="urlbar"] .autocomplete-richlistitem .ac-title{
	  -moz-margin-start: 5px !important;
	  margin-top: -3px !important;
	}
	
	panel[type="autocomplete-richlistbox"]:not(#PopupAutoComplete) .autocomplete-richlistitem :-moz-any(.ac-url, .ac-action),
	#PopupAutoCompleteRichResult[autocompleteinput="urlbar"] .autocomplete-richlistitem :-moz-any(.ac-url, .ac-action){
	  -moz-margin-start: 25px !important;
	  margin-top: 1px !important;
	}
	
	panel[type="autocomplete-richlistbox"]:not(#PopupAutoComplete) .autocomplete-richlistitem .ac-url,
	#PopupAutoCompleteRichResult[autocompleteinput="urlbar"] .autocomplete-richlistitem .ac-url{
	  padding-bottom: 1px !important;
	}

	panel[type="autocomplete-richlistbox"]:not(#PopupAutoComplete) .autocomplete-richlistitem .ac-action[actiontype=searchengine]:not([selected]),
	#PopupAutoCompleteRichResult[autocompleteinput="urlbar"] .autocomplete-richlistitem .ac-action[actiontype=searchengine]:not([selected]) {
	  display: block !important;
	}

	panel[type="autocomplete-richlistbox"]:not(#PopupAutoComplete) .autocomplete-richlistitem #ibox-spacer,
	#PopupAutoCompleteRichResult[autocompleteinput="urlbar"] .autocomplete-richlistitem #ibox-spacer {
	  width: 100000px !important;
	}
	
	panel[type="autocomplete-richlistbox"]:not(#PopupAutoComplete) hbox[anonid="search-suggestions-notification"],
	#PopupAutoCompleteRichResult[autocompleteinput="urlbar"] hbox[anonid="search-suggestions-notification"] {
	  display: none !important;
	}
	
	panel[type="autocomplete-richlistbox"]:not(#PopupAutoComplete) deck[search-suggestions-notification],
	#PopupAutoCompleteRichResult[autocompleteinput="urlbar"] deck[search-suggestions-notification] {
	  display: none !important;
	}
	
	/* show scrollbar */
	panel[type="autocomplete-richlistbox"]:not(#PopupAutoComplete) scrollbox,
	#PopupAutoCompleteRichResult[autocompleteinput="urlbar"] scrollbox{
	  overflow-y: auto !important;
	}
	
	/* for Windows Classic theme *//*
	panel[type="autocomplete-richlistbox"]:not(#PopupAutoComplete) .autocomplete-richlistitem .ac-title,
	#PopupAutoCompleteRichResult[autocompleteinput="urlbar"] .autocomplete-richlistitem .ac-title {
	  padding-top: 2px !important;
	  padding-bottom: 2px !important;
	}

	panel[type="autocomplete-richlistbox"]:not(#PopupAutoComplete) .autocomplete-richlistbox,
	#PopupAutoCompleteRichResult[autocompleteinput="urlbar"] .autocomplete-richlistbox {
	  padding: 0 !important;
	}
	
	/**/

}

I'm not being able to use it in Firefox 63.0, it doesn't give me the same results I achieve in previous versions:

https://i.imgur.com/jXnYL58.png

How can I migrate it to achive the same results in 63.0 version?

Thanks in advance.

[jscher2000]

On the following page, I see ac_popup_classic_with_two_lines.css was updated "10 hours ago" so perhaps that will resolve the issue (I don't know what the issue is, but if this works, I don't need to know):

https://github.com/Aris-t2/CustomCSSfor ... ocationbar

You can use the "Raw" display of any given file to save that particular file without doing the full download again.

----

Oh wait, I also see one called

ac_popup_classic_with_two_lines_fx63.css

Not sure which is best for you now. Maybe check in the current userChrome.css for guidance.

Apparently, you need both.

[MarkRH]

ac_popup_classic_with_two_lines_fx63.css imports the other one so you only need to include this one.

Code: Select all

/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/

@import "ac_popup_classic_with_two_lines.css";

@-moz-document url(chrome://browser/content/browser.xul) {

	#PopupAutoCompleteRichResult[autocompleteinput="urlbar"] {
	  -moz-binding: url("./ac_popup_classic_with_two_lines_fx63.xml#urlbar-rich-result-popup") !important;
	}

	#PopupAutoCompleteRichResult[autocompleteinput="urlbar"] .autocomplete-richlistitem {
	  -moz-binding: url("./ac_popup_classic_with_two_lines_fx63.xml#autocomplete-richlistitem") !important;
	}

}

[MarcosD2]

Current userChrome.css on 63.0 version:

Code: Select all

/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/

@import "ac_popup_classic_with_two_lines.css";

@-moz-document url(chrome://browser/content/browser.xul) {

   #PopupAutoCompleteRichResult[autocompleteinput="urlbar"] {
     -moz-binding: url("./ac_popup_classic_with_two_lines_fx63.xml#urlbar-rich-result-popup") !important;
   }

   #PopupAutoCompleteRichResult[autocompleteinput="urlbar"] .autocomplete-richlistitem {
     -moz-binding: url("./ac_popup_classic_with_two_lines_fx63.xml#autocomplete-richlistitem") !important;
   }

}

ac_popup_classic_with_two_lines.css and ac_popup_classic_with_two_lines_fx63.css are identical to https://github.com/Aris-t2/CustomCSSfor ... ocationbar content.


Result achieved: https://i.imgur.com/dEZwfRy.png

Result desired (just like 62.0.3): https://i.imgur.com/9cFSgB8.png

I want all properties of my first userChrome.css posted (http://forums.mozillazine.org/viewtopic ... #p14813131) working on 63.0+ versions, but I'm not being able to do it!

Thanks for all replies.

[Aris]

@MarcosD2

You need all new and old files for Firefox 63+:
https://github.com/Aris-t2/CustomCSSfor ... _lines.css
https://github.com/Aris-t2/CustomCSSfor ... s_fx63.css (it imports all code from the above, but uses a different xml)
https://github.com/Aris-t2/CustomCSSfor ... s_fx63.xml

https://github.com/Aris-t2/CustomCSSforFx/issues/153

[MarcosD2]

Problem solved.

This is my folder structure in 63.0+ version:



Thanks!!!!

[Mudder]

Well, I don't understand, other than slowing the browser down, v63 didn't change the appearance of my browser.
Still frustrated though that its' not as 'snappy' as it was before.