Refine Scriptler run/edit form styling for modern Jenkins themes

[BobDu]

After:

Before:

Testing done

Submitter checklist

• Make sure you are opening from a topic/feature/bugfix branch (right side) and not your main branch!
• Ensure that the pull request title represents the desired changelog entry
• Please describe what you did
• Link to relevant issues in GitHub or Jira
• Link to relevant pull requests, esp. upstream and downstream changes
• Ensure you have provided tests that demonstrate the feature works or the issue is fixed

[mtughan]

This looks great, @BobDu! This had been on my to-do list for a while, but hadn't gotten around to it. Thanks for tackling this!

Just a few small things I'd like to see addressed if possible before I approve this.

[mtughan]

Is it possible to move the valign attribute to use the CSS property vertical-align instead?

[mtughan]

Can we move the width attribute to use the CSS property width instead?

[mtughan]

Same here (width attribute to CSS property width).

[mtughan]

We can deduplicate some lines here.

Suggested change

	<j:when test="${t.nonAdministerUsing}">
	<span class="scriptler-icon-slot">
	<l:icon tooltip="${%usableInBuildStep}" src="symbol-construct-outline plugin-ionicons-api" class="icon-sm jenkins-!-text-color-secondary" />
	</span>
	</j:when>
	<j:otherwise>
	<span class="scriptler-icon-slot">
	<l:icon tooltip="${%notUsableInBuildStep}" src="symbol-lock-closed-outline plugin-ionicons-api" class="icon-sm jenkins-!-text-color-secondary" />
	</span>
	</j:otherwise>
	<span class="scriptler-icon-slot">
	<j:when test="${t.nonAdministerUsing}">
	<l:icon tooltip="${%usableInBuildStep}" src="symbol-construct-outline plugin-ionicons-api" class="icon-sm jenkins-!-text-color-secondary" />
	</j:when>
	<j:otherwise>
	<l:icon tooltip="${%notUsableInBuildStep}" src="symbol-lock-closed-outline plugin-ionicons-api" class="icon-sm jenkins-!-text-color-secondary" />
	</j:otherwise>
	</span>

Since the span element is common to both.

[mtughan]

There seems to be an extra tab added to each of these lines. Can we remove it?

Suggested change

	<div class="scriptler-edit-params">
	<f:optionalBlock name="defineParams" title="${%ParametersDescription}" checked="${!empty(script.parameters)}">
	<f:entry title="${%Parameters}" field="parameters">
	<j:set var="deleteText" value="${%DeleteParameter}" />
	<f:repeatable var="param" items="${script.parameters}" name="parameters" add="${%AddParameter}"
	minimum="1">
	<div class="show-if-not-only">
	<button class="repeatable-delete danger" type="button" title="${deleteText}" aria-label="${deleteText}">
	<l:icon src="symbol-close" />
	</button>
	</div>
	<f:entry title="${%ParameterName}">
	<f:textbox name="name" value="${param.name}"/>
	<div class="scriptler-edit-params">
	<f:optionalBlock name="defineParams" title="${%ParametersDescription}" checked="${!empty(script.parameters)}">
	<f:entry title="${%Parameters}" field="parameters">
	<j:set var="deleteText" value="${%DeleteParameter}" />
	<f:repeatable var="param" items="${script.parameters}" name="parameters" add="${%AddParameter}"
	minimum="1">
	<div class="show-if-not-only">
	<button class="repeatable-delete danger" type="button" title="${deleteText}" aria-label="${deleteText}">
	<l:icon src="symbol-close" />
	</button>
	</div>
	<f:entry title="${%ParameterName}">
	<f:textbox name="name" value="${param.name}"/>

[mtughan]

Same here.

Suggested change

	</f:form>
	</l:main-panel>
	</l:layout>
	</f:form>
	</l:main-panel>
	</l:layout>