Requiring AUI Buttons Web resources in mobile view

abdullah.a · December 5, 2017, 7:05am

We have a couple of confluence macros that we recently also enabled in mobile view. These macros are really simple that just render a vm template with some regular link buttons. There is some CSS but no JS.

The action buttons styling is following AUI buttons class description here:

<button class="aui-button aui-button-primary">Button Title</button>

The above documentation states that you do not need to explicitly require the web resource key as its included in the AUI core.

The button styling appears fine in desktop view. However, in mobile view, the css styling for these classes aren’t downloaded.

We tried to add a condition to require the AUI buttons web resource in mobile view like this:

in VM file:

#if ($isMobile)
    #requireResource("plugin-key:myResourcesKey")
#end

and in atlassian-plugin.xml

<web-resource key="myResourcesKey" name="Mobile Macros Resources">
        <dependency>com.atlassian.auiplugin:aui-buttons</dependency>
    </web-resource>

However, the above method didn’t work. I’ve tried different ways too but it won’t work. The only way that worked with me was to put my own CSS file and style the buttons similar to the AUI buttons style. But this is not a good fix at all, and I want to use the proper AUI resources to match between mobile and desktop. Any ideas or tips?

asalma · November 9, 2018, 4:53pm

Same issue happening for our team - we’re converting plugins to work on mobile, but the aui dependencies aren’t being loaded in.

Please advise and thank you

Adam

daz · November 13, 2018, 10:07am

Hey @abdullah.a @asalma,

How are you constructing the mobile view? Do you reuse the product’s webResourceManager or pageBuilderService, or do you construct your own?

Are you able to provide a sample of the URLs that end up in the browser? Typically, the WRM will generate batch resource URLs that help illustrate which resources have been included and which have been excluded. As an example, on the dashboard page in Jira, you might see a URL like the following:

https://ecosystem.atlassian.net/s/<hashes-and-stuff>/_/download/contextbatch/js/browser-metrics-plugin.contrib,-_super,-atl.dashboard,-atl.general/batch.js

This URL is loading all web-resources referenced in the browser-metrics-plugin.contrib context, but omitting resources referenced in the superbatch, the atl.dashboard, and atl.general contexts.

What may be happening in your mobile view – depending on how you’re constructing and using the WRM – is that the WRM thinks the aui-buttons resource has already been loaded (e.g., it was referenced in the superbatch), so it is not being output in your page’s resource request.

abdullah.a · November 13, 2018, 1:18pm

Hey @daz,

Yes, using the webResourceManager.

When I’m in mobile view, this is the batch.css url that is in my network tab.

https://<base-Url>/s/<hashes-and-stuff>/_/plugins/servlet/mobile/download/contextbatch/css/atl.mobile.confluence.app.frame,atl.mobile.confluence.view.content,atl.mobile.confluence.view.comments/batch.css

@asalma
We fixed this issue using a condition. In mobile view, it seems that the css used is using different classes. I’m not sure if this is the ideal fix tbh but it works, and our buttons seem to match the other buttons used by confluence that we see in the mobile view.

so we did this in our template vm file:

#set($buttonClass = "#if ($isMobile) button primary #else aui-button aui-button-primary #end")

Then we used the $buttonClass in the class of that button or link.

The reason is if you look at the batch.css downloaded in the network tab: This is the css that is downloaded. Look at the class names used.

Abdullah