Help us test the new header code!

performance

(Robin Ward) #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

Redirect / for non-logged in users?
Header layout with broke with last discourse (9fdea6c)
How to change the .d-header template
Custom navbar not adjusting automatically after update
Quick Messages Plugin
Header search plugin
(Robin Ward) #4

(Rafael dos Santos Silva) #5

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


(Rafael dos Santos Silva) #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.


(Jeff Atwood) #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?)


(Emanuelet) #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?


(Robin Ward) #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.


Adding header links post vdom upgrade
Looking for a developper
(JT) #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:


(Dave McClure) #50

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


(Alan Tan) #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


(Michael Downey) #52

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


(Robin Ward) #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.


(cpradio) #54

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


(Robin Ward) #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?


(cpradio) #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.


(Robin Ward) #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!


(Sam) #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.


(Michael Downey) #60
https://meta.discourse.org/t/sign-up-button-disappears-when-sso-is-enabled/28153/15?u=downey&source_topic_id=43184
https://meta.discourse.org/t/sign-up-button-disappears-when-sso-is-enabled/28153?source_topic_id=43184

(Dean Taylor) #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.


(Erick Guan) #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.