Help us test the new header code!

Feature
1

I’ve just merged another client side performance improvement for Discourse. Our site header has been re-written using the widget code that gave us a huge performance increase within topics.

The site header is present on every page and our benchmarks showed that it often took up 1/4 of the initial rendering time of a Discourse page. With the new code, it renders roughly 8x faster than before, which should be a significant improvement on android devices.

Since this is a major re-write, the odds of it including regressions are quite high, so I’d like to warn everyone now that if you are following the tests-passed branch of Discourse you might want to wait a few days before updating unless you are comfortable helping us track down bugs.

In the meantime, please use this topic to report any issues you encounter and I’ll be fixing them as quickly as I can.

Fixes

  • Navigating directly between topics wasn’t updating the title of the topic
  • Clicking categories was not closing the menu
  • Cmd / Shift clicking links didn’t open them in new tabs
  • Topic status icons were missing in topics
  • HTML entities were missing from titles
  • Weird resizing of home logo
  • Right clicking on the logo in Firefox was broken
  • Middle clicking on user notifications was broken
  • Missing alt tag on user notifications
  • Akismet link was missing
  • Widget setting for custom home logo urls
  • Similar topics stopped displaying
  • Search menu would lose the context
  • Header positioned oddly in Safari
  • Middle clicking search should open it in a new tab
34 Likes
5

Holy shit, it may be confirmation bias, but it feels way faster loading on my Moto X2.

3 Likes
26

Eviltrout, do you plan to move the topic list, like the latest page, to widgets too? I think this would bring the initial render to wow levels.

27

Why? That topic list code was already restructured to reduce the number of Ember calls, and was one of the major perf improvements in previous release (I think 1.2 maybe?)

3 Likes
42

Sorry, but this changes broke our internal plugin that was using the header-after-home-logo and header-under-content plugin outlets.

How can we workaround this issue?

1 Like
43

You should be able to use the decorateWidget plugin API call to customize the header.

For example:

api.decorateWidget('home-logo:after', dec => {
  return h('span', 'I appear after the logo');
});

You can use home-logo:after for after the logo, and header:after for after the header.

3 Likes
46

I’m unsure if this is related to this topic, but pressing the hamburger menu icon fails to show the menu, and gives this error in the console:

This is a norwegian (nb_NO) forum.

Thanks :slight_smile:

1 Like
50

Are we still in “danger, Will Robinson” mode for the tests-passed branch? Or are things basically looking stable?

51

When Dropdown is activated
And I click on the home logo
Then Dropdown should be dismissed on click

I remember fixing this last time but can’t seem to find the issue on meta anymore

1 Like
52

I deployed on our production site yesterday with no issues, FWIW…

1 Like
53

It’s pretty stable now. There might be one or two little quirks but nothing your users should ever notice or worry about in a serious way.

7 Likes
54

Granted if you have plugins that interact with said header, you probably still want to wait.

3 Likes
55

I’d love to help any plugins get updated. I know babble is quite far behind the latest plugin apis, but are there others?

2 Likes
56

Quick Messaging (no idea on how far behind it may be). But that is the only other one that comes to the top of my head.

57

Well the API is not going to change now, and all the widgets support the decorateWidget things for inserting elements. I’d encourage all the plugin authors to update to the new API and please ask me questions if you need pointers!

1 Like
58

My site uses a plugin that put a little icon for Mumble in the header with a server display, but I don’t know how much it’s used outside of us. I was planning to just wait for Babble/Quick Messages to update and use them as a reference to try and update the Mumble plugin.

60

https://meta.discourse.org/t/sign-up-button-disappears-when-sso-is-enabled/28153/15?u=downey

https://meta.discourse.org/t/sign-up-button-disappears-when-sso-is-enabled/28153

2 Likes
61

Question: How do I now add custom menu items into the hamburger menu?

Previously I would use:

<script type='text/x-handlebars' data-template-name='/connectors/site-map-links/events'>
<li><a href="http://example.com/events/" title="Events" class="events-link" target="_blank">Events</a></li>
</script>

I’m not seeing a obvious way of adding the menu items in the right place (after badges and users, before categories).

Thanks.

3 Likes
62

It’s different now. So far it’s possible to add an admin links:

<script type="text/discourse-plugin" version="0.3">
  api.decorateWidget('hamburger-menu:admin-links', helper => {
    var links = [];
    links.push({ href: 'http://example.com/events/',
                 rawLabel: "Events",
                 className: "events-link",
                 contents: () => "Events" });

    return links.map(l => helper.attach('link', l));
  });
</script>

It’s not possible to decorate other place yet. And I am not sure how to capture click event for this.

I can submit a PR to add a decorator for the right spot. Moreover, I wish I can decorate panel (panelContents) at will, i.e. messing around order, stuffs other than links. Don’t know whether this idea makes any sense.

3 Likes