X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fdevtools%2Fmemory.css;h=650b0662c9b37aee1ab585196f991df1b43a44ed;hp=25fd76c2a3bf0e47797181eb3ec76b83f64a1a26;hb=b1d1a8bbaca0a31b2c2581911368b6892d447718;hpb=dc9d5d64a3f915cb832f43050545b432f33504f7

diff --git a/LCARStrek/devtools/memory.css b/LCARStrek/devtools/memory.css
index 25fd76c2..650b0662 100644
--- a/LCARStrek/devtools/memory.css
+++ b/LCARStrek/devtools/memory.css
@@ -44,15 +44,44 @@ html, body, #app, #memory-tool {
    */
   display: flex;
   align-items: center;
+  background-size: calc(100% - 30px);
+  background-image: linear-gradient(90deg,#9C9CFF,#9C9CFF);
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+.devtools-toolbar::before,
+.devtools-toolbar::after {
+  display: flex;
+  content: "";
+  width: 12px;
+  min-height: 16px;
+  height: 100%;
+  background-color: #FF9F00;
+}
+
+.devtools-toolbar::before {
+  border-radius: 8px 0px 0px 8px;
+  border: none;
+  border-inline-end: 3px solid black;
+  margin-inline-end: 2px;
+}
+
+.devtools-toolbar::after {
+  border-radius: 0px 8px 8px 0px;
+  border: none;
+  border-inline-start: 3px solid black;
+  margin-inline-start: 2px;
 }
 
 .devtools-toolbar > .toolbar-group:nth-of-type(1) {
   /**
    * We want this to be exactly at a `--sidebar-width` distance from the
-   * toolbar's start boundary. A `.devtools-toolbar` has a 3px start padding.
+   * toolbar's start boundary. We want the end border to be after the sidebar,
+   * and the startcap has to be subtracted.
    */
-  flex: 0 0 calc(var(--sidebar-width) - 4px);
-  border-inline-end: 1px solid var(--theme-splitter-color);
+  flex: 0 0 calc(var(--sidebar-width) - 2px - 15px);
+  border-inline-end: 3px solid var(--theme-toolbar-background);
   margin-inline-end: 5px;
   padding-right: 1px;
 }
@@ -68,6 +97,7 @@ html, body, #app, #memory-tool {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  height: 100%;
 }
 
 .devtools-toolbar > .toolbar-group > label {
@@ -78,6 +108,7 @@ html, body, #app, #memory-tool {
   display: flex;
   align-items: center;
   margin-inline-end: 5px;
+  color: var(--theme-button-color);
 }
 
 .devtools-toolbar > .toolbar-group > label.display-by > span {
@@ -90,6 +121,8 @@ html, body, #app, #memory-tool {
 
 .devtools-toolbar > label {
   margin-inline-end: 5px;
+  flex: 1;
+  color: var(--theme-button-color);
 }
 
 #select-view {
@@ -108,6 +141,17 @@ html, body, #app, #memory-tool {
   background-image: url(chrome://devtools/skin/images/diff.svg);
 }
 
+#import-snapshot::before {
+  background-image: url(chrome://devtools/skin/images/import.svg);
+}
+
+#record-allocation-stacks-label,
+#pop-view-button-label {
+  border-inline-end: 1px solid var(--theme-splitter-color);
+  padding-inline-end: 5px;
+  flex: none;
+}
+
 /**
  * Due to toolbar styles of `.devtools-toolbarbutton:not([label])` which overrides
  * .devtools-toolbarbutton's min-width of 78px, reset the min-width.
@@ -115,10 +159,10 @@ html, body, #app, #memory-tool {
 #import-snapshot,
 #clear-snapshots {
   -moz-box-align: center;
-  flex-grow: 1;
+/*  flex-grow: 1;
   padding: 1px;
   margin: 2px 1px;
-  min-width: unset;
+  min-width: unset;*/
 }
 
 .spacer {
@@ -127,7 +171,8 @@ html, body, #app, #memory-tool {
 
 #filter {
   align-self: stretch;
-  margin: 2px;
+/*  margin: 2px; */
+  font: inherit;
 }
 
 /**
@@ -191,11 +236,32 @@ html, body, #app, #memory-tool {
   font-size: 90%;
 }
 
+.snapshot-list-item .snapshot-title {
+  display: flex;
+  justify-content: space-between;
+}
+
 .snapshot-list-item .save {
   text-decoration: underline;
   cursor: pointer;
 }
 
+.snapshot-list-item .delete {
+  cursor: pointer;
+  position: relative;
+  min-height: 1em;
+  min-width: 1.3em;
+}
+
+.theme-light .snapshot-list-item.selected .delete {
+/*  filter: invert(100%);*/
+}
+
+.snapshot-list-item .delete::before {
+  background-image: url("chrome://devtools/skin/images/close.svg");
+  background-position: 0.2em 0;
+}
+
 .snapshot-list-item > .snapshot-title {
   margin-bottom: 14px;
 }
@@ -370,6 +436,10 @@ html, body, #app, #memory-tool {
   padding-inline-end: 5px;
 }
 
+.children-pointer:dir(rtl) {
+  transform: scaleX(-1);
+}
+
 /**
  * Heap tree view columns
  */
@@ -401,6 +471,7 @@ html, body, #app, #memory-tool {
   color: var(--theme-selection-background);
 }
 
+.heap-tree-item-individuals,
 .heap-tree-item-bytes,
 .heap-tree-item-count,
 .heap-tree-item-total-bytes,
@@ -410,7 +481,8 @@ html, body, #app, #memory-tool {
    * These subcolumns may have specific widths or need to flex.
    */
   display: flex;
-  text-align: end;
+  /* Make sure units/decimals/... are always vertically aligned to right in both LTR and RTL locales */
+  text-align: right;
   border-inline-end: var(--cell-border-color) 1px solid;
 }
 
@@ -460,7 +532,11 @@ html, body, #app, #memory-tool {
 }
 
 .heap-tree-number {
-  padding-inline-start: 3px;
+  padding: 0 3px;
+  flex: 1;
+  color: var(--theme-content-color3);
+  /* Make sure number doesn't appear backwards on RTL locales */
+  direction: ltr;
 }
 
 .heap-tree-percent {
@@ -473,11 +549,6 @@ html, body, #app, #memory-tool {
   font-family: var(--monospace-font-family);
 }
 
-.heap-tree-number {
-  flex: 1;
-  color: var(--theme-content-color3);
-}
-
 .heap-tree-percent {
   width: 4ch;
 }
@@ -487,6 +558,33 @@ html, body, #app, #memory-tool {
   color: inherit;
 }
 
+.heap-tree-item-individuals {
+  width: 38px;
+  min-width: 20px;
+  overflow: hidden;
+  margin: 0;
+}
+
+.heap-tree-item-individuals > button {
+  height: 10px;
+  width: 32px;
+
+  /* Override default styles for toolbar buttons to fix entire row height. */
+  margin: 0 auto !important;
+  padding: 0;
+}
+
+/**
+ * Tree map
+ */
+
+.tree-map-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
 /**
  * Heap tree errors.
  */
@@ -522,6 +620,10 @@ html, body, #app, #memory-tool {
   margin-right: .5em;
 }
 
+.heap-tree-item-address {
+  font-family: monospace;
+}
+
 .no-allocation-stacks {
   border-color: var(--theme-splitter-color);
   border-style: solid;
@@ -576,3 +678,81 @@ text {
 text {
   fill: var(--theme-body-color-alt);
 }
+
+
+
+/* Hide the actual checkbox */
+input[type="checkbox"] {
+  opacity: 0;
+  width: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+/* Create a box to style as the checkbox */
+input[type="checkbox"] + span::before {
+  display: inline-block;
+  content: "";
+  vertical-align: -3px;
+}
+
+input[type="checkbox"] + span {
+  line-height: 0px;
+}
+
+input[type="checkbox"] + span::before {
+  -moz-appearance: none;
+  width: 1em;
+  height: 1em;
+  border-radius: 0;
+  border: 1px solid var(--theme-body-color);
+  margin-inline-end: 10px;
+  background-color: var(--theme-toolbar-background);
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+input[type="checkbox"]:not(:disabled) + span:hover::before {
+  border-color: var(--theme-hover-background);
+}
+input[type="checkbox"]:not(:disabled) + span:hover {
+  color: var(--theme-hover-background);
+}
+input[type="checkbox"]:checked + span::before {
+  background-image: url("chrome://global/skin/in-content/check.svg#check");
+}
+
+input[type="checkbox"]:checked:disabled + span::before {
+  background-image: url("chrome://global/skin/in-content/check.svg#check-disabled");
+}
+input[type="checkbox"]:checked:not(:disabled) + span:hover::before {
+  background-image: url("chrome://global/skin/in-content/check.svg#check-hover");
+}
+input[type="checkbox"]:disabled + span::before {
+  border-color: var(--theme-body-color-inactive);
+}
+input[type="checkbox"]:disabled + span {
+  color: var(--theme-body-color-inactive);
+}
+
+select {
+  border: 1px solid var(--theme-body-color);
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-body-color);
+  background-image: url("chrome://global/skin/arrow/arrow-down.gif");
+  background-repeat: no-repeat;
+  background-position: calc(100% - 2px) center;
+  border-radius: 3px;
+  padding: 1px;
+  margin: 1px;
+  font: inherit;
+}
+select:hover {
+  background-color: var(--theme-hover-background);
+  color: var(--theme-hover-color);
+  background-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
+}
+select:hover:active {
+  background-color: var(--theme-active-background);
+  color: var(--theme-active-color);
+}