Hello!

As you can see in the image, the notification bar is quite tall. But I can’t seem to make it any smaller.

The infobar.css file in the Firefox source code contains the following code:

:host(.infobar) {
  .container {
    /* Don't let lwthemes set a text-shadow. */
    text-shadow: none;
    padding-block: 3px;
    align-items: center;
  }
  .text-container {
    padding-block: calc(1lh - var(--icon-size) / 2);
  }
  .content {
    gap: 0 12px;
    height: fit-content;
  }
  .close {
    margin-block: 4px;
    margin-inline-start: 8px;
    align-self: flex-start;
  }
}

Despite this, I can’t seem to reduce the paddings/margins to lower the height of this bar (regardless of its content: pop-up notification, DRM notification, etc.).

I’d also like to remove the icon (the “i” inside a circle, before the text “Firefox prevented…”).

You can try out this type of bar by visiting this website, for example.

Thank you very much in advance for any help you can provide!

  • MrOtherGuy@lemmy.worldM
    2·
    2 months ago

    Similar to ::part, the :host selector is not usable from within userChrome.css. So I guess the only way here would be to make the things inside the shadow-root inherit some variables and use those:

    .infobar{
  --uc-container-block-padding: 0px;
  --uc-close-button-block-margin: 0px;
}
moz-button.close{ margin-block: var(--uc-close-button-block-margin, 4px) !important }
div.container { padding-block: var(--uc-container-block-padding, 3px) !important }

    This is a bit unfortunate complication, that could in theory break a bit if eg. eg.container elements would ever be outside of .infobar (which I don’t think is currently the case). But otherwise it should work just fine.

    • PleaseBeKindPlease@lemmy.worldOP
      1·
      2 months ago

      Thanks for this great idea! I was thinking of changing the padding-block on .text-container instead, but it’s obviously the same principle.

      Your code might work… but the problem is that if padding-block isn’t defined in certain contexts, or if it’s set to a different value, then it automatically defaults to 3px. For example, in the moz-message-bar.css file, we can find:

      .text-container {
  padding-block: calc((var(--message-bar-container-min-height) - 1lh) / 2);
}

      Is it possible to specify something like this instead:

      div.text-container { padding-block: var(--uc-container-block-padding, initial) !important }

      Or even simply:

      div.text-container { padding-block: var(--uc-container-block-padding) !important }

      In that case, will the value of padding-block (when --uc-container-block-padding is not defined) be its initial value? Or will it be reset to 0px?

      Thank you very much for your help and advice!

      • MrOtherGuy@lemmy.worldM
        1·
        2 months ago
        div.text-container { padding-block: var(--uc-container-block-padding, initial) !important }

        Sure, if padding-block isn’t set then initial should be alright. I’m guessing the initial value would be 0px so it’s probably ok to not set any fallback value.

        But there’s actually a rather recent value that you could use in place of initial - that is revert-rule. Whereas initial makes the property use it’s “browser default” value, using revert-rule as a fallback makes it use whatever it would have been without that custom style rule - so it would in this case revert to calc((var(--message-bar-container-min-height) - 1lh) / 2).