ICEfaces
  1. ICEfaces
  2. ICE-10591

Showcase -> Font Awesome resource loading errors in server log with Liferay Portal portlets

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 4.0
    • Fix Version/s: EE-4.0.0.GA, 4.1
    • Labels:
      None
    • Environment:
      Jenkins EE-4.0 Build# 1
      Browsers: IE11, FF34
      Server: Liferay 6.2 w/ Tomcat 7.0.42
    • Assignee Priority:
      P1

      Description

      General issues
      1) There were repeatedly server errors when adding portlets to pages, testing etc:
      15:39:33,420 ERROR [MissingResourceImpl:78] Resource handler=[com.liferay.faces.bridge.application.R
      esourceHandlerOuterImpl@9c0f666] was unable to create a resource for resourceName=[icefaces.ace/font
      awesome/fontawesome-webfont.eot?] libraryName=[null] contentType=[null]
      15:39:33,430 ERROR [MissingResourceImpl:78] Resource handler=[com.liferay.faces.bridge.application.R
      esourceHandlerOuterImpl@9c0f666] was unable to create a resource for resourceName=[icefaces.ace/font
      awesome/fontawesome-webfont.eot?] libraryName=[null] contentType=[null]

      2) IE11 only: the same browser console errors are seen when testing certain components, however no functional issues found; as example: GMap - Info Window (clicking the "Seven" radio button), Chart Bar (page load):
      CSS3111: @font-face encountered unknown error.
      File: ice02
      CSS3111: @font-face encountered unknown error.
      File: ice02

      3) While testing in IE11, the browser crashed a few times (blank page, "server not responding" message).

      Note: 1) and 2) errors can be reproduced by testing the ace:comboBox portlets.

        Activity

        Hide
        Arturo Zambrano added a comment -

        As for issue #1, the message appears whenever a portlet page that contains components that use FontAwesome is loaded, not at the moment of adding the portlets to the page. There's a message for each component instance on the page. It only happens on IE browsers. The FontAwesome resource still loads correctly.

        The FontAwesome css file specifies two url formats for the same resource--one of them specifically for IE:

        src: url("#

        {resource['icefaces.ace:fontawesome/fontawesome-webfont.eot']}

        ");
        src: url("#

        {resource['icefaces.ace/fontawesome/fontawesome-webfont.eot']}

        ?#iefix")

        I tried removing the first one, but the message still appears. It seems like the URL format for IE is causing the warning message, because it's not declared with the library name and the resource name separately (notice there's no colon), but as a direct resource, and Liferay is complaining about it. Unfortunately, when using the 'library:name' format, the resource can't be loaded on IE.

        Show
        Arturo Zambrano added a comment - As for issue #1, the message appears whenever a portlet page that contains components that use FontAwesome is loaded, not at the moment of adding the portlets to the page. There's a message for each component instance on the page. It only happens on IE browsers. The FontAwesome resource still loads correctly. The FontAwesome css file specifies two url formats for the same resource--one of them specifically for IE: src: url("# {resource['icefaces.ace:fontawesome/fontawesome-webfont.eot']} "); src: url("# {resource['icefaces.ace/fontawesome/fontawesome-webfont.eot']} ?#iefix") I tried removing the first one, but the message still appears. It seems like the URL format for IE is causing the warning message, because it's not declared with the library name and the resource name separately (notice there's no colon), but as a direct resource, and Liferay is complaining about it. Unfortunately, when using the 'library:name' format, the resource can't be loaded on IE.
        Hide
        Arturo Zambrano added a comment -

        Committed fix to the 4.0 trunk at revision 44332 and to the 4.0 EE tag at revision 44333. Modified font resource ie fix syntax in font-awesome.css to avoid warning messages on portlets.

        The initial fix was done under ICE-10370, because the FontAwesome font resource wasn't being loaded on IE8. This new syntax still works on IE8 and avoids the warning messages on Portlets.

        Testing notes: please test all browsers on portlets, paying special attention to IE8. Also test the showcase in a non-portlet environment to make sure all components that use FontAwesome display correctly their icons (comboBox, checkboxButton, radioButton, and the mobi showcase).

        Show
        Arturo Zambrano added a comment - Committed fix to the 4.0 trunk at revision 44332 and to the 4.0 EE tag at revision 44333. Modified font resource ie fix syntax in font-awesome.css to avoid warning messages on portlets. The initial fix was done under ICE-10370, because the FontAwesome font resource wasn't being loaded on IE8. This new syntax still works on IE8 and avoids the warning messages on Portlets. Testing notes: please test all browsers on portlets, paying special attention to IE8. Also test the showcase in a non-portlet environment to make sure all components that use FontAwesome display correctly their icons (comboBox, checkboxButton, radioButton, and the mobi showcase).
        Hide
        Carmen Cristurean added a comment - - edited

        The following components have been tested in showcase in IE8/9/10/11, FF34, Chrome41/ Jenkins EE-4.0 Build 3:
        ace:comboBox, ace:checkboxButton, ace:radioButton, mobile showcase components/styling.

        The following portlets have been tested in showcase-portlet in IE8/9/10/11, FF34, Chrome41/ Jenkins EE-4.0 Build 3:
        ace:comboBox, ace:checkboxButton; there are no portlets demos for ace:radioButton.

        General issue - performance is very poor for the IF4 portlets in IE8.
        Running the demos with IF4 ACE components in IE8 is very slow, and testing the demos for the portlet components is even much slower, almost impossible to test.

        CheckboxButton - Custom Style (portlet)
        The portlet component has a styling issue in IE8/IE9, the green color not being visible when the checkboxButton is checked; not an issue with the ACE component in IE8/IE9.
        This is not an issue in IE11, FF34, Chrome41.

        ComboBox - all demos (portlet)
        The portlet component has a styling issue in all browsers (a shadow on the bottom side of the component, and the arrow is not centered vertically), image attached.

        Known issue:
        Showcase-mobile cannot be tested in IE8/9 because of JS errors.

        Show
        Carmen Cristurean added a comment - - edited The following components have been tested in showcase in IE8/9/10/11, FF34, Chrome41/ Jenkins EE-4.0 Build 3: ace:comboBox, ace:checkboxButton, ace:radioButton, mobile showcase components/styling. The following portlets have been tested in showcase-portlet in IE8/9/10/11, FF34, Chrome41/ Jenkins EE-4.0 Build 3: ace:comboBox, ace:checkboxButton; there are no portlets demos for ace:radioButton. General issue - performance is very poor for the IF4 portlets in IE8. Running the demos with IF4 ACE components in IE8 is very slow, and testing the demos for the portlet components is even much slower, almost impossible to test. CheckboxButton - Custom Style (portlet) The portlet component has a styling issue in IE8/IE9, the green color not being visible when the checkboxButton is checked; not an issue with the ACE component in IE8/IE9. This is not an issue in IE11, FF34, Chrome41. ComboBox - all demos (portlet) The portlet component has a styling issue in all browsers (a shadow on the bottom side of the component, and the arrow is not centered vertically), image attached. Known issue: Showcase-mobile cannot be tested in IE8/9 because of JS errors.
        Hide
        Arturo Zambrano added a comment - - edited

        r44355: modified ace:comboBox styling rule to have more precedence and added styling to reset the structural styling applied by Liferay on it.
        r44356: committed fix to the 4.0 EE tag.

        The styling that Liferay uses for its own interface is very invasive and very general. It gets applied to all text input fields, textareas, etc. This fix only resets the structural styling that was affecting the combo box (paddings, margins, borders). Colours, font sizes and other apprearance-related styling is still applied. This cannot be overridden at the component level, because that depends on the theme. Application developers can always override this styling with custom styling in their applications.

        I couldn't reproduce the ace:checkboxButton issue on IE8 (icepcvm-ie8) on Liferay. I still see the green check mark image. In any case, this is custom application styling and not part of the component per se. Issues of that kind can always be fixed at the app level.

        I also didn't have problems using the portlet showcase apps on IE8. The demos loaded and worked normally for me. There was just a slight delay when opening the drop-down list, but that could be due to the known IE8 poor performance or the machine itself.

        Show
        Arturo Zambrano added a comment - - edited r44355: modified ace:comboBox styling rule to have more precedence and added styling to reset the structural styling applied by Liferay on it. r44356: committed fix to the 4.0 EE tag. The styling that Liferay uses for its own interface is very invasive and very general. It gets applied to all text input fields, textareas, etc. This fix only resets the structural styling that was affecting the combo box (paddings, margins, borders). Colours, font sizes and other apprearance-related styling is still applied. This cannot be overridden at the component level, because that depends on the theme. Application developers can always override this styling with custom styling in their applications. I couldn't reproduce the ace:checkboxButton issue on IE8 (icepcvm-ie8) on Liferay. I still see the green check mark image. In any case, this is custom application styling and not part of the component per se. Issues of that kind can always be fixed at the app level. I also didn't have problems using the portlet showcase apps on IE8. The demos loaded and worked normally for me. There was just a slight delay when opening the drop-down list, but that could be due to the known IE8 poor performance or the machine itself.
        Hide
        Arturo Zambrano added a comment -

        r44387, r44388: added portlet-only custom styling to fix styling issues with ace:comboBox on portlets.

        Modified the previous fix, so it only applies to portlets. It also addresses required-styling demo styling issues.

        Show
        Arturo Zambrano added a comment - r44387, r44388: added portlet-only custom styling to fix styling issues with ace:comboBox on portlets. Modified the previous fix, so it only applies to portlets. It also addresses required-styling demo styling issues.
        Hide
        Carmen Cristurean added a comment -

        Verified showcase-portlet > comboBox with Jenkins EE-4.0.GA Build# 6 in IE11, IE8, FF34, Chrome41.

        Show
        Carmen Cristurean added a comment - Verified showcase-portlet > comboBox with Jenkins EE-4.0.GA Build# 6 in IE11, IE8, FF34, Chrome41.

          People

          • Assignee:
            Carmen Cristurean
            Reporter:
            Carmen Cristurean
          • Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: