SVG skinning issue with ListGrid groupIcon (<span> CSS background-image:url(...) instead of <object>)

[Blama]

Hi Isomorphic,

changing my icons to _Over-etc-suffixed-SVGs with CSS is working good so far, but now I found a place where it does not work (using v11.1p_2018-04-07).
I'm using those files and a BuiltInDS-based testcase.

From this sample:

• This img, renamed to square-red_opened.svg
• This img, renamed to square-red_closed.svg
• This css at it is

BuiltInDS.java:

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.Version;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.data.AdvancedCriteria;
import com.smartgwt.client.data.Criterion;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.SortSpecifier;
import com.smartgwt.client.types.Autofit;
import com.smartgwt.client.types.OperatorId;
import com.smartgwt.client.types.SortDirection;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.layout.SectionStack;
import com.smartgwt.client.widgets.layout.SectionStackSection;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS implements EntryPoint {
    private VLayout mainLayout;
    private IButton recreateBtn;

    public void onModuleLoad() {
        KeyIdentifier debugKey = new KeyIdentifier();
        debugKey.setCtrlKey(true);
        debugKey.setKeyName("D");

        Page.registerKey(debugKey, new PageKeyHandler() {
            public void execute(String keyName) {
                SC.showConsole();
            }
        });

        mainLayout = new VLayout(20);
        mainLayout.setWidth100();
        mainLayout.setHeight100();

        recreateBtn = new IButton("Recreate");
        recreateBtn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                recreate();
            }
        });
        mainLayout.addMember(recreateBtn);
        recreate();
        mainLayout.draw();
    }

    private void recreate() {
        Window w = new Window();
        w.setWidth("95%");
        w.setHeight("95%");
        w.setMembersMargin(0);
        w.setModalMaskOpacity(70);
        w.setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
        w.setTitle("ListGrid.setGroupIcon() as SVG has problems" + w.getTitle());
        w.setShowMinimizeButton(false);
        w.setIsModal(true);
        w.setShowModalMask(true);
        w.centerInPage();

        final ListGrid employeesGrid = new ListGrid();
        employeesGrid.setMinHeight(100);
        employeesGrid.setAutoFitData(Autofit.VERTICAL);
        employeesGrid.setAutoFetchData(false);
        employeesGrid.setDataSource(DataSource.get("employees"));
        employeesGrid.setGroupIcon("square-red.svg");

        ListGridField employeeId = new ListGridField("EmployeeId");
        ListGridField name = new ListGridField("Name");
        ListGridField gender = new ListGridField("Gender");
        ListGridField job = new ListGridField("Job");

        employeesGrid.setFields(employeeId, name, gender, job);
        employeesGrid.setGroupByField(gender.getName());
        employeesGrid.setSort(new SortSpecifier[] { new SortSpecifier(name.getName(), SortDirection.ASCENDING) });
        employeesGrid.fetchData(new AdvancedCriteria(new Criterion(name.getName(), OperatorId.STARTS_WITH, "A")));

        final SectionStack ss = new SectionStack();
        final SectionStackSection sss1 = new SectionStackSection();
        sss1.setIcon("square-red.svg");
        sss1.setItems(employeesGrid);
        final SectionStackSection sss2 = new SectionStackSection();
        sss2.setIcon("square-red.svg");
        ss.setSections(sss1, sss2);

        w.addItem(ss);
        w.show();
    }
}

Screenshot:


Those ListGrid-grouping-icons are the same as the SectionStackSection-icons, but do not show up colored.
While creating the testcase I noticed the reason for this: The icons are included as <span> with element-css of background-image:url("..."). All other icons are included as <object>.

Best regards
Blama

[Blama]

Hi Isomorphic,

this also affects these parts, where I used to have customer-colored PNGs. See this sample (v11.1p_2018-04-17):

• SelectItem, ComboBoxItem pickericon
• SpinnerItem arrows
• BooleanItem checkbox
• NOT affected: DateItem (this uses <img> or <object>)
• (from #1): ListGrid groupIcon

Best regards
Blama

[Isomorphic]

There are two separate issues here:

• Certain icons not connected with the style sheet, such as ListGrid group icons, don't get rendered in object tags because the Framework skips the entire object vs. image tag logic flow and forces them to be rendered as background images in spans. This was done to avoid memory leaks in some browsers when inlined images are used, but shouldn't apply to object tags.
• Icons rendered by applying style sheet classes (e.g. spinner item arrows for Tahoe skin) are embedded as background images rather than emitted with image or object tags. This approach is called Spriting and is discussed here (see the "Spriting" subtopic).

We've applied a fix for the first issue, and it's in today's builds, dated 2018-05-01, for SC 11.p and newer. However, there is no easy fix for the second. What you're trying to do appears to be incompatible with Spriting, so you'll have to disable it as per documentation. We actually discuss this in the docs for some of SpinnerItem's icon properties, such as unstackedDecreaseicon.