qwc2 2025.10.15 → 2025.10.24

package/components/LocationRecorder.js

@@ -0,0 +1,138 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * Copyright 2015 Sourcepole AG
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { connect } from 'react-redux';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import LocaleUtils from '../utils/LocaleUtils';
+import Icon from './Icon';
+import { BottomToolPortalContext } from './PluginsContainer';
+import NumberInput from './widgets/NumberInput';
+import './style/LocationRecorder.css';
+var LocationRecorder = /*#__PURE__*/function (_React$Component) {
+  function LocationRecorder(props) {
+    var _this;
+    _classCallCheck(this, LocationRecorder);
+    _this = _callSuper(this, LocationRecorder, [props]);
+    _defineProperty(_this, "state", {
+      recording: false,
+      interval: 1
+    });
+    _defineProperty(_this, "toggleRecording", function () {
+      if (_this.state.recording) {
+        _this.stopRecording();
+      } else {
+        _this.props.drawInteraction.abortDrawing();
+        _this.props.drawInteraction.setActive(false);
+        // Re-add overlay to map, removed by setActive(false), to ensure traced feature is visibile
+        _this.props.drawInteraction.getOverlay().setMap(_this.props.map);
+        _this.setState({
+          recording: true
+        });
+        if (!navigator.geolocation) {
+          _this.stopRecording();
+          /* eslint-disable-next-line */
+          console.error("Geolocation not supported");
+        } else {
+          _this.props.drawInteraction.appendCoordinates([_this.props.locatePosition]);
+          if (_this.props.geomType === "Point") {
+            _this.stopRecording();
+          } else {
+            _this.pollInterval = setInterval(function () {
+              _this.props.drawInteraction.appendCoordinates([_this.props.locatePosition]);
+            }, _this.state.interval * 1000);
+          }
+        }
+      }
+    });
+    _defineProperty(_this, "stopRecording", function () {
+      _this.setState({
+        recording: false
+      }, _this.finishDrawing);
+      clearInterval(_this.pollInterval);
+    });
+    _defineProperty(_this, "finishDrawing", function () {
+      _this.props.drawInteraction.finishDrawing();
+      _this.props.drawInteraction.setActive(true);
+    });
+    _this.pollInterval = null;
+    return _this;
+  }
+  _inherits(LocationRecorder, _React$Component);
+  return _createClass(LocationRecorder, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.stopRecording();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      if (!this.props.locateEnabled || !this.props.locatePosition) {
+        return null;
+      }
+      var buttonClasses = classNames({
+        button: true,
+        pressed: this.state.recording
+      });
+      return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
+        className: "LocationRecorder"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: "screenshot"
+      }), /*#__PURE__*/React.createElement("button", {
+        className: buttonClasses,
+        onClick: this.toggleRecording
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: this.state.recording ? "square" : "circle_full"
+      }), /*#__PURE__*/React.createElement("span", null, this.state.recording ? LocaleUtils.tr("locationrecorder.stop") : LocaleUtils.tr("locationrecorder.record"))), /*#__PURE__*/React.createElement(NumberInput, {
+        decimals: 1,
+        max: 30,
+        min: 0.5,
+        mobile: true,
+        onChange: function onChange(value) {
+          return _this2.setState({
+            interval: value
+          });
+        },
+        step: 0.5,
+        suffix: "s",
+        value: this.state.interval
+      })), this.context);
+    }
+  }]);
+}(React.Component);
+_defineProperty(LocationRecorder, "contextType", BottomToolPortalContext);
+_defineProperty(LocationRecorder, "propTypes", {
+  drawInteraction: PropTypes.object,
+  geomType: PropTypes.string,
+  locateEnabled: PropTypes.bool,
+  locatePosition: PropTypes.array,
+  map: PropTypes.object
+});
+export default connect(function (state) {
+  return {
+    locateEnabled: ["ENABLED", "FOLLOWING"].includes(state.locate.state),
+    locatePosition: state.locate.mapPos
+  };
+})(LocationRecorder);

package/components/PickFeature.js

@@ -31,6 +31,9 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import React from 'react';
 import { connect } from 'react-redux';
 import isEmpty from 'lodash.isempty';
+import ol from 'openlayers';
+import pointInPolygon from 'point-in-polygon';
+import polygonIntersectTest from 'polygon-intersect-test';
 import PropTypes from 'prop-types';
 import { v4 as uuidv4 } from 'uuid';
 import { LayerRole, addLayerFeatures, clearLayer } from '../actions/layers';
@@ -121,29 +124,40 @@ var PickFeature = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate(prevProps, prevState) {
       var _this2 = this;
       if (this.state.pickGeom && this.state.pickGeom !== prevState.pickGeom) {
-        var queryLayers = [];
+        var queryWmsLayers = [];
+        var queryVectorLayers = [];
         if (this.props.layerFilter) {
-          queryLayers = [this.props.layers.find(function (l) {
+          queryWmsLayers = [this.props.layers.find(function (l) {
             return l.url === _this2.props.layerFilter.url;
           })].filter(Boolean);
         } else {
-          queryLayers = IdentifyUtils.getQueryLayers(this.props.layers, this.props.map);
+          queryWmsLayers = IdentifyUtils.getQueryLayers(this.props.layers, this.props.map);
+          queryVectorLayers = this.props.layers.filter(function (layer) {
+            return layer.visibility && LayerRole.USERLAYER && (layer.type === 'vector' || layer.type === 'wfs');
+          });
         }
-        if (!isEmpty(queryLayers)) {
-          this.setState(function (state) {
-            var getPixelFromCoordinate = MapUtils.getHook(MapUtils.GET_PIXEL_FROM_COORDINATES_HOOK);
-            var coordinates = _this2.props.pickGeomType === "Point" ? [[state.pickGeom.coordinates]] : state.pickGeom.coordinates;
-            var maxX = coordinates[0][0][0];
-            var maxY = coordinates[0][0][1];
-            for (var i = 1; i < coordinates[0].length; ++i) {
-              if (coordinates[0][i][0] > maxX) {
-                maxX = coordinates[0][i][0];
-                maxY = coordinates[0][i][1];
-              }
+        if (this.props.layerFilterFunc) {
+          queryWmsLayers = queryWmsLayers.filter(this.props.layerFilterFunc);
+          queryVectorLayers = queryVectorLayers.filter(this.props.layerFilterFunc);
+        }
+        if (isEmpty(queryWmsLayers) && isEmpty(queryVectorLayers)) {
+          return;
+        }
+        this.setState(function (state) {
+          var coordinates = _this2.props.pickGeomType === "Point" ? [[state.pickGeom.coordinates]] : state.pickGeom.coordinates;
+          var maxX = coordinates[0][0][0];
+          var maxY = coordinates[0][0][1];
+          for (var i = 1; i < coordinates[0].length; ++i) {
+            if (coordinates[0][i][0] > maxX) {
+              maxX = coordinates[0][i][0];
+              maxY = coordinates[0][i][1];
             }
-            var clickPos = getPixelFromCoordinate([maxX, maxY], false);
-            var reqId = uuidv4();
-            queryLayers.forEach(function (layer) {
+          }
+          var reqId = uuidv4();
+          var getPixelFromCoordinate = MapUtils.getHook(MapUtils.GET_PIXEL_FROM_COORDINATES_HOOK);
+          var clickPos = getPixelFromCoordinate([maxX, maxY], false);
+          if (!isEmpty(queryWmsLayers)) {
+            queryWmsLayers.forEach(function (layer) {
               var request = null;
               if (_this2.props.pickGeomType === 'Point') {
                 var _this2$props$layerFil;
@@ -159,14 +173,58 @@ var PickFeature = /*#__PURE__*/function (_React$Component) {
                 return _this2.handleIdentifyResponse(response, reqId, layer, request.params.info_format);
               });
             });
-            return {
-              pickResults: {},
-              clickPos: clickPos,
-              pendingQueries: queryLayers.length,
-              reqId: reqId
-            };
-          });
-        }
+          }
+          var pickResults = {};
+          if (!isEmpty(queryVectorLayers)) {
+            var olMap = MapUtils.getHook(MapUtils.GET_MAP);
+            var layerMap = queryVectorLayers.reduce(function (res, layer) {
+              return _objectSpread(_objectSpread({}, res), {}, _defineProperty({}, layer.id, layer));
+            }, {});
+            var format = new ol.format.GeoJSON();
+            if (_this2.props.pickGeomType === 'Point') {
+              olMap.forEachFeatureAtPixel(clickPos, function (feature, layer) {
+                var _layer$get;
+                var layerid = layer === null || layer === void 0 || (_layer$get = layer.get) === null || _layer$get === void 0 ? void 0 : _layer$get.call(layer, 'id');
+                if (layerid in layerMap) {
+                  var featureObj = format.writeFeatureObject(feature);
+                  var layername = layerMap[layerid].name;
+                  pickResults[layername] = pickResults[layername] || [];
+                  pickResults[layername].push(featureObj);
+                }
+              });
+            } else if (_this2.props.pickGeomType === 'Polygon') {
+              var extent = ol.extent.boundingExtent(coordinates[0]);
+              olMap.getLayers().forEach(function (layer) {
+                if (!(layer.get('id') in layerMap)) {
+                  return;
+                }
+                layer.getSource().forEachFeatureIntersectingExtent(extent, function (feature) {
+                  var intersects = false;
+                  if (feature.getGeometry().getType() === "Point") {
+                    intersects = pointInPolygon(feature.getGeometry().getCoordinates(), coordinates[0]);
+                  } else if (feature.getGeometry().getType() === "LineString") {
+                    intersects = true; // TODO
+                  } else if (feature.getGeometry().getType() === "Polygon") {
+                    intersects = polygonIntersectTest(feature.getGeometry().getCoordinates()[0], coordinates[0]);
+                  }
+                  if (!intersects) {
+                    return;
+                  }
+                  var featureObj = format.writeFeatureObject(feature);
+                  var layername = layerMap[layer.get('id')].name;
+                  pickResults[layername] = pickResults[layername] || [];
+                  pickResults[layername].push(featureObj);
+                });
+              });
+            }
+          }
+          return {
+            pickResults: pickResults,
+            clickPos: clickPos,
+            pendingQueries: queryWmsLayers.length,
+            reqId: reqId
+          };
+        });
       }
     }
   }, {
@@ -186,6 +244,7 @@ var PickFeature = /*#__PURE__*/function (_React$Component) {
             layername = _ref6[0],
             features = _ref6[1];
           return features.map(function (feature) {
+            var _feature$displayname;
             return /*#__PURE__*/React.createElement("div", {
               key: layername + ":" + feature.id,
               onClickCapture: function onClickCapture() {
@@ -197,7 +256,7 @@ var PickFeature = /*#__PURE__*/function (_React$Component) {
               onMouseOver: function onMouseOver() {
                 return _this3.highlightFeature(layername, feature);
               }
-            }, layername + ": " + feature.displayname);
+            }, layername + ": " + ((_feature$displayname = feature.displayname) !== null && _feature$displayname !== void 0 ? _feature$displayname : feature.id));
           });
         }) : /*#__PURE__*/React.createElement("div", {
           className: "pick-feature-menu-querying"
@@ -240,6 +299,8 @@ _defineProperty(PickFeature, "propTypes", {
     url: PropTypes.string,
     name: PropTypes.string
   }),
+  /** Optional: Filter function to restrict pick layers */
+  layerFilterFunc: PropTypes.func,
   layers: PropTypes.array,
   map: PropTypes.object,
   /** Pick geometry type: Point, Polygon, ... (default: Point) */

package/components/PluginsContainer.js

@@ -40,6 +40,7 @@ import './style/PluginsContainer.css';
 export var MapButtonPortalContext = /*#__PURE__*/React.createContext(null);
 export var MapContainerPortalContext = /*#__PURE__*/React.createContext(null);
 export var AppInfosPortalContext = /*#__PURE__*/React.createContext(null);
+export var BottomToolPortalContext = /*#__PURE__*/React.createContext(null);
 var PluginsContainer = /*#__PURE__*/function (_React$Component) {
   function PluginsContainer() {
     var _this;
@@ -51,7 +52,8 @@ var PluginsContainer = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "state", {
       mapButtonsContainerRef: null,
       mapContainerRef: null,
-      appInfosContainerRef: null
+      appInfosContainerRef: null,
+      bottomToolContainerRef: null
     });
     _defineProperty(_this, "renderPlugins", function () {
       var device = ConfigUtils.isMobile() ? 'mobile' : 'desktop';
@@ -134,6 +136,11 @@ var PluginsContainer = /*#__PURE__*/function (_React$Component) {
         appInfosContainerRef: el
       });
     });
+    _defineProperty(_this, "setBottomToolContanerRef", function (el) {
+      _this.setState({
+        bottomToolContainerRef: el
+      });
+    });
     _defineProperty(_this, "setButtonContainerRef", function (el) {
       _this.setState({
         mapButtonsContainerRef: el
@@ -190,7 +197,7 @@ var PluginsContainer = /*#__PURE__*/function (_React$Component) {
         right: 'calc(' + right + 'px)',
         bottom: 'calc(var(--bottombar-height) + ' + bottom + 'px)'
       };
-      var haveRefs = this.state.mapButtonsContainerRef && this.state.mapContainerRef && this.state.appInfosContainerRef;
+      var haveRefs = this.state.mapButtonsContainerRef && this.state.mapContainerRef && this.state.appInfosContainerRef && this.state.bottomToolContainerRef;
       return /*#__PURE__*/React.createElement("div", {
         className: "plugins-container " + ((_this$props$className = this.props.className) !== null && _this$props$className !== void 0 ? _this$props$className : ""),
         ref: this.setupTouchEvents
@@ -200,7 +207,9 @@ var PluginsContainer = /*#__PURE__*/function (_React$Component) {
         value: this.state.mapButtonsContainerRef
       }, /*#__PURE__*/React.createElement(MapContainerPortalContext.Provider, {
         value: this.state.mapContainerRef
-      }, haveRefs ? this.renderPlugins() : null, haveRefs ? this.props.children : null))), /*#__PURE__*/React.createElement(WindowManager, null), /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React.createElement(BottomToolPortalContext.Provider, {
+        value: this.state.bottomToolContainerRef
+      }, haveRefs ? this.renderPlugins() : null, haveRefs ? this.props.children : null)))), /*#__PURE__*/React.createElement(WindowManager, null), /*#__PURE__*/React.createElement("div", {
         className: "map-container",
         ref: this.setMapContainerRef,
         style: mapContainerStyle
@@ -212,6 +221,10 @@ var PluginsContainer = /*#__PURE__*/function (_React$Component) {
         className: "app-infos-container",
         ref: this.setAppInfosContainerRef,
         style: mapContainerStyle
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "map-bottom-tool-container",
+        ref: this.setBottomToolContanerRef,
+        style: mapContainerStyle
       }));
     }
   }]);

package/components/map/OlLayer.js

@@ -252,7 +252,8 @@ _defineProperty(OlLayer, "propTypes", {
   refreshLayer: PropTypes.func,
   setLayerLoading: PropTypes.func,
   swipe: PropTypes.number,
-  zIndex: PropTypes.number
+  zIndex: PropTypes.number,
+  zoomToExtent: PropTypes.func
 });
 export default connect(function () {
   return {};

package/components/map3d/HeightProfile3D.js

@@ -102,6 +102,8 @@ var HeightProfilePrintDialog = /*#__PURE__*/function (_React$PureComponent) {
     value: function componentDidMount() {
       var templatePath = MiscUtils.resolveAssetsPath(this.props.templatePath);
       this.externalWindow = window.open(templatePath, LocaleUtils.tr("heightprofile.title"), "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes");
+      // Inherit API
+      this.externalWindow.qwc2 = window.qwc2;
       this.externalWindow.addEventListener('load', this.setWindowContent, false);
       this.externalWindow.addEventListener('resize', this.windowResized, false);
       window.addEventListener('beforeunload', this.closePrintWindow);

package/components/map3d/Map3D.js

@@ -618,7 +618,7 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
       // Setup map
       var initialBbox = (_this2$props$theme$ma = (_this2$props$theme$ma2 = _this2.props.theme.map3d) === null || _this2$props$theme$ma2 === void 0 ? void 0 : _this2$props$theme$ma2.extent) !== null && _this2$props$theme$ma !== void 0 ? _this2$props$theme$ma : _this2.props.theme.initialBbox;
       var bounds = CoordinatesUtils.reprojectBbox(initialBbox.bounds, initialBbox.crs, projection);
-      var extent = new Extent(crs, bounds[0], bounds[2], bounds[1], bounds[3]);
+      var extent = new Extent(projection, bounds[0], bounds[2], bounds[1], bounds[3]);
       _this2.map = new Map({
         extent: extent,
         backgroundColor: "white"

package/components/style/App.css

@@ -169,6 +169,20 @@ button.button > div.spinner {
     height: 1.5em;
 }
 
+button.selected {
+    position: relative;
+}
+button.selected:after {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 3px;
+    background-color: var(--color-active);
+    border-top: 1px solid var(--border-color);
+    content: "";
+}
+
 div.controlgroup {
     display: flex;
     align-items: center;
@@ -179,6 +193,10 @@ div.controlgroup > .controlgroup-fillitem {
     width: 0;
 }
 
+div.controlgroup > .controlgroup-expanditem {
+    flex: 1 0 auto;
+}
+
 div.controlgroup > *:not(:last-child):not(span) {
     margin-right: -1px;
 }

package/components/style/AttributeTableWidget.css

@@ -182,7 +182,7 @@ table.attribtable-table td > div.TextInput > pre {
     min-height: 2em;
 }
 
-table.attribtable-table td > *:disabled,
+table.attribtable-table tr.row-disabled td > *:disabled,
 table.attribtable-table tr.row-disabled,
 table.attribtable-table tr.row-disabled * {
     color: var(--text-color-disabled);
@@ -192,6 +192,7 @@ table.attribtable-table tr.row-disabled * {
 div.attribtable-footbar {
     display: flex;
     align-items: center;
+    margin: 0 -0.25em;
 }
 
 div.attribtable-footbar > div {

package/components/style/FeatureAttributesWindow.css

@@ -0,0 +1,16 @@
+div.feature-attributes-body table {
+    width: 100%;
+}
+
+div.feature-attributes-body table td:first-child {
+    width: 25%
+}
+
+div.feature-attributes-body table td:last-child {
+    width: 1%;
+}
+
+div.feature-attributes-body table td > input {
+    min-width: 0;
+    width: 100%;
+}

package/components/style/IdentifyViewer.css

@@ -9,7 +9,7 @@ span.identify-body-message {
     padding: 0.25em;
 }
 
-div.identify-body div.identify-results-container {
+div.identify-body div.identify-results-tree {
     overflow-y: auto;
     flex: 1 1 50%;
     min-height: 0;
@@ -20,79 +20,44 @@ div.identify-body div.identify-results-container {
     font-size: small;
 }
 
-div.identify-layer-expandable {
-    position: relative;
-    margin-left: 1em;
-}
-
-div.identify-layer-expandable > div.identify-layer-entries {
-    display: none;
-}
-
-div.identify-layer-expanded > div.identify-layer-entries {
-    display: block;
-}
-
-div.identify-layer-expandable:before {
-    content: "";
-    border-color: transparent var(--text-color);
-    border-width: 0.35em 0 0.35em 0.45em;
-    border-style: solid;
-    display: block;
-    height: 0;
-    width: 0;
-    left: -1em;
-    top: 0.3em;
-    position: absolute;
-}
-
-div.identify-layer-expanded:before {
-    border-color: var(--text-color) transparent;
-    border-width: 0.45em 0.35em 0 0.35em;
-    top: 0.4em;
-}
-
-div.identify-layer-entries {
-    padding: 0.25em 0.25em 0.25em 1em;
-}
-
-div.identify-result-entry {
+div.identify-results-tree-entry {
     display: flex;
 }
 
-div.identify-result-entry span.clickable {
+div.identify-results-tree-entry > span:first-child {
+    display: flex;
+    align-items: center;
     cursor: pointer;
+    flex: 1 1 auto;
 }
 
-div.identify-result-entry span.active {
+span.identify-results-tree-entry-active {
     font-weight: bold;
 }
 
-div.identify-result-entry > span:first-child {
-    flex: 1 1 auto;
-}
-
-div.identify-result-entry span.identify-remove-result,
-div.identify-result-entry span.identify-export-result {
+div.identify-results-tree-entry span.identify-remove-result,
+div.identify-results-tree-entry span.identify-export-result {
     margin: 0 0.25em;
-    color: var(--border-color);
     cursor: pointer;
     visibility: hidden;
-    font-size: large;
     flex: 0 0 auto;
 }
 
-div.identify-result-entry:hover > span.identify-remove-result,
-div.identify-result-entry:hover > span.identify-export-result {
+div.identify-results-tree-entry:hover > span.identify-remove-result,
+div.identify-results-tree-entry:hover > span.identify-export-result {
     visibility: visible;
 }
 
+div.identify-results-tree-entries {
+    padding: 0.25em 0.25em 0.25em 1em;
+}
+
 div.identify-body div.identify-flat-results-list {
     overflow: auto;
     flex: 1 1 auto;
 }
 
-div.identify-body .identify-result-tree-frame {
+div.identify-body div.identify-result-tree-frame {
     flex: 1 1 50%;
     min-height: 0;
     display: flex;
@@ -100,18 +65,18 @@ div.identify-body .identify-result-tree-frame {
     border: 1px solid var(--border-color);
 }
 
-div.identify-body .identify-result-frame-normal {
-    margin-top: 0.25em;
+div.identify-body div.identify-result-frame {
+    margin-bottom: 0.25em;
     border: 1px solid var(--border-color);
 }
 
-div.identify-body .identify-result-frame-highlighted {
-    margin-top: 0.25em;
+div.identify-body div.identify-result-frame:hover {
     border: 1px solid var(--color-active);
 }
 
 div.identify-body .identify-result-title {
     background-color: var(--list-section-bg-color);
+    color: var(--list-section-text-color);
     padding: 0.25em;
     font-weight: bold;
     flex: 0 0 auto;
@@ -130,6 +95,10 @@ div.identify-body .identify-result-title > span.icon {
     flex: 0 0 auto;
 }
 
+span.identify-result-checkbox {
+    background-color: white;
+}
+
 div.identify-body .identify-result-title > span:not(:first-child) {
     margin-left: 0.5em;
 }
@@ -142,6 +111,17 @@ div.identify-body .identify-result-tree-frame > div.identify-result-container {
     overflow-y: auto;
 }
 
+div.identify-compare-results {
+    display: flex;
+    flex-wrap: wrap;
+    overflow: auto;
+    flex: 1 1 auto;
+}
+
+div.identify-compare-results > div.identify-result-frame {
+    flex: 1 1 20em;
+}
+
 div.identify-body .identify-result-box {
     border: 0;
     background-color: var(--list-bg-color);
@@ -195,21 +175,34 @@ div.identify-body td.identify-attr-value > a > img {
     max-width: 100%;
 }
 
-div.identify-body div.identify-buttonbox {
-    margin-top: 0.5em;
+div.identify-body div.identify-toolbar {
+    background-color: var(--container-bg-color);
+    margin-top: -0.25em;
     flex: 0 0 auto;
     display: flex;
     align-items: center;
+    position: relative;
+    border-top: 1px solid var(--border-color);
+    padding-top: 0.25em;
 }
 
-div.identify-body div.identify-selectbox {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
+span.identify-toolbar-spacer {
+    flex: 1 1 auto;
 }
 
-select:focus {
-outline: none;
+div.identify-settings-menu {
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    border: 1px solid var(--border-color);
+    background-color: var(--container-bg-color);
+    box-shadow: 0px 0px 5px rgba(136, 136, 136, 1);
+    z-index: 1;
+    padding: 0.25em;
+}
+
+div.identify-settings-menu table td > div.controlgroup {
+    width: 100%;
 }
 
 div.identify-body table.identify-attr-subtable {
@@ -224,20 +217,3 @@ div.identify-body td.identify-attr-spacer {
     height: 2px;
     background-color: var(--list-section-bg-color);
 }
-
-span.identify-buttonbox-spacer {
-    flex: 1 1 auto;
-}
-
-div.identify-body div.identify-result-feature-report-frame {
-    padding: 0.25em 0.5em;
-    font-size: small;
-    display: flex;
-    align-items: center;
-}
-
-div.identify-body div.identify-result-feature-report-frame > div.spinner {
-    width: 1em;
-    height: 1em;
-    margin-left: 0.5em;
-}