URL bar popup on keyboard shortcut

[djenttleman]

It is possible to open the popup URL bar when pressing the keyboard shortcut for new tab?
Action like: Keyboard shortcut trigger the following action: New tab then url popup.

[nuclearcodecat]

i unfortunately don't think it's possible with css. i'll leave this open, maybe someone knows a solution. btw you can press ctrl-L to focus the urlbar

[BeeverFeever]

Would you be able to do something with #urlbar-input:focus ?

[nuclearcodecat]

i don't think it's possible to focus anything with css

[BeeverFeever]

I think I got something working, it is by no means perfect but its a starting point. Some things is that the animations don't work anymore (idk why), there is slight problems with icon alignments, when there is no text in the input field compared to when there is text in it. The url isn't automatically highlighted when you click the urlbar which I find very useful quite often. There is probably other problems that I just don't know about as well.

Anyway, here is the config for it. Replaces everything from the urlbar header down to (but not including) the /*? hide search one offs */ comment.

/*! === urlbar === */

/*? rounded url bar and box */
#urlbar-background {
  outline-width: 0 !important;
  background: var(--toolbar-field-background-color) !important;
  border-radius: var(--shimmer-urlbar-rounding) !important;
  transition: all 0.1s linear !important;
}

/*? rounded buttons inside urlbar (firefox logo on about pages, padlock, trans, etc.) */
#identity-box > box, #tracking-protection-icon-container, #page-action-buttons > *, #urlbar-revert-button-container, #urlbar-searchmode-switcher {
  border-radius: var(--shimmer-urlbar-rounding) !important;
}

/*? make the background of extended urlbar move down and BROKEN drop a blur behing */
#urlbar:is([breakout][breakout-extend], [breakout][focused]) {
  z-index: 9999 !important;
  position: fixed !important;
  --urlbar-height: auto !important;
  top: 20vh !important;
  background-color: #toolbar-bgcolor !important;
  text-align: center !important;
  transition: margin-top 0.45s cubic-bezier(0.075, 0.82, 0.165, 1) !important;

  left: 20vw !important;
  right: 20vw !important;
  width: auto !important;
}

#urlbar:is([breakout][breakout-extend], [breakout][focused]) #urlbar-background {
  background: var(--toolbar-field-focus-background-color) !important;
  transition: all 0.1s linear !important;
}

/*? urlbox backdrop */
#urlbar:is([breakout][breakout-extend], [breakout][focused])::before {
/*  &:before { */
   content: '' !important;
   width: 100vw !important;
   height: 100vh !important;
   position: fixed !important;
   pointer-events: none !important;
   overflow: hidden !important;
   top: 0 !important;
   left: 0 !important;
   background: color-mix(in srgb, var(--toolbar-field-focus-background-color) 65%, rgba(0, 0, 0, 0)) !important;
/*  } */
}

/*? needed for popup transition to work */
#urlbar {
  margin-top: 0 !important;
  transition: margin-top 0.45s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
}

@media (min-width: 800px) {
  /*? urlbar bigger text */
  #urlbar:is([breakout][breakout-extend], [breakout][focused]) #urlbar-input {
    font-size: 1.5rem !important;
  }

  /*? taller urlbar for bigger text when extended */
  #urlbar:is([breakout][breakout-extend], [breakout][focused]) .urlbar-input-container {
    height: 48px !important;
  }
}

/*? centered text when urlbar not in use */
#urlbar:not(:is([breakout][breakout-extend], [breakout][focused])) #urlbar-input {
  text-align: center !important;
}

/*? center the text further */
#urlbar-input {
  margin-right: 40px !important /* width of identity box */;
}

I found out how to do it from here and tweaked it as needed and as much as I know about css.