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!

  • PleaseBeKindPleaseOP
    1·
    3 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!

    • MrOtherGuyM
      1·
      3 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).

      • PleaseBeKindPleaseOP
        1·
        3 months ago

        That’s exactly what I needed. So, the problem is solved. Once again, thank you so much for your help!