firefox-csshacks/chrome/status_inside_urlbar.css

/* STATUSPANEL INSIDE URLBAR */

/**************
IMPORTANT WARNING

Using this style can lead to long tab switch times (and probably other problems). Everything may be fine when Firefox starts but situation gets gradually worse, although pretty slowly.

Relevant information: https://bugzilla.mozilla.org/show_bug.cgi?id=1496065

**************/


#urlbar .urlbar-input-box{ display: -moz-stack; }
/* -moz-stack causes an subtle issue where in certain scenarios a weirdly aligned "http(s)://" may show up */

#urlbar .urlbar-input-box::after{
  z-index: 2;
  content: "";
  width: 100%;
  height: 100%;
  pointer-events:none;
  background-position: left 2px;
  background-repeat: no-repeat;
  background-image: -moz-element(#statuspanel);
}

:root[uidensity="compact"] #urlbar .urlbar-input-box::after{ background-position-y: 0px }
:root[uidensity="touch"] #urlbar .urlbar-input-box::after{ background-position-y: 3px }

/* Hide the status ovelay when urlbar is hovered */
#urlbar:hover .urlbar-input-box::after{ visibility: hidden }

#urlbar .urlbar-input-box::after{
  display: -moz-box;
}

#statuspanel-inner > #statuspanel-label{
  height:3em;
  min-width: 1000px;
  background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,.8)) !important;
  border: none !important;
  font-size: larger;
  color: inherit !important;
  margin-right: 0px !important;
}
/* If you use a theme where urlbar is partially transparent you should edit this color to something that closely matches the perceived color of urlbar. Or perhaps use background-image - linear-gradient() can work well here. But keep the color or image opaque or otherwise you'll face an issue where urlbar text bleeds through */
#statuspanel-inner{ background-color: var(--toolbar-non-lwt-bgcolor) }

#statuspanel{ color: lightpink; z-index: -1; }
#statuspanel[type="status"] { color: skyblue }

/* Don't show common values to save space (useful for oneliner) - safe to delete these */
/* If you change the font size of the label then you'll have to modify these too */
/* non-https links get a slight red hue */

#statuspanel-inner > #statuspanel-label{ margin-left: -3px !important; }
#statuspanel-inner > #statuspanel-label[value^="http"]{ margin-left: -3.7ch !important; }
#statuspanel-inner > #statuspanel-label[value^="https"]{ margin-left: -6.1ch !important; color: var(--lwt-toolbar-field-color, black) !important}
#statuspanel-inner > #statuspanel-label[value^="www"]{ margin-left: -4.5ch !important; }
#statuspanel-inner > #statuspanel-label[value^="http://www"]{ margin-left: -9.7ch !important; }
#statuspanel-inner > #statuspanel-label[value^="https://www"]{ margin-left: -10.1ch !important; } 
#statuspanel-inner{ margin-left: -1px; }