#26986 Do not use theme variables directly but only via CSS variables

enhancement

critical

#26910

Optimize TL-Sync for larger loads

major

#26365

Enable explicit option ordering in selector.template.xml

#26936

WrapperGenerator: lookup methods for enums/classifiers, better typing for references

#26986

Do not use theme variables directly but only via CSS variables

#26999

Typed configuration: short-cut format for list-value properties

#27001

ProgressDialog: Better reaction possibility to errors in the background process

#27053

TLScript for resolving a model part

#27057

BulkIdLoad should also load flex attributes

#27060

New type: tl.util:JSON

#27067

Better tooltips for model elements, icons for TLClassifier

#27068

ResKey with fixed number of values

#27109

Show the process cockpit by default in new app

#27118

Install TopLogic via Debian packages

#27135

Delimit layout editor functions from specialist functions

#27159

Model editor: translation of all module names plus display of technical name

#27186

Context-local environment variables: Assigning application properties via JNDI

minor

#26784

Migrate TLDoclet to jdk.javadoc.doclet

#26877

Better context information for deleted objects

#26952

Customizability of breadcrumb display

#26982

Control width of selection and detail column via theme variable

#26983

Adjust width of filter dialogs via theme variable(s)

#26985

Introduce styleable DIV container around demo license display

#27000

Rebuild form on invalidation

#27015

Logging in KBDataProducerTask should cover error cases better

#27055

Service editor commands should not always be active

#27063

Java class cache for TLObject implementation

#27075

Navigation of calculated config properties via collections

#27095

Bulk processing of object deletions during layout update

#27106

Delete command should (can) close open dialog

#27108

Risk analysis: Move coordinate origin down/left

#27111

Get log output even without log viewer

#27116

Support for MariaDB in combination with JNDI configuration

#27133

Adjust width of minimized sidebar via theme variable

#27151

ApplicationAction, which calls other action scripts

#27158

Shortening of button labels in the change check dialog

#27169

Declarative forms: Set property editors via configuration instead of annotation

#27173

Automatic language determination during wrapper generation

#27175

Auto-update of Debian deployments

#27180

Default label for components in the Inspector

defect

major

#27123

Meaningless selection at "Configure Tabs

#27137

In-app configured tables not exportable

#27138

Error when dragging the selected row of a non-initial slice of a table

#27193

Configuration export via context menu in model editor defective

minor

#26663

TreeGridComponent: Selection is not reset after discarding a transient row

#26807

Possible NPE in MonitorEventAccessor

#26962

TL-Sync: Tabs are lost with string attributes

#26984

Not all tab bars take into account the theme variable setting 'LEVEL_ONE_BAR_SIZE'.

#26992

Asynchronous loading of layouts for themes crashes short-running test cases

#27018

SchedulerGui: Detail view "Selected run" always empty

#27019

Inconsistent logging: scheduler uses its own log file, but its tasks do not

#27027

Declarative forms: SelectField disappears after upload if option list depends on mandatory property

#27028

Data migration: Delay migration processors

#27029

Failure to use PropertyInitializer for list-valued properties.

#27035

Missing constraint evaluation for list-valued properties

#27042

MaintenanceJspBase should write to the log first, then to the client, instead of the other way around.

#27047

Avoiding data migration in #25732: Saved search queries may no longer be readable

#27049

Transaction monitor renders collapse buttons twice

#27065

Missing CDATA quoting when serializing ConfigurationItem

#27069

Minimize an EditComponent discards changes

#27070

Duplicate error icons for TL script fields

#27073

LDAPAccessService: connection establishment using the host name instead of the IP address

#27078

Prevent unnecessary, incorrect conversion of simple attribute values

#27085

Create in tree grid on misconfiguration leads to NullpointerException

#27087

Map-valued properties in configurations of form editor plugins do not work

#27088

Multiline text in layout template parameters is reformatted

#27090

TreeTableComponent shall initially select the first visible row, if initially one row shall be selected

#27094

Reconfiguration of a component in the tile environment removes toolbar commands

#27098

Default-for definition in in-app tile layouts does not work

#27107

Tab "Process Cockpit" is available twice for selection at "Configure Tabs

#27110

Launch new app without test code

#27113

In the Process Cockpit, the number of tasks is not displayed directly after login

#27115

Error in deployed app without autoconf directory

#27119

Mail dispatch: Startup notification leads to NullpointerException

#27121

In-app reconfiguration and re-export of a modular layout crashes the application

#27122

Reconfiguring and exporting an inherited (modular) layout is not applied

#27129

Declarative forms: Values of @MapBinding properties are not taken over

#27130

TLScript fields not visible in BPE

#27132

Chart.js JavaScript is included in the application CSS

#27140

Personalization of forms for local types crashes the application

#27142

Missing error with wrong command clique

#27146

Memory leak due to multiple registration of selection listeners in the GridComponent

#27147

Update Dependency Check to version 7.4.4 or above

#27148

Scriptrecorder: Input of date values via date popup control is not recorded

#27153

Error when running tests in a build reactor via Maven

#27164

Missing sender address in mails

#27165

Platform-Specific Folder Separator for Mail Folders

#27170

ClassCastException on representation of a tl.core:DateTime attribute in a composition table

#27172

LayoutEditor: StackOverflowError with wrong model declaration

#27176

Unfolding in the model element tree causes selection of another unfolded element

#27178

Infinite tree in table selection dialogs leads to errors

#27179

Service configurations cannot be changed in a deployed system

#27182

Memory overflow during execution of scripted tests

#27191

Time selection logs errors

#27197

Missing component model for grid object initialization with multiple input channels

nice-to-have

#25295

Refresh empty search returns NPE

#27128

Double pop-up in view "External selection in the tree

enhancement

major

#26986

Do not use theme variables directly but only via CSS variables

InAppDevelopment Migration Theming

Developers can use Top-Logic theme variables in stylesheets (CSS files) by enclosing the variable name in percent signs: %TL_THEME_VARIABLE_NAME%.

When the application starts, all CSS files are merged to create a single, comprehensive file for each theme, in which the theme variables are replaced with their values. This is undesirable because it prevents users from using the browser console’s inspector to determine whether—and, if so, which—theme variables might be used at the location they are examining.

It is difficult to determine how the theme variables relate to parts of the layout.

Implementation

Instead of directly replacing theme variables with their values, CSS variables are used to allow users to use developer tools to determine which variables affect the part of the layout they’re examining.

For every theme variable `X` used in a CSS file, a CSS variable `--X: value` is defined with the value of the theme variable. The evaluation of the theme variable must be changed accordingly from `%X%` to `var(--X)`. The CSS variables are defined in the CSS selector `:root `.

Code Migration

Search CSS files for the regular expression %([A-Za-z_][-A-Za-z_0-9\\.@/]*)% (pattern matching a theme variable name) and replace it with var(--$1).
CSS variables cannot be used within ` url ` (details here). Unless the variables are explicitly used in the Java code, their type can be changed from `<ICON> ` to `<STRING>`, and their value can be wrapped in `url(...) ` in the corresponding definitions in ` theme-settings.xml`. Otherwise, new variables must be created. In the CSS files, the ` url(var(--foobar)) ` can then be replaced with `var(--foobar)` for the variable ` foobar`.
Values of variables that are to be used for further calculations must be used within a CSS `calc` function. Expressions of the form `width: -var(--myWidth) ` are invalid. Instead, the expression ` width: calc(-1*var(--myWidth))` can be used. To identify such issues, the regular expression :\s*([^\s]+\s*var$--[a-zA-Z_-]+$|var$--[a-zA-Z_-]+$[^\s]+\s*)\s*; be used for CSS files. Not all search results indicate a problem, as there are also CSS shortcuts such as margin: 5px 10px, which set a margin for all sides.
Dialog#createDialog has been removed.
In LayoutUtils#createDialogInfo, the signature for width and height has been changed from int to tl:DisplayDimension.
In tl:SizeInfo, the configuration options `widthUnit ` and `heightUnit` have been removed, and the type of `height ` and `width ` has been changed from `int ` to `tl:DisplayDimension`. Instead of, for example, configuring the width and height separately by specifying the value and unit in `tl:DialogInfo`, this is now done directly using `height ` and ` width `.

{{{#!xml <dialogInfo

height="100"
heightUnit="px"
width="50"
widthUnit="%"

/> }}} becomes: {{{#!xml <dialogInfo

height="100px"
width="50%"

/> }}}

The templates
- editAttributedDialog.xml
- createAttributed.xml
- riskDialog.xml
- createAttributedNoSecLayout.xml

now have a unit for the width and height parameters.

The tl:SortConfigDialog configuration for dialogs used to sort columns now only includes the options width and height (value with unit) instead of the options dialogWidth, dialogHeight, dialogWidthUnit, and dialogHeightUnit.

Test

Start the demo. Use the Inspector in the Developer Tools to examine parts of the layout within the application. You should be able to see the use of CSS variables. In particular, a large number of variables should be defined in the CSS selector :root.