MprTheme and Vaadin 7 app does not always work

Flow
1

I have a weird situation where my table rows are darker ( heavier font weight ) in pure Vaadin 7 app but the same table in MPR + Vaadin 7 is not as dark. When I look in Chrome dev tools, I see that the MPR + Vaadin 7 one says the font-weight should be 300, but the pure Vaadin 7 one says it should be “normal”. I know it is using some of the custom styling in my Vaadin 7 theme for this same table. I make changes in Vaadin 7 version and then merge them into MPR + Vaadin 7 version, so, besides the MPR/Flow wrapping, both websites are mostly the same. All this is in Chrome, same day, same exact data. What would I need to look at to determine the problem? Yes, I realize it is hard to see the difference, but my boss noticed it and it is a glaring difference to him.

![Pure Vaadin 7 version]
(https://i.postimg.cc/QtzHTX6r/Vaadin7-Table-Example.png)

Figure 1: Pure Vaadin 7 version

![MPR + Vaadin 7 version]
(https://i.postimg.cc/MTnGxCz3/MPRVaadin7-Table-Example.png)
Figure 2: MPR + Vaadin 7 version

2

OK, I think I just need to add class “v-ui” to my top level component and that should fix things, correct? In Vaadin 7, that was there by default because of UI class, but I guess I sort of need to fake it in this case because of change in how UI is used for Flow and MPR?

3

OK, I think I just need to add class “v-ui” to my top level component and that should fix things, correct? In Vaadin 7, that was there by default because of UI class, but I guess I sort of need to fake it in this case because of change in how UI is used for Flow and MPR?

4

OK, to get it partially fixed, I needed to add two classes to my top level “Div” ( Flow component ):

		addClassName("mobiwms");
		addClassName( "v-app");

Then I had to add a class to the only component inside this Div, a VerticalLayout ( Flow ), called content:

		content.addClassName( "v-ui");

Both v-app and v-ui are holdovers from the Vaadin 7 Valo theme stuff. Now my problem is that, for some reason, when I legacy components get “attached” to the content VerticalLayout, I see more classes getting added. In other words, I explicitly add one class, but more get added on sometime before attach listener:

			content.removeAll();
			LoginView loginView = new LoginView();
			LegacyWrapper lLoginView = new LegacyWrapper(loginView);
			lLoginView.setClassName("mobiwms-loginview");
			lLoginView.setSizeFull();
			ClassList classes = lLoginView.getClassNames(); // Here, only class is "mobiwms-loginview"
			lLoginView.addAttachListener(new ComponentEventListener<AttachEvent>() {
				
				@Override
				public void onComponentEvent(AttachEvent event) {
					// TODO Auto-generated method stub
					ClassList classes = lLoginView.getClassNames();

					if( classes instanceof ClassList )
					{
						// here, "v-app" and "mobiwms" are added
					}
				}
			});
			content.add(lLoginView);
			content.addClassName("loginview");

So is that normal for “classes” to be added on attaching components? Note that this happens even if I don’t added the mobiwms and v-app CSS classes to the highest level Div. Any ideas on what is happening?

I just cannot find where these CSS classes are being added to this LegacyComponent. It is almost as if Vaadin MPR is adding them automatically, which does not seem right to me.