[Proposal] Make a arc-ui alternative that really looks and mimic arc browser using sideberry

[benyaminl]

So after tinkering with your code, I really amazed with css3 has(). and it really helps me to manuver new ideas. Sideberry+ArcUI make it look near the arc browser workflow, albeit not 100%

So here is my code

#urlbar-container:not(:has(#urlbar[breakout-extend])) {
    top: calc(2*var(--sidebar-padding) + 2rem);
    left: 0;
    transform: none;
    margin: 0 var(--sidebar-padding) !important;
    width: calc(100% - .8rem) !important;

    & #urlbar {
        box-shadow: none;
        background-color: var(--sidebar-element-background-color) !important;
        border: none !important;
        height: 3.5rem !important;
        transition: background-color .1s ease-in-out !important;

        &:hover, &:[selected] {
            background-color: var(--sidebar-element-hover-background-color) !important
        }
    }

    & .identity-box-button,
    & #tracking-protection-icon-container {
        width: 1.8rem;
        height: 1.8rem;
        margin: auto 0;

        & image {
            margin: auto !important
        }
    }

    & .urlbar-go-button {
        display: none
    }

    & .urlbar-input-container {
        border: none !important;
        padding: 0 !important
    }

    & #identity-box {
        margin-right: .5rem !important
    }

    & .urlbar-input-box {
        font-size: 16px !important
    }

    & #urlbar-input {
        text-overflow: ellipsis
    }
}

#urlbar,
#urlbar-container,
#urlbar-input-container {
    --urlbar-height: 2rem !important;
    --urlbar-toolbar-height: 3.5rem !important;
    --urlbar-container-height: 3.5rem !important
}

#urlbar {
    box-shadow: var(--surface-shadow);
    border: 2px solid var(--color-stroke) !important;
    border-radius: var(--surface-rounding) !important;
    background-color: var(--color-surface) !important;
    padding: .2rem !important;
    transition: none !important
}

#urlbar-background {
    border-radius: calc(var(--surface-rounding) - 2px) !important;
    background-color: var(--color-surface) !important;
    border: none !important
}

#urlbar-container {
    z-index: 10;
    top: 28vh;
    left: calc(50vw - var(--browser-padding) + var(--sidebar-correction)*(var(--sidebar-width) + var(--browser-padding)/2) - var(--browser-padding)/2);
    transform: translate(-50%);
    width: clamp(35rem, 35rem + 35vw, 46rem) !important;
    position: fixed !important
}

#urlbar-go-button {
    margin: auto 0
}

.urlbar-input-box {
    font-weight: 600;
    font-size: 18px !important
}

#urlbar-results {
    flex-direction: column;
    gap: .2rem;
    display: flex !important
}

.urlbarView-body-inner,
.search-one-offs {
    border: none !important
}

.urlbarView-body-outer {
    border-top: 2px solid var(--color-stroke);
    border-bottom: 2px solid var(--color-stroke)
}

.urlbarView-row {
    transition: background-color .1s ease-in-out;
    border-radius: var(--surface-rounding) !important;
    height: 3.5rem !important;

    &[selected],
    &:hover {
        color: var(--color-text);
    }
}

.searchbar-engine-one-off-item[selected] {
    background-color: var(--color-surface-highlight) !important
}

.search-one-offs {
    height: 3.5rem !important;

    &>* {
        margin: auto 0 !important
    }
}

@property --sidebar-correction {
    syntax: "<number>";
    inherits: true;
    initial-value: 1
}

#navigator-toolbox {
    --sidebar-element-background-color: #ffffff26;
    --sidebar-element-hover-background-color: #ffffff4d;
    --sidebar-padding: .4rem;
    --sidebar-width: 300px;
    --sidebar-translate: var(--sidebar-width) + var(--browser-padding)/2;
    --sidebar-correction: 0;
    --tab-selected-bgcolor: var(--sidebar-element-hover-background-color);
    z-index: 10;
    top: 7.5vh;
/*     left: calc(-1*var(--sidebar-width)); */
    left: calc(var(--browser-padding)/2 + 0.1rem);
    box-shadow: var(--surface-shadow);
    position: absolute;
    transform: translateY(-50%);
    width: calc(var(--sidebar-width) - 4px) !important;
    height: calc(15vh - var(--browser-padding)) !important;
    border: 2px solid var(--color-stroke) !important;
    border-radius: var(--surface-rounding) !important;
    background-color: var(--color-surface) !important;
    padding: var(--sidebar-padding) !important;
    transition: left .15s ease-in-out, --sidebar-correction .15s ease-in-out !important;

    &:before,
    &:after {
        content: "";
        width: var(--browser-padding);
        height: 100%;
        position: absolute;
        top: 0
    }

    &:before {
        left: calc(-1*var(--browser-padding))
    }

    &:after {
        right: calc(-1*var(--browser-padding))
    }

    &:has(#toolbar-menubar[inactive]):not(:has(:is(#urlbar[breakout-extend], #main-menubar):hover)):hover {
        --sidebar-correction: 0;
/*         left: calc(var(--browser-padding)/2) */
        left: calc(var(--browser-padding)/2 + 0.1rem);
    }
}

/* side bar */
#sidebar-box {
	height: 83.5vh;
	margin-top: 15vh;
}
/* end sidebar */

/* hide show sidebar - IT'S CRAZY! */
#main-window:has(#sidebar-box[hidden]) {
    #navigator-toolbox 
    {
        --sidebar-correction: 1;
        left: calc(-1*var(--sidebar-width));
    }
}
/*  */

.titlebar-spacer,
#customizableui-special-spring1,
#customizableui-special-spring2,
#OtherBookmarks,
#scrollbutton-up,
#scrollbutton-down,
spacer,
#save-to-pocket-button,
#fxa-toolbar-menu-button,
#unified-extensions-button,
#PanelUI-menu-button,
#alltabs-button,
#tabbrowser-arrowscrollbox-periphery {
    display: none
}

#titlebar {
    height: 2rem !important
}

#PanelUI-menu-button {
    --toolbar-start-end-padding: 2px
}

#nav-bar {
    --toolbar-bgcolor: transparent;
    top: var(--sidebar-padding);
    right: var(--sidebar-padding);
    border: none !important;
    position: absolute !important
}

.titlebar-button {
    padding: .25rem !important;
    position: fixed;
    left: 0;
    /* display: none; */

    & image {
        transition: background-color .1s ease-in-out;
        background-color: var(--sidebar-element-background-color) !important;
        background-image: none !important;
        width: .95rem !important;
        height: .95rem !important
    }

    &.titlebar-close:hover image {
        background-color: #f87171 !important
    }

    &.titlebar-min:hover image {
        background-color: #fcd34d !important
    }

    &:where(.titlebar-max, .titlebar-restore):hover image {
        background-color: #4ade80 !important
    }
}

#PersonalToolbar {
    max-height: none !important;
    padding: 0 !important
}

#nav-bar:has(#urlbar[breakout-extend])~#PersonalToolbar:before {
    content: "";
    top: calc(var(--sidebar-padding) + 2rem + var(--sidebar-padding));
    border-radius: var(--surface-rounding);
    background-color: var(--sidebar-element-background-color);
    width: calc(100% - .8rem);
    height: 3.5rem;
    position: absolute
}

#PlacesToolbarItems {
    gap: var(--sidebar-padding);
    padding-top: calc(var(--sidebar-padding) + 3.5rem + var(--sidebar-padding));
    grid-template-columns: 1fr 1fr 1fr 1fr;
    display: grid;
    overflow: visible !important;

    & .bookmark-item {
        height: 3.5rem;
        transition: background-color .1s ease-in-out;
        visibility: visible !important;
        border-radius: var(--surface-rounding) !important;
        background-color: var(--sidebar-element-background-color) !important;
        margin: 0 !important;

        &:hover {
            background-color: var(--sidebar-element-hover-background-color) !important
        }

        & .toolbarbutton-icon {
            width: 1.25rem !important;
            height: 1.25rem !important;
            margin-inline-end: 0 !important
        }

        & .toolbarbutton-text {
            display: none !important
        }
    }
}

.scrollbox-clip scrollbox * {
    gap: var(--sidebar-padding);
    flex-direction: column;
    width: 100%;
    display: flex;
    overflow-y: scroll
}

#navigator-toolbox:has(#PersonalToolbar[collapsed=false]) {
    &:has(.bookmark-item:nth-last-child(n+1)) #tabbrowser-arrowscrollbox {
        --tabs-top-padding: calc(3.5rem + var(--sidebar-padding))
    }

    &:has(.bookmark-item:nth-last-child(n+5)) #tabbrowser-arrowscrollbox {
        --tabs-top-padding: calc(2*(3.5rem + var(--sidebar-padding)))
    }

    &:has(.bookmark-item:nth-last-child(n+9)) #tabbrowser-arrowscrollbox {
        --tabs-top-padding: calc(3*(3.5rem + var(--sidebar-padding)))
    }

    &:has(.bookmark-item:nth-last-child(n+13)) #tabbrowser-arrowscrollbox {
        --tabs-top-padding: calc(4*(3.5rem + var(--sidebar-padding)))
    }

    &:has(.bookmark-item:nth-last-child(n+17)) #tabbrowser-arrowscrollbox {
        --tabs-top-padding: calc(5*(3.5rem + var(--sidebar-padding)))
    }

    &:has(.bookmark-item:nth-last-child(n+21)) #tabbrowser-arrowscrollbox {
        --tabs-top-padding: calc(6*(3.5rem + var(--sidebar-padding)))
    }
}

#tabbrowser-arrowscrollbox {
    --tabs-top-padding: 0px;
    position: absolute;
    right: 0.4rem;
    display: none !important;
    top: -1rem !important;
    width: calc(var(--sidebar-width) - 2rem) !important;
    padding-top: calc(1.5rem + 2.5rem + 3*var(--sidebar-padding) + var(--tabs-top-padding)) !important;

    /* &:after {
        content: "  Home";
        top: calc(var(--tabs-top-padding) + 1.5rem);
        border-bottom: 1px solid var(--color-stroke);
        width: 100%;
        font-weight: 700;
        position: absolute;
        left: 0;
        height: 2rem !important
    } */

    & .tabbrowser-tab {
        width: 100% !important;
        max-width: none !important;
        max-height: 2.2rem !important;
        padding: 0 !important;
        

        &:hover .tab-background:not([selected]) {
            background-color: var(--color-stroke) !important
        }

        &:not([fadein]) {
            display: none
        }
    }

    & .tab-background {
        transition: background-color .1s ease-in-out;
        border-radius: 5px !important;
        outline: none !important;
        margin: 0 !important;

        &[selected] {
            box-shadow: none !important;
            background-color: var(--color-surface-highlight) !important;
            opacity: 0.8;
            padding: 0 0.5rem;
        }
    }

    & .tab-content {
        padding: 0 0.2rem !important
    }

    & .tab-icon-image {
        margin-right: .6rem !important
    }

    & .tab-close-button {
        border-radius: 100% !important
    }
}

#firefox-view-button {
    bottom: var(--sidebar-padding);
    left: var(--sidebar-padding);
    position: absolute;

    & image {
        transition: background-color .1s ease-in-out
    }
}

#new-tab-button {
    bottom: var(--sidebar-padding);
    right: var(--sidebar-padding);
    position: absolute;
    display: block !important;

    & image {
        transition: background-color .1s ease-in-out
    }
}

#toolbar-menubar:not([inactive]) #menubar-items {
    left: calc(.5rem + var(--sidebar-correction)*(var(--sidebar-width) + var(--browser-padding)/2))
}

#menubar-items {
    z-index: 30;
    position: absolute;
    top: .5rem;
    left: 200vw
}

#main-menubar {
    box-shadow: var(--surface-shadow);
    transition: background-color .1s ease-in-out;
    overflow: hidden;
    border: 2px solid var(--color-stroke) !important;
    border-radius: var(--surface-rounding) !important;
    background-image: none !important;
    background-color: var(--color-surface) !important;
    display: flex !important;

    &:focus-within {
        background-color: red !important
    }

    & menu {
        border: none !important;
        padding: .5rem 1rem !important;

        &:hover,
        &[open] {
            background-color: var(--color-surface-highlight) !important
        }
    }
}

screenshots-buttons {
    box-shadow: var(--surface-shadow);
    top: calc(var(--browser-padding) + .5rem) !important;
    right: calc(var(--browser-padding) + .5rem) !important;
    border: 2px solid var(--color-stroke) !important;
    border-radius: var(--surface-rounding) !important;
    background-color: var(--color-surface) !important;
    padding: .5rem !important;
    position: fixed !important
}

#visible-page,
#full-page {
    width: 7.5rem;
    height: 6rem;
    transition: background-color .1s ease-in-out;
    border-radius: calc(var(--surface-rounding) - 1.5rem) !important;
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    padding-bottom: 0 !important;

    &:hover {
        background-color: var(--color-surface-highlight) !important
    }
}

#tabbrowser-tabpanels, #tabbrowser-tabpanels, #tabbrowser-tabbox, browser[contextmenu="contentAreaContextMenu"]
{
    border-radius: var(--surface-rounding) !important;
}


#full-page {
    margin-left: .5rem !important
}

#statuspanel {
    border: 2px solid var(--color-stroke) !important;
    border-radius: var(--surface-rounding) !important;
    background-color: var(--color-surface) !important;
    max-width: 40% !important;
    margin: .5rem !important;
    padding: .25rem 1rem !important
}

#statuspanel-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text) !important;
    background-color: #0000 !important;
    border: none !important;
    padding: 0 !important
}

#sidebar-box {
    box-shadow: var(--surface-shadow);
    overflow: hidden;
    border: 2px solid var(--color-stroke) !important;
    border-radius: var(--surface-rounding) !important;

    &[sidebarcommand*=sidebar-action]>#sidebar-header {
        display: none !important
    }
}

#sidebar-header {
    border: none !important
}

:is(#sidebar-switcher-target, #sidebar-close):hover {
    background-color: var(--color-surface-highlight) !important
}

#sidebar-splitter {
    width: calc(var(--browser-padding)/2) !important;
    background-color: #0000 !important;
    border: none !important
}

:root {
    --browser-padding: .5rem;
    --surface-rounding: 0.6rem;
    --surface-shadow: 0 2px 10px #00000040;
    --color-surface: var(--toolbar-bgcolor);
    --color-surface-highlight: var(--urlbarView-hover-background);
    --color-stroke: var(--urlbarView-hover-background);
    --color-text: var(--lwt-text-color, var(--toolbar-color));
    font-size: 16px !important
}

#browser {
    padding: var(--browser-padding);
    background-color: var(--color-surface) !important
}

#appcontent {
    border-radius: var(--surface-rounding);
    border: 1px solid var(--color-surface);
    box-shadow: var(--surface-shadow);
    overflow: hidden
}

:root[inFullscreen] {
    & #browser {
        padding: 0
    }

    & #appcontent {
        border: 0
    }
}

The Result is astonishing tbh (for me).
Group/Folder
tab tree, hide show sidebar like arc browser using has() css based on sidebar show or hidden. I still hasn't figure all of it (like strange URL Bar pop up but on side bar it's blank). but the workflow really mimicks arc browser.

Screencast.from.2024-09-08.12-07-25.mp4

It will be awesome probably if you think this can be incorporated under arc-ui umbrella ( I do see others working on https://github.com/betterbrowser/arcfox, but sadly they are go down using workaround of extension, not as what you done with the code, and I think yours better, and it's only my humble opinion, as their color is really hacky and cause me headache.., no mnemonics or alt menu works, etc, but your userChromecss made it works!)

That's all from me.

Thank you!

[dreisss]

First of all, thank you for your effort and time showing all these points, I really appreciate it.

And inittialy I was planning to use Arc UI as natively as possible in Firefox, that was one of the reasons I didn't focus on using an extension with it, and mostly this was just for me, so I created it with my demands.

But I agree, so I'm thinking about creating a sidebery compatible version, but keeping the single userChrome.css too.

And once again, thank you very much for your feedbacks.

[loaykhalifa]

hi benyaminl
can you fix this issue i'm using MacOS & i use your code

[benyaminl]

You can try change

/* side bar */
#sidebar-box {
	height: 83.5vh;
	margin-top: 15vh;
}
/* end sidebar */

to

/* side bar */
#sidebar {
	height: 83.5vh;
	padding-top: 15vh;
}
/* end sidebar */

I Don't have mac with me so I can't test