Firefox Nya Adressfält

11 Apr 2020

firefox awesome bar

Firefox släppte för några dagar sedan version 75 av Firefox, vilket inkluderade det nya adressfältet (aka Awesome bar, vilket är ironiskt, eftersom den nu är allt annat än awesome) det varit prat om ett tag. Det tog mig knappt 30 sekunder att inse att det här inte är något jag kommer kunna leva med (och Firefox är något jag har svårt att leva utan).

Det nya adressfältet ser alltså ut så här nu

Firefox nya adressfält

userChrome.css

För några år sedan minns jag att jag pillade lite med userChrome.css, vilket är ett sätt att anpassa utseendet av Firefox med hjälp av CSS. Jag tänkte att om det finns ett sätt att modifiera utseendet av det nu expanderande adressfältet, så är det med hjälp av userChrome.css. Jag letade mig in på Reddit och hittade en tråd med en lösning på detta.

Så hur gör vi?

  1. Vi måste först lokalisera vår mapp med profiler, den brukar ligga i ~/.mozilla/firefox/ och heter något i stil med hun858y1.default Det går även att hitta profiler genom att gå in på about:profiles via adressfältet
  2. Väl inne i vår profil-mapp så skapar vi en ny mapp vid namn chrome
  3. I chrome så skapar vi en ny fil som heter userChrome.css (~/.mozilla/firefox//chrome/userChrome.css)
  4. Lägg denna kod i userChrome.css
/* REMOVE MEGABAR START
 * VERSION 1.0.3
 * CODE AT: http://userchrome.wesleybranton.com/megabar
 * RELEASE NOTES: http://userchrome.wesleybranton.com/notes/megabar */
@-moz-document url(chrome://browser/content/browser.xhtml) {
    /* DISABLE EXPANDING START */
    #urlbar[breakout][breakout-extend] {
        top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
        left: 0 !important;
        width: 100% !important;
    }
    
    #urlbar[breakout][breakout-extend] > #urlbar-input-container {
        height: var(--urlbar-height) !important;
        padding-block: 0 !important;
        padding-inline: 0 !important;
    }
    
    #urlbar[breakout][breakout-extend] > #urlbar-background {
        animation-name: none !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .05) !important;
    }
    /* DISABLE EXPANDING END */
    
    /* REMOVE URL RESULT PADDING START */
    .urlbarView {
        margin-inline: 0 !important;
        width: 100% !important;
    }

    .urlbarView-row {
        padding-block: 0 !important;
    }
    /* REMOVE URL RESULT PADDING END */
    
    /* MOVE URL RESULT TYPE ICON TO LEFT START */
    .urlbarView-type-icon {
        min-width: 16px !important;
        height: 16px !important;
        margin-bottom: 0 !important;
        margin-inline-start: 0 !important;
    }
    
    .urlbarView-favicon {
        margin-inline-start: 20px !important;
    }
    /* MOVE URL RESULT TYPE ICON TO LEFT END */
}
/* REMOVE MEGABAR END */
  1. Och till sist måste vi öppna upp about:config och leta upp inställningen toolkit.legacyUserProfileCustomizations.stylesheets och ändra värdet till true

Nu kan vi starta om Firefox och njuta av vårt nya (gamla!!) fina adressfält.

Det finns massor av fina modifikationer man kan göra, dyk in i r/FirefoxCSS och se vad du kan hitta!