├── README.md ├── Screenshots └── Captura de tela de 2019-03-16 16-38-26.png ├── userChrome.css ├── userChrome.js └── userChrome.xml /README.md: -------------------------------------------------------------------------------- 1 | # What is this? 2 | 3 | ChromeFox is a collection of Firefox customizations to emulate Google Chrome's UI. 4 | 5 | # What does it do? 6 | 7 | These configuration files will provide the following Chrome-like appearance and functionality changes: rounded tabs, bigger bookmark bar item padding, bookmark bar shown only on new tab, overlay scrollbars and other small fixes and tweaks. 8 | 9 | ![](https://raw.githubusercontent.com/ipproductions/ChromeFox/master/Screenshots/Captura%20de%20tela%20de%202019-03-16%2016-38-26.png) 10 | 11 | # How do I install it? 12 | 13 | Go to your Firefox profile folder (Help > Troubleshooting Info > Profile Directory) and place them inside your "chrome" folder (create a folder with that name if it's not already there). 14 | -------------------------------------------------------------------------------- /Screenshots/Captura de tela de 2019-03-16 16-38-26.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ipproductions/ChromeFox/cba1b7ee5bf2cb0e7b071131d5d0c698cec8103f/Screenshots/Captura de tela de 2019-03-16 16-38-26.png -------------------------------------------------------------------------------- /userChrome.css: -------------------------------------------------------------------------------- 1 | 2 | /* ROUNDED TABS */ 3 | .tabbrowser-tab { 4 | box-sizing: border-box; 5 | border-radius: 7px 7px 0 0 !important; 6 | } 7 | 8 | .tabbrowser-tab[selected="true"] .tab-text.tab-label { 9 | color: black !important; 10 | } 11 | 12 | .tabbrowser-tab[selected="true"] .tab-background { 13 | border: 0px solid gray !important; 14 | border-bottom: none !important; 15 | opacity: 1; 16 | } 17 | 18 | .tab-background { 19 | border: none !important; 20 | border-radius: 7px 7px 0 0 !important; 21 | background: black; 22 | opacity: .1; 23 | } 24 | 25 | .tab-line { 26 | display: none !important; 27 | } 28 | 29 | .tabbrowser-tab[selected="true"]:hover { 30 | border: none !important; 31 | } 32 | 33 | [tabsintitlebar]:root:not([extradragspace]) .tabbrowser-tab::after, 34 | .tabbrowser-tab:hover::after, 35 | #tabbrowser-tabs:not([movingtab])>.tabbrowser-tab[beforehovered]::after { 36 | border: none !important; 37 | } 38 | /**/ 39 | 40 | /* REDUCE LABEL TEXT FADE */ 41 | .tab-label-container[textoverflow][labeldirection="ltr"]:not([pinned]) { 42 | mask-image: linear-gradient(to left, transparent, black 20px) !important; 43 | } 44 | /**/ 45 | 46 | 47 | /* TAB DIVIDER TRANSP. FIX */ 48 | .tabbrowser-tab::after { opacity:0.05 !important; } 49 | .titlebar-spacer[type="pre-tabs"] { opacity:0.05 !important; } 50 | /**/ 51 | 52 | 53 | /* ROTATE ADD-ON BUTTON */ 54 | #PlacesChevron, #nav-bar-overflow-button { transform: rotate(90deg) !important; } 55 | /**/ 56 | 57 | 58 | /* FIX BOOKMARK BAR PADDING */ 59 | :root[uidensity="compact"] toolbarbutton.bookmark-item:not(.subviewbutton) { padding:5px 10px !important; } 60 | /**/ 61 | 62 | /* BOOKMARK BAR ONLY ON NEW TAB */ 63 | #main-window #PersonalToolbar { 64 | visibility: collapse !important; 65 | } 66 | 67 | #main-window[title^="about:newtab"] #PersonalToolbar, 68 | #main-window[title^="New Tab"] #PersonalToolbar, 69 | #main-window[title^="Novo Separador"] #PersonalToolbar, 70 | #main-window[title^="Nightly"] #PersonalToolbar, 71 | #main-window[title^="Mozilla Firefox"] #PersonalToolbar, 72 | #main-window[title^="Firefox"] #PersonalToolbar, 73 | #main-window[title^="新标签页"] #PersonalToolbar { 74 | visibility: visible !important; 75 | } 76 | /**/ 77 | 78 | 79 | /* OVERLAY SCROLLBAR */ 80 | @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); 81 | 82 | toolbarbutton#alltabs-button { 83 | -moz-binding: url("userChrome.xml#js"); 84 | } 85 | /**/ 86 | 87 | 88 | /* WHITEFLASH FIX */ 89 | #browser vbox#appcontent tabbrowser, 90 | #content, #tabbrowser-tabpanels, 91 | browser[type=content-primary], 92 | browser[type=content] > html 93 | { background: var(--in-content-page-background) !important } 94 | /**/ 95 | 96 | -------------------------------------------------------------------------------- /userChrome.js: -------------------------------------------------------------------------------- 1 | // ==UserScript== 2 | // @name userChrome.js 3 | // @namespace castelo@live.com 4 | // @version 0.0.2 5 | // @note Thanks to ardiman(https://github.com/Endor8/userChrome.js/blob/master/floatingscrollbar/FloatingScrollbar.uc.js) 6 | // @note Thanks to Griever(https://github.com/Griever/userChromeJS/blob/master/SmartScrollbar.uc.js) and Paul Rouget(https://gist.github.com/4003205) 7 | // @note...........0.0.2 Increased width of scrollbar from 2px to 3px 8 | // @note 0.0.1 Initial version 9 | // ==/UserScript== 10 | 11 | (function () { 12 | var prefs = Services.prefs, 13 | enabled; 14 | if (prefs.prefHasUserValue('userChromeJS.floating_scrollbar.enabled')) { 15 | enabled = prefs.getBoolPref('userChromeJS.floating_scrollbar.enabled') 16 | } else { 17 | prefs.setBoolPref('userChromeJS.floating_scrollbar.enabled', true); 18 | enabled = true; 19 | } 20 | 21 | var css = '\ 22 | @namespace url(http: //www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);\ 23 | :not(select):not(hbox) > scrollbar {\ 24 | -moz-appearance: none!important;\ 25 | position: relative;\ 26 | box-sizing: border-box!important;\ 27 | background-color: transparent;\ 28 | background-image: none;\ 29 | z-index: 2147483647;\ 30 | padding: 2px;\ 31 | display: flex!important;\ 32 | justify-content: flex-end;\ 33 | pointer-events: auto;\ 34 | width: auto!important;\ 35 | }\ 36 | :not(select):not(hbox) > scrollbar[orient = "vertical"] {\ 37 | -moz-margin-start: -16px;\ 38 | width: 16px!important;\ 39 | }\ 40 | :not(select):not(hbox) > scrollbar[orient = "vertical"] thumb {\ 41 | border-left: 3px solid rgba(80, 80, 80, 0.75);\ 42 | min-height: 16px;\ 43 | transform: translate(9px, 0px);\ 44 | transition: transform 0.1s linear;\ 45 | }\ 46 | :not(select):not(hbox) > scrollbar[orient = "horizontal"] {\ 47 | margin-top: -16px;\ 48 | height: 16px!important;\ 49 | }\ 50 | :not(select):not(hbox) > scrollbar[orient = "horizontal"] thumb {\ 51 | border-top: 3px solid rgba(80, 80, 80, 0.75);\ 52 | min-width: 16px;\ 53 | transform: translate(0px, 9px);\ 54 | transition: transform 0.1s linear;\ 55 | }\ 56 | :not(select):not(hbox) > scrollbar thumb {\ 57 | -moz-appearance: none!important;\ 58 | border-radius: 0px!important;\ 59 | background-color: rgba(100, 100, 100, 0)!important;\ 60 | pointer-events: auto;\ 61 | }\ 62 | :not(select):not(hbox) > scrollbar:hover {\ 63 | background-color: rgba(90, 90, 90, 0.15);\ 64 | padding: 0;\ 65 | }\ 66 | :not(select):not(hbox) > scrollbar:hover thumb {\ 67 | background-color: rgba(100, 100, 100, 0.5)!important;\ 68 | border-left: 0px;\ 69 | border-top: 0px;\ 70 | transform: translate(0px, 0px);\ 71 | transition: transform 0.1s linear;\ 72 | }\ 73 | :not(select):not(hbox) > scrollbar thumb:hover {\ 74 | background-color: rgba(100, 100, 100, 0.8)!important;\ 75 | }\ 76 | :not(select):not(hbox) > scrollbar thumb:active {\ 77 | background-color: rgba(110, 110, 110, 1)!important;\ 78 | }\ 79 | :not(select):not(hbox) > scrollbar scrollbarbutton, :not(select):not(hbox) > scrollbar gripper {\ 80 | display: none;\ 81 | }'; 82 | 83 | var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService); 84 | var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css)); 85 | 86 | var p = document.getElementById('devToolsSeparator'); 87 | var m = document.createElement('menuitem'); 88 | m.setAttribute('label', "Schwebende Scrollbar"); 89 | m.setAttribute('type', 'checkbox'); 90 | m.setAttribute('autocheck', 'false'); 91 | m.setAttribute('checked', enabled); 92 | p.parentNode.insertBefore(m, p); 93 | m.addEventListener('command', command, false); 94 | 95 | if (enabled) { 96 | sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET); 97 | } 98 | 99 | function command() { 100 | if (sss.sheetRegistered(uri, sss.AGENT_SHEET)) { 101 | prefs.setBoolPref('userChromeJS.floating_scrollbar.enabled', false); 102 | sss.unregisterSheet(uri, sss.AGENT_SHEET); 103 | m.setAttribute('checked', false); 104 | } else { 105 | prefs.setBoolPref('userChromeJS.floating_scrollbar.enabled', true); 106 | sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET); 107 | m.setAttribute('checked', true); 108 | } 109 | 110 | let root = document.documentElement; 111 | let display = root.style.display; 112 | root.style.display = 'none'; 113 | window.getComputedStyle(root).display; // Flush 114 | root.style.display = display; 115 | } 116 | 117 | })(); 118 | -------------------------------------------------------------------------------- /userChrome.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 11 | 12 | 13 | 14 | 23 | 24 | 25 | 26 | --------------------------------------------------------------------------------