Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 839 insertions, 0 deletions

diff --git a/devtools/client/themes/rules.css b/devtools/client/themes/rules.css
new file mode 100644
index 0000000000..ae06b09991
--- /dev/null
+++ b/devtools/client/themes/rules.css
@@ -0,0 +1,839 @@
+/* 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/. */
+
+/* CSS Variables specific to this panel that aren't defined by the themes */
+:root {
+  --rule-highlight-background-color: var(--theme-highlight-yellow);
+  --rule-header-background-color: var(--theme-toolbar-background);
+  --rule-pseudo-class-text-color: var(--yellow-70) ;
+  --rule-unused-name-text-color: var(--grey-50);
+  --rule-unused-value-text-color: var(--grey-45);
+  --rule-overridden-name-text-color: var(--grey-50);
+  --rule-overridden-value-text-color: var(--grey-45);
+}
+
+:root.theme-dark {
+  --rule-highlight-background-color: #521C76;
+  --rule-header-background-color: #222225;
+  --rule-pseudo-class-text-color: var(--yellow-50);
+
+  --rule-unused-name-text-color: var(--grey-45);
+  --rule-unused-value-text-color: #787878;
+  --rule-overridden-name-text-color: var(--grey-45);
+  --rule-overridden-value-text-color: #787878;
+}
+
+/* Rule View Tabpanel */
+
+#sidebar-panel-ruleview {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+
+  /* Override the min-width from .inspector-tabpanel, as the rule panel can support small
+     widths */
+  min-width: 100px;
+}
+
+/* Rule View Toolbar */
+
+#ruleview-toolbar-container {
+  line-height: var(--theme-toolbar-height);
+}
+
+#ruleview-toolbar {
+  flex-wrap: wrap;
+  height: auto;
+}
+
+#ruleview-toolbar .devtools-searchbox {
+  flex-basis: 7em;
+  height: var(--theme-toolbar-height);
+}
+
+#ruleview-command-toolbar {
+  display: flex;
+}
+
+.ruleview-reveal-panel {
+  border-bottom: 1px solid var(--theme-splitter-color);
+  display: flex;
+  overflow: hidden;
+  flex-wrap: wrap;
+  margin: 2px;
+}
+
+.ruleview-reveal-panel[hidden] {
+  display: none;
+}
+
+.ruleview-reveal-panel .add-class {
+  height: var(--theme-toolbar-height);
+  line-height: normal;
+}
+
+.ruleview-reveal-panel label {
+  user-select: none;
+  display: flex;
+  align-items: center;
+}
+
+#pseudo-class-panel,
+#ruleview-class-panel .classes {
+  padding: 0 3px;
+}
+
+/* Pseudo Class toggle panel */
+
+#pseudo-class-panel {
+  grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
+}
+
+#pseudo-class-panel:not([hidden]) {
+  display: grid;
+}
+
+/* Class toggle panel */
+
+#ruleview-class-panel {
+  flex-direction: column;
+}
+
+#ruleview-class-panel .classes {
+  border-top: 1px solid var(--theme-splitter-color);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  max-height: 100px;
+  overflow-y: auto;
+}
+
+#ruleview-class-panel .classes label {
+  flex: 0 0;
+  max-width: 50%;
+  min-width: 100px;
+}
+
+#ruleview-class-panel .classes label span {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+#ruleview-class-panel .no-classes {
+  flex: 1;
+  color: var(--theme-text-color-inactive);
+  margin: 0;
+  text-align: center;
+}
+
+/* Rule View Container */
+
+#ruleview-container {
+  user-select: text;
+  overflow: auto;
+  flex: auto;
+  height: 100%;
+}
+
+/* This extra wrapper only serves as a way to get the content of the view focusable.
+   So that when the user reaches it either via keyboard or mouse, we know that the view
+   is focused and therefore can handle shortcuts.
+   However, for accessibility reasons, tabindex is set to -1 to avoid having to tab
+   through it, and the outline is hidden. */
+#ruleview-container-focusable {
+  height: 100%;
+  outline: none;
+}
+
+#ruleview-container.non-interactive {
+  pointer-events: none;
+  visibility: collapse;
+  transition: visibility 0.25s;
+}
+
+#ruleview-container .accordion ._content {
+  padding: 0;
+}
+
+.ruleview-property:not(:hover) > .ruleview-enableproperty {
+  pointer-events: none;
+}
+
+.ruleview-expandable-container {
+  display: block;
+}
+
+.ruleview-namecontainer {
+  cursor: text;
+  margin-left: -35px;
+}
+
+.ruleview-computed > .ruleview-namecontainer {
+  margin: 0;
+}
+
+.ruleview-propertyvaluecontainer {
+  cursor: text;
+  padding-right: 5px;
+}
+
+.ruleview-propertyvaluecontainer a {
+  color: var(--theme-highlight-purple);
+  cursor: pointer;
+}
+
+.ruleview-computedlist,
+.ruleview-expandable-container[hidden],
+.ruleview-overridden-items[hidden],
+.ruleview-overridden-rule-filter[hidden],
+.ruleview-warning[hidden],
+.ruleview-unused-warning[hidden],
+.ruleview-compatibility-warning[hidden],
+.ruleview-used[hidden],
+.ruleview-overridden .ruleview-grid {
+  display: none;
+}
+
+.ruleview-computedlist[user-open],
+.ruleview-computedlist[filter-open],
+.ruleview-overridden-items {
+  display: block;
+}
+
+.ruleview-rule-source {
+  text-align: end;
+  float: right;
+  max-width: 100%;
+
+  /* Force RTL direction to crop the source link at the beginning. */
+  direction: rtl;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  user-select: none;
+  margin-bottom: 2px;
+  margin-left: 1ch;
+}
+
+.ruleview-rule-source-label {
+  white-space: nowrap;
+  margin: 0;
+  cursor: pointer;
+
+  /* Create an LTR embed to avoid special characters being shifted to the start due to the
+     parent node direction: rtl; */
+  direction: ltr;
+  unicode-bidi: embed
+}
+
+.ruleview-rule-source.disabled > .ruleview-rule-source-label,
+.ruleview-rule-source[unselectable] > .ruleview-rule-source-label {
+  cursor: default;
+}
+
+.ruleview-rule-source:not([unselectable]) {
+  text-decoration: underline;
+  text-decoration-skip-ink: none;
+}
+
+.ruleview-header {
+  background: var(--rule-header-background-color);
+  border-bottom: 1px solid var(--theme-splitter-color);
+  color: var(--theme-toolbar-color);
+  font-size: 12px;
+  line-height: 16px;
+  padding: 4px;
+  width: 100%;
+  align-items: center;
+  display: flex;
+  user-select: none;
+}
+
+.ruleview-expandable-header {
+  cursor: pointer;
+}
+
+.ruleview-expandable-header:hover {
+  background-color: var(--theme-accordion-header-hover);
+}
+
+.ruleview-expandable-header .theme-twisty {
+  margin-inline-start: 0;
+  margin-inline-end: 2px;
+}
+
+.ruleview-rule-pseudo-element {
+  padding-left: 20px;
+  border-left: solid 10px;
+}
+
+.ruleview-rule {
+  border-bottom: 1px solid var(--theme-splitter-color);
+  padding: 2px 4px;
+  direction: ltr;
+}
+
+#ruleview-container-focusable > .ruleview-rule:last-child {
+  border-bottom: none;
+}
+
+/**
+ * Display rules that don't match the current selected element and uneditable
+ * user agent styles differently
+ */
+.ruleview-rule.unmatched,
+.ruleview-rule.uneditable,
+.ruleview-rule[unmatched=true],
+.ruleview-rule[uneditable=true] {
+  background: var(--theme-tab-toolbar-background);
+}
+
+.ruleview-rule.unmatched,
+.ruleview-rule[unmatched=true] {
+  opacity: 0.5;
+}
+
+.ruleview-rule.uneditable :focus,
+.ruleview-rule[uneditable=true] :focus {
+  outline: none;
+}
+
+.ruleview-rule.uneditable .theme-link,
+.ruleview-rule[uneditable=true] .theme-link {
+  color: var(--theme-highlight-bluegrey);
+}
+
+.ruleview-rule.uneditable .ruleview-enableproperty,
+.ruleview-rule[uneditable=true] .ruleview-enableproperty {
+  visibility: hidden;
+}
+
+.ruleview-rule.uneditable .ruleview-swatch,
+.ruleview-rule[uneditable=true] .ruleview-swatch {
+  cursor: default;
+}
+
+.ruleview-rule.uneditable .ruleview-namecontainer > .ruleview-propertyname,
+.ruleview-rule.uneditable .ruleview-propertyvaluecontainer >
+.ruleview-propertyvalue,
+.ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
+.ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
+.ruleview-propertyvalue {
+  border-bottom-color: transparent;
+}
+
+.ruleview-property.unused .ruleview-propertyname {
+  color: var(--rule-unused-name-text-color);
+}
+
+.ruleview-property.unused .ruleview-propertyvalue {
+  color: var(--rule-unused-value-text-color);
+}
+
+.ruleview-overridden-rule-filter {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-inline-start: 3px;
+  background-image: url(chrome://devtools/skin/images/filter-small.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 12px;
+  -moz-context-properties: fill;
+  fill: var(--theme-icon-dimmed-color);
+}
+
+.ruleview-overridden-rule-filter:hover {
+  fill: var(--theme-icon-color);
+}
+
+.ruleview-ruleopen {
+  padding-inline-end: 5px;
+}
+
+.ruleview-ruleclose {
+  clear: both;
+  cursor: text;
+  padding-right: 20px;
+}
+
+.ruleview-propertylist {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.ruleview-enableproperty {
+  position: relative;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+:root[platform="mac"] .ruleview-enableproperty {
+  left: -29px;
+  box-sizing: border-box;
+  margin-inline-start: 3px;
+  margin-inline-end: 9px;
+  width: 12px;
+  height: 12px;
+}
+
+/* The SVG checkbox on Windows and Linux */
+:root[platform="win"] .ruleview-enableproperty,
+:root[platform="linux"] .ruleview-enableproperty {
+  appearance: none;
+  float: left;
+  left: -27px;
+  box-sizing: content-box;
+  margin-inline-start: 0;
+  margin-inline-end: 10px;
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 0;
+  padding: 0;
+  outline: none;
+  background: url("chrome://devtools/skin/images/checkbox.svg") center no-repeat content-box;
+  /* Using fill to paint the border, and stroke for the tick */
+  -moz-context-properties: fill, stroke;
+  fill: rgba(0,0,0,.3);
+  stroke: transparent;
+}
+
+:root[platform="win"].theme-dark .ruleview-enableproperty,
+:root[platform="linux"].theme-dark .ruleview-enableproperty {
+  fill: rgba(255,255,255,.4);
+}
+
+:root[platform="win"] .ruleview-enableproperty:checked,
+:root[platform="linux"] .ruleview-enableproperty:checked {
+  stroke: rgba(0,0,0,.6);
+}
+
+:root[platform="win"].theme-dark .ruleview-enableproperty:checked,
+:root[platform="linux"].theme-dark .ruleview-enableproperty:checked {
+  stroke: rgba(255,255,255,.8);
+}
+
+:root[platform="mac"] .ruleview-enableproperty {
+  appearance: auto;
+  -moz-default-appearance: checkbox;
+}
+
+.ruleview-warning,
+.ruleview-unused-warning,
+.ruleview-compatibility-warning {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  background-size: 12px;
+  background-repeat: no-repeat;
+  -moz-context-properties: fill;
+}
+
+.ruleview-warning {
+  background-image: url(chrome://devtools/skin/images/alert-small.svg);
+  fill: var(--yellow-60);
+}
+
+.ruleview-unused-warning {
+  background-image: url(chrome://devtools/skin/images/info-small.svg);
+  background-color: var(--theme-sidebar-background);
+  fill: var(--theme-icon-dimmed-color);
+}
+
+.ruleview-compatibility-warning {
+  background-image: url(chrome://devtools/skin/images/report.svg);
+  background-color: var(--theme-sidebar-background);
+  fill: var(--theme-icon-dimmed-color);
+}
+
+.ruleview-unused-warning:hover,
+.ruleview-compatibility-warning:hover {
+  fill: var(--theme-icon-color);
+  stroke: var(--theme-icon-color);
+}
+
+.ruleview-rule:not(:hover) .ruleview-enableproperty:not(:focus) {
+  /* Use opacity to hide the checkbox instead of visibility:hidden,
+     so that it's possible to focus it with the keyboard. */
+  opacity: 0;
+}
+
+.ruleview-expander {
+  vertical-align: middle;
+}
+
+.ruleview-propertycontainer .ruleview-expander {
+  margin-left: -6px;
+}
+
+.ruleview-propertycontainer .ruleview-expander:dir(rtl):not([open]) {
+  /* for preventing .theme-twisty's wrong direction in rtl; Bug 1296648 */
+  transform: rotate(-90deg);
+}
+
+.ruleview-newproperty {
+  margin-inline-start: -10px;
+}
+
+.ruleview-namecontainer,
+.ruleview-propertyvaluecontainer,
+.ruleview-propertyname,
+.ruleview-propertyvalue {
+  text-decoration: inherit;
+}
+
+.ruleview-computedlist {
+  list-style: none;
+  padding: 0;
+}
+
+.ruleview-overridden-items {
+  margin-inline-start: -25px;
+  list-style: none;
+  line-height: 1.5em;
+}
+
+.ruleview-overridden-item {
+  position: relative;
+}
+
+.ruleview-overridden-item::before,
+.ruleview-overridden-item::after {
+  content: "";
+  position: absolute;
+  display: block;
+  border: 0 solid var(--theme-text-color-alt);
+}
+
+.ruleview-overridden-item::before {
+  top: 0;
+  left: -15px;
+  height: 0.8em;
+  width: 10px;
+  border-left-width: 0.5px;
+  border-bottom-width: 0.5px;
+}
+
+.ruleview-overridden-item::after {
+  left: -15px;
+  bottom: -7px;
+  height: 100%;
+  border-left-width: 0.5px;
+}
+
+.ruleview-overridden-item:last-child::after {
+  display: none;
+}
+
+.ruleview-overridden-item .ruleview-namecontainer {
+  margin-left: 0;
+}
+
+/* All swatches */
+
+.ruleview-flex,
+.ruleview-grid,
+.ruleview-shapeswatch,
+.ruleview-swatch {
+  cursor: pointer;
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
+
+  /* align the swatch with its value */
+  margin-top: -1px;
+  margin-inline-end: 5px;
+  display: inline-block;
+  position: relative;
+}
+
+/* Icon swatches not using the .ruleview-swatch class (flex, grid, shape) */
+
+.ruleview-flex,
+.ruleview-grid,
+.ruleview-shapeswatch {
+  -moz-context-properties: stroke;
+  stroke: var(--theme-icon-color);
+}
+
+.ruleview-flex.active,
+.ruleview-grid.active,
+.ruleview-shapeswatch.active {
+  stroke: var(--theme-icon-checked-color);
+}
+
+.ruleview-flex {
+  background-image: url("chrome://devtools/skin/images/flexbox-swatch.svg");
+  background-size: 13px 11px;
+  width: 13px;
+  height: 11px;
+}
+
+.ruleview-grid {
+  background-image: url("chrome://devtools/skin/images/grid.svg");
+}
+
+.ruleview-grid[disabled] {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.ruleview-shapeswatch {
+  background-image: url("chrome://devtools/skin/images/shape-swatch.svg");
+  background-size: 110%;
+  width: 1.45em;
+  height: 1.45em;
+}
+
+.ruleview-shape-point.active,
+.ruleview-shapeswatch.active + .ruleview-shape > .ruleview-shape-point:hover {
+  background-color: var(--rule-highlight-background-color);
+}
+
+/* Round swatches using the .ruleview-swatch class (color, bezier, filter and angle) */
+
+.ruleview-swatch {
+  background-size: 1em;
+  border-radius: 50%;
+}
+
+.ruleview-colorswatch::before {
+  content: '';
+  background-color: #eee;
+  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
+                    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
+  background-size: 12px 12px;
+  background-position: 0 0, 6px 6px;
+  position: absolute;
+  border-radius: 50%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+}
+
+.ruleview-swatch.ruleview-colorswatch {
+  border: none;
+  padding: 0;
+}
+
+.ruleview-bezierswatch {
+  background-image: url("chrome://devtools/skin/images/cubic-bezier-swatch.svg");
+}
+
+.ruleview-filterswatch {
+  background-image: url("chrome://devtools/skin/images/filter-swatch.svg");
+}
+
+.ruleview-angleswatch {
+  background-image: url("chrome://devtools/skin/images/angle-swatch.svg");
+}
+
+.ruleview-lineareasingswatch {
+  background-image: url("chrome://devtools/skin/images/linear-easing-swatch.svg");
+}
+
+.ruleview-overridden {
+  text-decoration: line-through solid var(--theme-text-color-alt);
+}
+
+.ruleview-property.ruleview-overridden .ruleview-propertyname {
+  color: var(--rule-overridden-name-text-color);
+}
+
+.ruleview-property.ruleview-overridden .ruleview-propertyvalue {
+  color: var(--rule-overridden-value-text-color);
+}
+
+/**
+ * Hide swatches (tool icons) from properties that are overwritten by higher specificity * rules.
+ * .ruleview-swatch is a base class for many tool swatches (shapes, color, bezier curves)
+ * .ruleview-flex and .ruleview-grid are custom
+ */
+.ruleview-overridden .ruleview-flex,
+.ruleview-overridden .ruleview-grid,
+.ruleview-overridden .ruleview-shapeswatch,
+.ruleview-overridden .ruleview-swatch {
+  display: none;
+}
+
+.ruleview-font-family.used-font {
+  text-decoration: underline;
+}
+
+.styleinspector-propertyeditor {
+  border: 1px solid #CCC;
+  padding: 0;
+  margin: -1px -3px -1px -1px;
+}
+
+.ruleview-property {
+  border-left: 3px solid transparent;
+  clear: both;
+  padding-left: 28px;
+  overflow-wrap: break-word;
+}
+
+.ruleview-propertycontainer  > * {
+  vertical-align: middle;
+}
+
+.ruleview-property.ruleview-changed,
+.ruleview-property[dirty] {
+  border-left-color: var(--theme-highlight-green);
+}
+
+.ruleview-highlight > .ruleview-expander,
+.ruleview-highlight > .ruleview-namecontainer,
+.ruleview-highlight > .ruleview-propertyvaluecontainer,
+.ruleview-highlight > .ruleview-rule-source-label,
+.ruleview-highlight > .ruleview-selector,
+.ruleview-rule-ancestor-data li.ruleview-highlight {
+  background-color: var(--rule-highlight-background-color);
+}
+
+.ruleview-namecontainer > .ruleview-propertyname,
+.ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
+  border-bottom: 1px dashed transparent;
+}
+
+.ruleview-namecontainer:hover > .ruleview-propertyname,
+.ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
+  border-bottom-color: hsl(0,0%,50%);
+}
+
+/* @media and @layer rule info element */
+ul.ruleview-rule-ancestor-data {
+  max-width: 100%;
+  display: inline-block;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.ruleview-rule-ancestor-data li {
+  /* When there's a search and this element is highlighted, this prevents the background
+     color to be applied to the whole width of the parent ul block */
+  max-width: max-content;
+}
+
+.ruleview-rule-ancestor-data li.has-tooltip:hover .container-query-declaration {
+  text-decoration: underline;
+  text-decoration-color: var(--theme-highlight-blue);
+  text-decoration-style: dotted;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 2px;
+}
+
+.ruleview-rule-ancestor-data li button.open-inspector {
+  /* There's a space character after the button, so add a 1ch margin-inline-start to be consistent */
+  margin-inline: 1ch 0;
+}
+
+.ruleview-selectorcontainer {
+  word-wrap: break-word;
+  cursor: text;
+}
+
+.ruleview-selector-separator,
+.ruleview-selector-unmatched,
+.ruleview-unmatched-variable {
+  color: #888;
+}
+
+.ruleview-selector-matched > .ruleview-selector-attribute {
+  /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
+}
+
+.ruleview-selector-matched > .ruleview-selector-pseudo-class {
+  /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
+}
+
+.ruleview-selector-matched > .ruleview-selector-pseudo-class-lock {
+  color: var(--rule-pseudo-class-text-color);
+}
+
+.ruleview-selectorhighlighter {
+  display: inline-block;
+  vertical-align: top;
+  width: 15px;
+  height: 15px;
+  margin-left: 5px;
+  background: url("chrome://devtools/skin/images/highlight-selector.svg") no-repeat 0 0;
+  background-size: contain;
+  cursor: pointer;
+  -moz-context-properties: fill;
+  fill: var(--theme-icon-dimmed-color);
+}
+
+.ruleview-selectorhighlighter:hover {
+  fill: var(--theme-icon-color);
+}
+
+.ruleview-selectorhighlighter:active,
+.ruleview-selectorhighlighter.highlighted {
+  fill: var(--theme-icon-checked-color);
+  /* Since the icon is quite thin, it can be hard to differentiate it
+     from its regular state. Adding some background helps make it pop a bit */
+  background-color: var(--dimmed-highlighter-box-content-color);
+}
+
+#ruleview-add-rule-button::before {
+  background-image: url("chrome://devtools/skin/images/add.svg");
+  background-size: 14px;
+}
+
+#pseudo-class-panel-toggle::before {
+  content: ":hov";
+}
+
+#class-panel-toggle::before {
+  content: ".cls";
+}
+
+#pseudo-class-panel-toggle::before,
+#class-panel-toggle::before {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  direction: ltr;
+}
+
+#print-simulation-toggle::before {
+  background-image: url("chrome://devtools/skin/images/rules-view-print-simulation.svg");
+}
+
+#color-scheme-simulation-light-toggle::before {
+  background-image: url("chrome://devtools/skin/images/rules-view-light-mode-simulation.svg");
+  -moz-context-properties: fill, stroke;
+  stroke: currentColor;
+}
+
+#color-scheme-simulation-dark-toggle::before {
+  background-image: url("chrome://devtools/skin/images/rules-view-dark-mode-simulation.svg");
+}
+
+.flash-out {
+  transition: background 1s;
+}
+
+.ruleview-propertyvalue-draggable {
+  cursor: col-resize;
+}
+
+.ruleview-propertyvalue-dragging {
+  user-select: none;
+}
+
+.ruleview-propertyvalue-break-spaces {
+  white-space: break-spaces;
+}