‹ BackHN Continuity

Thread

The new Firefox design is here

111 points · 163 comments · timpera

  1. n4bz0r · · focus · HN ↗
    The UI was tidy and nearly perfect, now it's all over the place: weird paddings, different border radiuses even within a single element, clashing background colors, and boy, do I love rainbow gradients everywhere.

    Update: for those unhappy with the changes, you can roll them back for now:

      about:config -> browser.nova.enabled -> false
    1. romanovcode · · focus · HN ↗
      I cannot find a setting to disable the gradient. It's very annoying indeed.
      1. alsetmusic · · focus · HN ↗
        I just turned off auto-updates after reading this. Safe for now.
        1. sunaookami · · focus · HN ↗
          Naive and outright dangerous advice, every release fixes important security issues.
          1. pureliquidhw · · focus · HN ↗
            Then separate UI updates from security updates. No need for them to be bundled. Gradients and insane padding pushing people to not update make them inherently less secure!
            1. mossTechnician · · focus · HN ↗
              It's possible to stick to an ESR release to avoid feature updates in the past, but recently, Mozilla has started bundling feature updates into bugfixes.

              e.g. <a href="https:&#x2F;&#x2F;www.firefox.com&#x2F;en-US&#x2F;firefox&#x2F;152.0.4&#x2F;releasenotes&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.firefox.com&#x2F;en-US&#x2F;firefox&#x2F;152.0.4&#x2F;releasenotes&#x2F;

          2. avazhi · · focus · HN ↗
            &gt; Naive and outright dangerous advice,

            Well maybe the brain damaged mozilla devs shouldn&#x27;t force visual diarrhea down everybody else&#x27;s throat and then users wouldn&#x27;t block updates. If only Mozilla&#x27;s devs could have learned from how people deal with Microsoft and Apple doing similarly asinine redesigns.

          3. Telaneo · · focus · HN ↗
            If users still find that preferable, then that shouls tell you something about how horrible the experience is to users.
        2. probablyStimmed · · focus · HN ↗
          You should probably use Firefox ESR instead, disabling updates just isn’t an option anymore.
      2. n4bz0r · · focus · HN ↗
        The gradient is part of the theme. Updated the post with how to roll back the UI changes for now. After rolling back, select an old theme.
      3. coldpie · · focus · HN ↗
        You can browse the Themes to try to find one you like better. But yeah it&#x27;d be nice if one of the default built-in themes was super plain. Closest they have available by default is a grayscale gradient (&quot;Ash&quot;).
        1. justin-reeves · · focus · HN ↗
          &gt; Proton by Firefox

          &gt; A classic grey palette for a calm, focused feel.

          <a href="https:&#x2F;&#x2F;addons.mozilla.org&#x2F;en-CA&#x2F;firefox&#x2F;addon&#x2F;firefox-proton&#x2F;" rel="nofollow">https:&#x2F;&#x2F;addons.mozilla.org&#x2F;en-CA&#x2F;firefox&#x2F;addon&#x2F;firefox-proto...

      4. supermatou · · focus · HN ↗
        Here you go: add this to your userChrome.css file.

        &#x2F;disable gradient

        &#x2F; 1. Remove the toolbar&#x2F;tab bar gradient completely &#x2F;

        :root:not([theme-image-in-toolbox]) body,

        :root[theme-image-in-toolbox] #navigator-toolbox {

            background-image: none !important;
        }

        &#x2F; 2. Strip Nova purple accent color&#x2F;focus outlines from the URL &amp; search bar *&#x2F;

        :root {

            --toolbar-field-focus-background-color: var(--toolbar-field-background-color) !important;
        }

        .urlbar-input-container, #searchbar {

            --toolbar-field-border-color-focus: var(--toolbar-field-border-color) !important;

    box-shadow: none !important;

}
        1. supermatou · · focus · HN ↗
          Bonus:

          &#x2F;* Hide Kit mascot illustrations from menus, dialogs, and in-app alerts *&#x2F;

          .mascot-icon,

          .panel-header-mascot,

          [mascot=&quot;kit&quot;],

          .onboarding-mascot-container {

              display: none !important;

}
      5. [deleted] · · focus · HN ↗

        [deleted]

      6. lopan · · focus · HN ↗
        A bit late to the party, but this is how I turned off the gradient...

        If your menu bar is hidden: Hamburger icon in top right hand corner &gt; Original profile (or whatever profile is listed there) &gt; Edit this profile &gt; Choose a theme other than System.

        If using the menu bar: Profiles &gt; Manager Profiles &gt; Click the pencil icon on Original profile &gt; Choose a theme other than System.

    2. jsrcout · · focus · HN ↗
      I&#x27;m glad we can roll it back, but wonder how long that will be the case.
    3. satya71 · · focus · HN ↗
      Thanks for the config. To their credit the UI change is instant. I double clicked a few times to find out why the old UI looks better.

      The old UI has less visual noise (at least dark mode on Windows). The new theme has random highlights and high-contrast lines everywhere that draw attention to the browser UI. I want the browser to fade into the background not stand out.

      1. cletusw · · focus · HN ↗
        You can remove the brightly colored (at least in dark mode) lines above every tab in your userChrome.css with:

        ``` .tab-context-line { display: none; } ```

    4. akrakesh · · focus · HN ↗
      And, adding this to userChrome.css removes all rounded corners

          :root {
     --border-radius-small: 0 !important;
     --border-radius-medium: 0 !important;
     --border-radius-large: 0 !important;
     --border-radius-xlarge: 0 !important;
     --border-radius-circle: 0 !important;
    }
    5. probablyStimmed · · focus · HN ↗
      Thanks, that’s a hot tip. How long until it’s mandatory though, I’m wondering.
    6. fender256 · · focus · HN ↗
      OMG, thank you so much, I was getting super irritated by the new design which I didn&#x27;t ask for.
Open on Hacker News to reply ↗

Unofficial Hacker News client; not affiliated with Y Combinator.