vSphere

 View Only
Back to discussions
Expand all | Collapse all

Clarity icons not showing in Firefox from plugin-seed developed plugin

  • 1.  Clarity icons not showing in Firefox from plugin-seed developed plugin

    Posted Oct 31, 2017 08:04 AM

    Hi,

    We've found an issue when registering the latest version of our plugin. The plugin was developed originally from the plugin-seed. Following registration, it works as expected when accessing from the Chrome browser (for both H5 and Flex clients). Please see attached H5 image ("Chrome with Clarity icons.png") with Clarity icons shown (green tick for scan, and warning symbols within the datagrid rows).

    However, when browsing to the plugin view (same VCSA) using Firefox (for H5 and Flex) we find that the Clarity icons are not shown. Please see the H5 screenshot included ("Firefox with no Clarity icons.png").

    The console is clean when inspecting H5 from  the dev tools in Chrome.

    However, when inspecting the Firebug console from Firefox (viewing H5),  issues are reported in the console - including "customElements is not defined". Please see the included screenshot ("Firebug console log.png").

    Could you please help us to resolve this issue ASAP, as we have this error affecting production.

    Kind regards

    [i18nService] Resource key not found. (Bundle: 'VmUi', key: '')  angular.js:13920:17
    ReferenceError: customElements is not defined[Learn More]  scripts.bundle.js:3:18490
    Angular is running in the development mode. Call enableProdMode() to enable the production mode.  core.es5.js:2925
    app.component path = /index.html?view=monitor&locale=en_US&objectId=urn:vmomi:VirtualMachine:vm-668:b4a6a846-625e-4d07-bec7-876d8fbf92b2&objectType=VirtualMachine  app-routing.component.ts:25:6
    XML Parsing Error: no element found
    Line Number 1, Column 1:  ping:1:1
     
     


  • 2.  RE: Clarity icons not showing in Firefox from plugin-seed developed plugin

    Broadcom Employee
    Posted Oct 31, 2017 11:46 PM

    Thanks for attaching screenshots. Can you also provide the version of plugin-seed and Clarity you used, and whether you see the same problem with clarity icons included in the default plugin generated by plugin-seed?



  • 3.  RE: Clarity icons not showing in Firefox from plugin-seed developed plugin

    Posted Nov 01, 2017 08:54 AM

    Hi, 

    The version of theplugin seed is 0.9.8. Changes were implemented from the original code written from the 0.9.7 seed.

    The version of Clarity being used is 0.9.2 (for clarity-angular, clarity-icons, and clarity-ui).

    I haven't tried building a new sample plugin generated by the plugin-seed. Could you guys could look at replicating it that way please?

    Many thanks



  • 4.  RE: Clarity icons not showing in Firefox from plugin-seed developed plugin

    Posted Nov 01, 2017 08:55 AM

    For the clarity versions: 0.9.20, not 0.9.2

    Thanks



  • 5.  RE: Clarity icons not showing in Firefox from plugin-seed developed plugin

    Broadcom Employee
    Posted Nov 02, 2017 01:12 AM

    I was able to reproduce the problem and am talking to the Clarity team to figure out a solution.



  • 6.  RE: Clarity icons not showing in Firefox from plugin-seed developed plugin

    Posted Nov 02, 2017 09:25 AM

    ok, great - we look forward to the response. Thank you



  • 7.  RE: Clarity icons not showing in Firefox from plugin-seed developed plugin

    Broadcom Employee
    Posted Nov 02, 2017 09:13 PM

    The solution is simple, the following line should not be commented out in polyfills.ts

    import '@webcomponents/custom-elements/custom-elements.min.js';



  • 8.  RE: Clarity icons not showing in Firefox from plugin-seed developed plugin

    Posted Nov 05, 2017 10:51 PM

    Hi,

    We've made the change and re-tested in Firefox. It appears this works, and the icons are now displayed - thank you :)

    As a note, we get the following warning now showing in the Firebug console, though this doesn't appear to affect the plugin functioning:

    Custom Elements:Element#attachShadowwas not patched. polyfills.bundle.js:125:108

    Many thanks,

    Warren



  • 9.  RE: Clarity icons not showing in Firefox from plugin-seed developed plugin

    Posted Nov 05, 2017 11:44 PM

    Unfortunately this shouldn't be closed. After making this change, it appears that we now get intermittent failures in loading our Monitor / Summary views, where the content doesn't load.

    This occurs only in Firefox, from a timeout, and never in Chrome.

    Please see attached screenshot



  • 10.  RE: Clarity icons not showing in Firefox from plugin-seed developed plugin

    Broadcom Employee
    Posted Nov 06, 2017 06:09 PM

    I can't reproduce this error in Firefox using the standard plugin-seed.  I am not sure it is related to the warning about `Element#attachShadow` was not patched since a google search shows  several threads about the fact that this is not a real error:

    FireFox 51 (curet) fails Custom Elements: `Element#attachShadow` was not patched. · Issue #63 · webcomponents/custom-ele…

    [4.0] Custom Elements: `Element#attachShadow` was not patched. · Issue #17914 · joomla/joomla-cms · GitHub

    Can you provide a simple plugin out of plugin-seed where I can see the same problem?



  • 11.  RE: Clarity icons not showing in Firefox from plugin-seed developed plugin

    Posted Nov 10, 2017 11:17 AM

    Hi Laurentsd,

    I've dones some further testing on this and believe it was due to an optimistic timeout within an observable returning data. It was only happening in Firefox, so looked to be related to the browser. I've relaxed the timeouts and it seems to be working in both browsers now.

    Therefore, I believe this can be closed.

    Many thanks



  • 12.  RE: Clarity icons not showing in Firefox from plugin-seed developed plugin

    Broadcom Employee
    Posted Nov 10, 2017 07:43 PM

    Thanks for the update. Glad you fixed it on your side.