jsdialog: fix menubutton alignment with other controls in grids

The broad button selector in btns.css matched jsdialog menubuttons,
overriding their margin and width. This caused menubuttons to be offset
by 5px from comboboxes and listboxes in the same grid column, since
those are div elements that do not match the btns.css selector.

Exclude .menubutton from the btns.css catch-all so menubuttons only
get their jsdialogs.css styling. Also fix the menubutton rule to use
the standard control height (32px), font size, and padding to match
other controls, start-align the content, and push the dropdown arrow
to the end of the button.

Add a regression test that asserts the menubutton and listbox-container
share the same left edge in the Border tab of the Character dialog.

Signed-off-by: Caolán McNamara <caolan.mcnamara@collabora.com>
Change-Id: I3ca1a8c46f905f849d08d087f79ad940d8e2ee57

Author: caolanm

browser/css/btns.css

@@ -156,7 +156,7 @@ button.jsdialog[disabled] img {
 
 :not(.main-nav) .button-secondary,
 :not(.main-nav) .button-secondary:not(.arrowbackground),
-:not(.main-nav) > div:not(.toolbox) > button:not(.ui-tab):not(.ui-expander-btn):not(.ui-corner-all):not(.button-primary):not(.unobutton):not(.form-field-button):not(.col):not(.arrowbackground):not(.ui-combobox-button):not(.ui-linkbutton):not(.spinfieldbutton-up):not(.spinfieldbutton-down):not(.ui-treeview-header-button) {
+:not(.main-nav) > div:not(.toolbox) > button:not(.ui-tab):not(.ui-expander-btn):not(.ui-corner-all):not(.button-primary):not(.unobutton):not(.form-field-button):not(.col):not(.arrowbackground):not(.ui-combobox-button):not(.ui-linkbutton):not(.spinfieldbutton-up):not(.spinfieldbutton-down):not(.menubutton):not(.ui-treeview-header-button) {
 	box-sizing: border-box;
 	height: 32px;
 	line-height: normal;

browser/css/jsdialogs.css

@@ -1969,17 +1969,18 @@ img.context-menu-icon {
 /* menu button */
 .jsdialog.menubutton {
 	box-sizing: border-box;
+	height: 32px;
 	line-height: normal;
-	font-size: calc(var(--default-font-size)*1.2);
+	font-size: var(--default-font-size);
 	font-family: var(--cool-font);
 	border: 1px solid var(--color-border-dark);
 	border-radius: var(--border-radius);
-	padding: 8px 10px;
+	padding: 0 10px;
 	margin: 2px 0px;
 	background-color: var(--color-background-dark);
 	display: flex;
 	align-items: center;
-	justify-content: center;
+	justify-content: flex-start;
 }
 
 .jsdialog.menubutton img {
@@ -2011,6 +2012,10 @@ button.has-img img {
 	margin: 5px 0 0 5px;
 }
 
+.jsdialog.menubutton .arrow {
+	margin-inline-start: auto;
+}
+
 .jsdialog.menubutton[disabled] {
 	background-color: transparent !important;
 	color: var(--color-text-lighter) !important;

cypress_test/integration_tests/desktop/writer/spinfield_spec.js

@@ -288,4 +288,23 @@ describe(['tagdesktop'], 'Spinfield unit and button tests', function () {
 			});
 		});
 	});
+
+	it('Menubutton and listbox-container left-align in grid', function () {
+		openDialogAndSwitchToBorder();
+
+		// The Line section of the Border tab has a menubutton (#linestylelb)
+		// and a listbox-container (#linewidthlb) in the same grid column.
+		// They should share the same left edge.
+		cy.cGet('#linestylelb').should('be.visible');
+		cy.cGet('#linewidthlb').should('be.visible');
+
+		cy.cGet('#linestylelb').then(function ($btn) {
+			var btnLeft = $btn[0].getBoundingClientRect().left;
+
+			cy.cGet('#linewidthlb').should(function ($list) {
+				var listLeft = $list[0].getBoundingClientRect().left;
+				expect(listLeft).to.equal(btnLeft);
+			});
+		});
+	});
 });