mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1528296 - remove SideMenuWidget and dependancies; r=vporof 

Differential Revision: https://phabricator.services.mozilla.com/D22493

--HG--
extra : moz-landing-system : lando
This commit is contained in:
yulia 2019-03-13 16:49:42 +00:00
Родитель 58c5e6cec7
Коммит 7671d5db19
7 изменённых файлов: 2 добавлений и 2000 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

3
devtools/client/locales/en-US/shared.properties
Просмотреть файл

@ -6,6 +6,3 @@
# of a node or image, like 100×200.
dimensions=%S\u00D7%S
# LOCALIZATION NOTE (sideMenu.groupCheckbox.tooltip): This is used in the SideMenuWidget
# as the default tooltip of a group checkbox
sideMenu.groupCheckbox.tooltip=Toggle all checkboxes in this group

2
devtools/client/netmonitor/test/browser_net_accessibility-01.js
Просмотреть файл

@ -4,7 +4,7 @@
"use strict";
/**
* Tests if focus modifiers work for the SideMenuWidget.
* Tests if focus modifiers work for the Side Menu.
*/
add_task(async function() {

724
devtools/client/shared/widgets/SideMenuWidget.jsm
Просмотреть файл

@ -1,724 +0,0 @@
/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
const SHARED_STRINGS_URI = "devtools/client/locales/shared.properties";
const { require } = ChromeUtils.import("resource://devtools/shared/Loader.jsm");
const EventEmitter = require("devtools/shared/event-emitter");
const { LocalizationHelper } = require("devtools/shared/l10n");
const { ViewHelpers } = require("devtools/client/shared/widgets/view-helpers");
this.EXPORTED_SYMBOLS = ["SideMenuWidget"];
/**
* Localization convenience methods.
*/
var L10N = new LocalizationHelper(SHARED_STRINGS_URI);
/**
* A simple side menu, with the ability of grouping menu items.
*
* Note: this widget should be used in tandem with the WidgetMethods in
* view-helpers.js.
*
* @param Node aNode
* The element associated with the widget.
* @param Object aOptions
* - contextMenu: optional element or element ID that serves as a context menu.
* - showArrows: specifies if items should display horizontal arrows.
* - showItemCheckboxes: specifies if items should display checkboxes.
* - showGroupCheckboxes: specifies if groups should display checkboxes.
*/
this.SideMenuWidget = function SideMenuWidget(aNode, aOptions = {}) {
this.document = aNode.ownerDocument;
this.window = this.document.defaultView;
this._parent = aNode;
const { contextMenu, showArrows, showItemCheckboxes, showGroupCheckboxes } = aOptions;
this._contextMenu = contextMenu || null;
this._showArrows = showArrows || false;
this._showItemCheckboxes = showItemCheckboxes || false;
this._showGroupCheckboxes = showGroupCheckboxes || false;
// Create an internal scrollbox container.
this._list = this.document.createXULElement("scrollbox");
this._list.className = "side-menu-widget-container theme-sidebar";
this._list.setAttribute("flex", "1");
this._list.setAttribute("orient", "vertical");
this._list.setAttribute("with-arrows", this._showArrows);
this._list.setAttribute("with-item-checkboxes", this._showItemCheckboxes);
this._list.setAttribute("with-group-checkboxes", this._showGroupCheckboxes);
this._list.setAttribute("tabindex", "0");
this._list.addEventListener("contextmenu", e => this._showContextMenu(e));
this._list.addEventListener("keydown", e => this.emit("keyDown", e));
this._list.addEventListener("mousedown", e => this.emit("mousePress", e));
this._parent.appendChild(this._list);
// Menu items can optionally be grouped.
this._groupsByName = new Map(); // Can't use a WeakMap because keys are strings.
this._orderedGroupElementsArray = [];
this._orderedMenuElementsArray = [];
this._itemsByElement = new Map();
// This widget emits events that can be handled in a MenuContainer.
EventEmitter.decorate(this);
// Delegate some of the associated node's methods to satisfy the interface
// required by MenuContainer instances.
ViewHelpers.delegateWidgetAttributeMethods(this, aNode);
ViewHelpers.delegateWidgetEventMethods(this, aNode);
};
SideMenuWidget.prototype = {
/**
* Specifies if groups in this container should be sorted.
*/
sortedGroups: true,
/**
* The comparator used to sort groups.
*/
groupSortPredicate: (a, b) => a.localeCompare(b),
/**
* Inserts an item in this container at the specified index, optionally
* grouping by name.
*
* @param number aIndex
* The position in the container intended for this item.
* @param Node aContents
* The node displayed in the container.
* @param object aAttachment [optional]
* Some attached primitive/object. Custom options supported:
* - group: a string specifying the group to place this item into
* - checkboxState: the checked state of the checkbox, if shown
* - checkboxTooltip: the tooltip text for the checkbox, if shown
* @return Node
* The element associated with the displayed item.
*/
insertItemAt: function(aIndex, aContents, aAttachment = {}) {
const group = this._getMenuGroupForName(aAttachment.group);
const item = this._getMenuItemForGroup(group, aContents, aAttachment);
const element = item.insertSelfAt(aIndex);
return element;
},
/**
* Checks to see if the list is scrolled all the way to the bottom.
* Uses getBoundsWithoutFlushing to limit the performance impact
* of this function.
*
* @return bool
*/
isScrolledToBottom: function() {
if (this._list.lastElementChild) {
const utils = this.window.windowUtils;
const childRect = utils.getBoundsWithoutFlushing(this._list.lastElementChild);
const listRect = utils.getBoundsWithoutFlushing(this._list);
// Cheap way to check if it's scrolled all the way to the bottom.
return (childRect.height + childRect.top) <= listRect.bottom;
}
return false;
},
/**
* Scroll the list to the bottom after a timeout.
* If the user scrolls in the meantime, cancel this operation.
*/
scrollToBottom: function() {
this._list.scrollTop = this._list.scrollHeight;
this.emit("scroll-to-bottom");
},
/**
* Returns the child node in this container situated at the specified index.
*
* @param number aIndex
* The position in the container intended for this item.
* @return Node
* The element associated with the displayed item.
*/
getItemAtIndex: function(aIndex) {
return this._orderedMenuElementsArray[aIndex];
},
/**
* Removes the specified child node from this container.
*
* @param Node aChild
* The element associated with the displayed item.
*/
removeChild: function(aChild) {
this._getNodeForContents(aChild).remove();
this._orderedMenuElementsArray.splice(
this._orderedMenuElementsArray.indexOf(aChild), 1);
this._itemsByElement.delete(aChild);
if (this._selectedItem == aChild) {
this._selectedItem = null;
}
},
/**
* Removes all of the child nodes from this container.
*/
removeAllItems: function() {
const list = this._list;
while (list.hasChildNodes()) {
list.firstChild.remove();
}
this._selectedItem = null;
this._groupsByName.clear();
this._orderedGroupElementsArray.length = 0;
this._orderedMenuElementsArray.length = 0;
this._itemsByElement.clear();
},
/**
* Gets the currently selected child node in this container.
* @return Node
*/
get selectedItem() {
return this._selectedItem;
},
/**
* Sets the currently selected child node in this container.
* @param Node aChild
*/
set selectedItem(aChild) {
const menuArray = this._orderedMenuElementsArray;
if (!aChild) {
this._selectedItem = null;
}
for (const node of menuArray) {
if (node == aChild) {
this._getNodeForContents(node).classList.add("selected");
this._selectedItem = node;
} else {
this._getNodeForContents(node).classList.remove("selected");
}
}
},
/**
* Ensures the specified element is visible.
*
* @param Node aElement
* The element to make visible.
*/
ensureElementIsVisible: function(aElement) {
if (!aElement) {
return;
}
// Ensure the element is visible but not scrolled horizontally.
aElement.scrollIntoView({ block: "nearest" });
this._list.scrollBy(-this._list.clientWidth, 0);
},
/**
* Shows all the groups, even the ones with no visible children.
*/
showEmptyGroups: function() {
for (const group of this._orderedGroupElementsArray) {
group.hidden = false;
}
},
/**
* Hides all the groups which have no visible children.
*/
hideEmptyGroups: function() {
const visibleChildNodes = ".side-menu-widget-item-contents:not([hidden=true])";
for (const group of this._orderedGroupElementsArray) {
group.hidden = group.querySelectorAll(visibleChildNodes).length == 0;
}
for (const menuItem of this._orderedMenuElementsArray) {
menuItem.parentNode.hidden = menuItem.hidden;
}
},
/**
* Adds a new attribute or changes an existing attribute on this container.
*
* @param string aName
* The name of the attribute.
* @param string aValue
* The desired attribute value.
*/
setAttribute: function(aName, aValue) {
this._parent.setAttribute(aName, aValue);
if (aName == "emptyText") {
this._textWhenEmpty = aValue;
}
},
/**
* Removes an attribute on this container.
*
* @param string aName
* The name of the attribute.
*/
removeAttribute: function(aName) {
this._parent.removeAttribute(aName);
if (aName == "emptyText") {
this._removeEmptyText();
}
},
/**
* Set the checkbox state for the item associated with the given node.
*
* @param Node aNode
* The dom node for an item we want to check.
* @param boolean aCheckState
* True to check, false to uncheck.
*/
checkItem: function(aNode, aCheckState) {
const widgetItem = this._itemsByElement.get(aNode);
if (!widgetItem) {
throw new Error("No item for " + aNode);
}
widgetItem.check(aCheckState);
},
/**
* Sets the text displayed in this container when empty.
* @param string aValue
*/
set _textWhenEmpty(aValue) {
if (this._emptyTextNode) {
this._emptyTextNode.setAttribute("value", aValue);
}
this._emptyTextValue = aValue;
this._showEmptyText();
},
/**
* Creates and appends a label signaling that this container is empty.
*/
_showEmptyText: function() {
if (this._emptyTextNode || !this._emptyTextValue) {
return;
}
const label = this.document.createXULElement("label");
label.className = "plain side-menu-widget-empty-text";
label.setAttribute("value", this._emptyTextValue);
this._parent.insertBefore(label, this._list);
this._emptyTextNode = label;
},
/**
* Removes the label representing a notice in this container.
*/
_removeEmptyText: function() {
if (!this._emptyTextNode) {
return;
}
this._parent.removeChild(this._emptyTextNode);
this._emptyTextNode = null;
},
/**
* Gets a container representing a group for menu items. If the container
* is not available yet, it is immediately created.
*
* @param string aName
* The required group name.
* @return SideMenuGroup
* The newly created group.
*/
_getMenuGroupForName: function(aName) {
const cachedGroup = this._groupsByName.get(aName);
if (cachedGroup) {
return cachedGroup;
}
const group = new SideMenuGroup(this, aName, {
showCheckbox: this._showGroupCheckboxes,
});
this._groupsByName.set(aName, group);
group.insertSelfAt(this.sortedGroups ? group.findExpectedIndexForSelf(this.groupSortPredicate) : -1);
return group;
},
/**
* Gets a menu item to be displayed inside a group.
* @see SideMenuWidget.prototype._getMenuGroupForName
*
* @param SideMenuGroup aGroup
* The group to contain the menu item.
* @param Node aContents
* The node displayed in the container.
* @param object aAttachment [optional]
* Some attached primitive/object.
*/
_getMenuItemForGroup: function(aGroup, aContents, aAttachment) {
return new SideMenuItem(aGroup, aContents, aAttachment, {
showArrow: this._showArrows,
showCheckbox: this._showItemCheckboxes,
});
},
/**
* Returns the .side-menu-widget-item node corresponding to a SideMenuItem.
* To optimize the markup, some redundant elemenst are skipped when creating
* these child items, in which case we need to be careful on which nodes
* .selected class names are added, or which nodes are removed.
*
* @param Node aChild
* An element which is the target node of a SideMenuItem.
* @return Node
* The wrapper node if there is one, or the same child otherwise.
*/
_getNodeForContents: function(aChild) {
if (aChild.hasAttribute("merged-item-contents")) {
return aChild;
}
return aChild.parentNode;
},
/**
* Shows the contextMenu element.
*/
_showContextMenu: function(e) {
if (!this._contextMenu) {
return;
}
// Don't show the menu if a descendant node is going to be visible also.
let node = e.originalTarget;
while (node && node !== this._list) {
if (node.hasAttribute("contextmenu")) {
return;
}
node = node.parentNode;
}
// Call stopPropagation() and preventDefault() here so that avoid to show default
// context menu in about:devtools-toolbox. See Bug 1515265.
e.stopPropagation();
e.preventDefault();
this._contextMenu.openPopupAtScreen(e.screenX, e.screenY, true);
},
window: null,
document: null,
_showArrows: false,
_showItemCheckboxes: false,
_showGroupCheckboxes: false,
_parent: null,
_list: null,
_selectedItem: null,
_groupsByName: null,
_orderedGroupElementsArray: null,
_orderedMenuElementsArray: null,
_itemsByElement: null,
_emptyTextNode: null,
_emptyTextValue: "",
};
/**
* A SideMenuGroup constructor for the BreadcrumbsWidget.
* Represents a group which should contain SideMenuItems.
*
* @param SideMenuWidget aWidget
* The widget to contain this menu item.
* @param string aName
* The string displayed in the container.
* @param object aOptions [optional]
* An object containing the following properties:
* - showCheckbox: specifies if a checkbox should be displayed.
*/
function SideMenuGroup(aWidget, aName, aOptions = {}) {
this.document = aWidget.document;
this.window = aWidget.window;
this.ownerView = aWidget;
this.identifier = aName;
// Create an internal title and list container.
if (aName) {
const target = this._target = this.document.createXULElement("vbox");
target.className = "side-menu-widget-group";
target.setAttribute("name", aName);
const list = this._list = this.document.createXULElement("vbox");
list.className = "side-menu-widget-group-list";
const title = this._title = this.document.createXULElement("hbox");
title.className = "side-menu-widget-group-title";
const name = this._name = this.document.createXULElement("label");
name.className = "plain name";
name.setAttribute("value", aName);
name.setAttribute("crop", "end");
name.setAttribute("flex", "1");
// Show a checkbox before the content.
if (aOptions.showCheckbox) {
const checkbox = this._checkbox = makeCheckbox(title, {
description: aName,
checkboxTooltip: L10N.getStr("sideMenu.groupCheckbox.tooltip"),
});
checkbox.className = "side-menu-widget-group-checkbox";
}
title.appendChild(name);
target.appendChild(title);
target.appendChild(list);
} else {
// Skip a few redundant nodes when no title is shown.
const target = this._target = this._list = this.document.createXULElement("vbox");
target.className = "side-menu-widget-group side-menu-widget-group-list";
target.setAttribute("merged-group-contents", "");
}
}
SideMenuGroup.prototype = {
get _orderedGroupElementsArray() {
return this.ownerView._orderedGroupElementsArray;
},
get _orderedMenuElementsArray() {
return this.ownerView._orderedMenuElementsArray;
},
get _itemsByElement() {
return this.ownerView._itemsByElement;
},
/**
* Inserts this group in the parent container at the specified index.
*
* @param number aIndex
* The position in the container intended for this group.
*/
insertSelfAt: function(aIndex) {
const ownerList = this.ownerView._list;
const groupsArray = this._orderedGroupElementsArray;
if (aIndex >= 0) {
ownerList.insertBefore(this._target, groupsArray[aIndex]);
groupsArray.splice(aIndex, 0, this._target);
} else {
ownerList.appendChild(this._target);
groupsArray.push(this._target);
}
},
/**
* Finds the expected index of this group based on its name.
*
* @return number
* The expected index.
*/
findExpectedIndexForSelf: function(sortPredicate) {
const identifier = this.identifier;
const groupsArray = this._orderedGroupElementsArray;
for (const group of groupsArray) {
const name = group.getAttribute("name");
if (sortPredicate(name, identifier) > 0 && // Insertion sort at its best :)
!name.includes(identifier)) { // Least significant group should be last.
return groupsArray.indexOf(group);
}
}
return -1;
},
window: null,
document: null,
ownerView: null,
identifier: "",
_target: null,
_checkbox: null,
_title: null,
_name: null,
_list: null,
};
/**
* A SideMenuItem constructor for the BreadcrumbsWidget.
*
* @param SideMenuGroup aGroup
* The group to contain this menu item.
* @param Node aContents
* The node displayed in the container.
* @param object aAttachment [optional]
* The attachment object.
* @param object aOptions [optional]
* An object containing the following properties:
* - showArrow: specifies if a horizontal arrow should be displayed.
* - showCheckbox: specifies if a checkbox should be displayed.
*/
function SideMenuItem(aGroup, aContents, aAttachment = {}, aOptions = {}) {
this.document = aGroup.document;
this.window = aGroup.window;
this.ownerView = aGroup;
if (aOptions.showArrow || aOptions.showCheckbox) {
const container = this._container = this.document.createXULElement("hbox");
container.className = "side-menu-widget-item";
const target = this._target = this.document.createXULElement("vbox");
target.className = "side-menu-widget-item-contents";
// Show a checkbox before the content.
if (aOptions.showCheckbox) {
const checkbox = this._checkbox = makeCheckbox(container, aAttachment);
checkbox.className = "side-menu-widget-item-checkbox";
}
container.appendChild(target);
// Show a horizontal arrow towards the content.
if (aOptions.showArrow) {
const arrow = this._arrow = this.document.createXULElement("hbox");
arrow.className = "side-menu-widget-item-arrow";
container.appendChild(arrow);
}
} else {
// Skip a few redundant nodes when no horizontal arrow or checkbox is shown.
const target = this._target = this._container = this.document.createXULElement("hbox");
target.className = "side-menu-widget-item side-menu-widget-item-contents";
target.setAttribute("merged-item-contents", "");
}
this._target.setAttribute("flex", "1");
this.contents = aContents;
}
SideMenuItem.prototype = {
get _orderedGroupElementsArray() {
return this.ownerView._orderedGroupElementsArray;
},
get _orderedMenuElementsArray() {
return this.ownerView._orderedMenuElementsArray;
},
get _itemsByElement() {
return this.ownerView._itemsByElement;
},
/**
* Inserts this item in the parent group at the specified index.
*
* @param number aIndex
* The position in the container intended for this item.
* @return Node
* The element associated with the displayed item.
*/
insertSelfAt: function(aIndex) {
const ownerList = this.ownerView._list;
const menuArray = this._orderedMenuElementsArray;
if (aIndex >= 0) {
ownerList.insertBefore(this._container, ownerList.childNodes[aIndex]);
menuArray.splice(aIndex, 0, this._target);
} else {
ownerList.appendChild(this._container);
menuArray.push(this._target);
}
this._itemsByElement.set(this._target, this);
return this._target;
},
/**
* Check or uncheck the checkbox associated with this item.
*
* @param boolean aCheckState
* True to check, false to uncheck.
*/
check: function(aCheckState) {
if (!this._checkbox) {
throw new Error("Cannot check items that do not have checkboxes.");
}
// Don't set or remove the "checked" attribute, assign the property instead.
// Otherwise, the "CheckboxStateChange" event will not be fired. XUL!!
this._checkbox.checked = !!aCheckState;
},
/**
* Sets the contents displayed in this item's view.
*
* @param string | Node aContents
* The string or node displayed in the container.
*/
set contents(aContents) {
// If there are already some contents displayed, replace them.
if (this._target.hasChildNodes()) {
this._target.replaceChild(aContents, this._target.firstChild);
return;
}
// These are the first contents ever displayed.
this._target.appendChild(aContents);
},
window: null,
document: null,
ownerView: null,
_target: null,
_container: null,
_checkbox: null,
_arrow: null,
};
/**
* Creates a checkbox to a specified parent node. Emits a "check" event
* whenever the checkbox is checked or unchecked by the user.
*
* @param Node aParentNode
* The parent node to contain this checkbox.
* @param object aOptions
* An object containing some or all of the following properties:
* - description: defaults to "item" if unspecified
* - checkboxState: true for checked, false for unchecked
* - checkboxTooltip: the tooltip text of the checkbox
*/
function makeCheckbox(aParentNode, aOptions) {
const checkbox = aParentNode.ownerDocument.createXULElement("checkbox");
checkbox.setAttribute("tooltiptext", aOptions.checkboxTooltip || "");
if (aOptions.checkboxState) {
checkbox.setAttribute("checked", true);
} else {
checkbox.removeAttribute("checked");
}
// Stop the toggling of the checkbox from selecting the list item.
checkbox.addEventListener("mousedown", e => {
e.stopPropagation();
});
// Emit an event from the checkbox when it is toggled. Don't listen for the
// "command" event! It won't fire for programmatic changes. XUL!!
checkbox.addEventListener("CheckboxStateChange", e => {
ViewHelpers.dispatchEvent(checkbox, "check", {
description: aOptions.description || "item",
checked: checkbox.checked,
});
});
aParentNode.appendChild(checkbox);
return checkbox;
}

1
devtools/client/shared/widgets/moz.build
Просмотреть файл

@ -21,7 +21,6 @@ DevToolsModules(
'LineGraphWidget.js',
'MountainGraphWidget.js',
'ShapesInContextEditor.js',
'SideMenuWidget.jsm',
'Spectrum.js',
'TableWidget.js',
'TreeWidget.js',

1143
devtools/client/shared/widgets/view-helpers.js
Просмотреть файл

Разница между файлами не показана из-за своего большого размера Загрузить разницу

16
devtools/client/shared/widgets/widgets.css
Просмотреть файл

@ -13,22 +13,6 @@
-moz-user-focus: normal;
}
/* SideMenuWidget */
.side-menu-widget-container {
overflow-x: hidden;
overflow-y: auto;
}
.side-menu-widget-item-contents {
-moz-user-focus: normal;
}
.side-menu-widget-group-checkbox .checkbox-label-box,
.side-menu-widget-item-checkbox .checkbox-label-box {
display: none; /* See bug 669507 */
}
/* VariablesView */
.variables-view-container {

113
devtools/client/themes/widgets.css
Просмотреть файл

@ -101,119 +101,6 @@
}
}
/* SideMenuWidget */
.side-menu-widget-container {
/* Hack: force hardware acceleration */
transform: translateZ(1px);
}
/* SideMenuWidget container */
.side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
/* To compensate for the arrow image's dark margin. */
margin-inline-end: -1px;
}
/* SideMenuWidget groups */
.side-menu-widget-group-title {
padding: 4px;
font-weight: 600;
border-bottom: 1px solid rgba(128,128,128,0.15);
}
.side-menu-widget-group-title + .side-menu-widget-group-list .side-menu-widget-item-contents {
padding-inline-start: 20px;
}
/* SideMenuWidget items */
.side-menu-widget-item {
border-bottom: 1px solid rgba(128,128,128,0.15);
background-clip: padding-box;
}
.side-menu-widget-item.selected {
background-color: var(--theme-selection-background);
color: var(--theme-selection-color);
}
.side-menu-widget-item-arrow {
margin-inline-start: -7px;
width: 7px; /* The image's width is 7 pixels */
}
.side-menu-widget-item.selected > .side-menu-widget-item-arrow {
background-image: var(--sidemenu-selected-arrow);
background-size: auto;
background-repeat: no-repeat;
background-position: center right;
}
.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
background-image: var(--sidemenu-selected-arrow-rtl);
background-position: center left;
}
/* SideMenuWidget items contents */
.side-menu-widget-item-contents {
padding: 4px;
/* To avoid having content overlapping the arrow image. */
padding-inline-end: 8px;
}
.side-menu-widget-item-other {
/* To avoid having content overlapping the arrow image. */
padding-inline-end: 8px;
/* To compensate for the .side-menu-widget-item-contents padding. */
margin-inline-start: -4px;
margin-inline-end: -8px;
}
.side-menu-widget-group-title + .side-menu-widget-group-list .side-menu-widget-item-other {
/* To compensate for the .side-menu-widget-item-contents padding. */
margin-inline-start: -20px;
}
.side-menu-widget-item.selected .side-menu-widget-item-other:not(.selected) {
background-color: var(--theme-sidebar-background);
box-shadow: inset 2px 0 0 var(--theme-selection-background);
color: var(--theme-body-color);
}
.side-menu-widget-item.selected .side-menu-widget-item-other.selected {
background-color: var(--theme-selection-background);
}
.side-menu-widget-item-other:first-of-type {
margin-top: 4px;
}
.side-menu-widget-item-other:last-of-type {
margin-bottom: -4px;
}
/* SideMenuWidget checkboxes */
.side-menu-widget-group-checkbox {
margin: 0;
margin-inline-end: 4px;
}
.side-menu-widget-item-checkbox {
margin: 0;
margin-inline-start: 4px;
}
/* SideMenuWidget misc */
.side-menu-widget-empty-text {
padding: 4px 8px;
background-color: var(--theme-sidebar-background);
}
/* VariablesView */
.variables-view-container {