make both Nightly devtools and 48/49 devtools work well
authorRobert Kaiser <kairo@kairo.at>
Thu, 22 Sep 2016 01:14:37 +0000 (03:14 +0200)
committerRobert Kaiser <kairo@kairo.at>
Thu, 22 Sep 2016 01:14:37 +0000 (03:14 +0200)
32 files changed:
LCARStrek/devtools/animationinspector.css
LCARStrek/devtools/boxmodel.css [new file with mode: 0644]
LCARStrek/devtools/canvasdebugger.css
LCARStrek/devtools/components-frame.css
LCARStrek/devtools/dark-theme.css
LCARStrek/devtools/floating-scrollbars-dark-theme.css
LCARStrek/devtools/floating-scrollbars-responsive-design.css
LCARStrek/devtools/fonts.css
LCARStrek/devtools/images/dropmarker.svg [new file with mode: 0644]
LCARStrek/devtools/images/filter.svg [new file with mode: 0644]
LCARStrek/devtools/images/filters.svg
LCARStrek/devtools/images/itemToggle.svg [new file with mode: 0644]
LCARStrek/devtools/images/magnifying-glass-light.png [deleted file]
LCARStrek/devtools/images/magnifying-glass-light@2x.png [deleted file]
LCARStrek/devtools/images/magnifying-glass.png [deleted file]
LCARStrek/devtools/images/magnifying-glass@2x.png [deleted file]
LCARStrek/devtools/images/pause.svg [new file with mode: 0644]
LCARStrek/devtools/images/play.svg [new file with mode: 0644]
LCARStrek/devtools/images/rewind.svg [new file with mode: 0644]
LCARStrek/devtools/images/tool-options-tbutton.svg
LCARStrek/devtools/inspector.css
LCARStrek/devtools/memory.css
LCARStrek/devtools/netmonitor.css
LCARStrek/devtools/performance.css
LCARStrek/devtools/rules.css
LCARStrek/devtools/styleeditor.css
LCARStrek/devtools/toolbars.css
LCARStrek/devtools/tooltips.css [new file with mode: 0644]
LCARStrek/devtools/variables.css
LCARStrek/global/in-content/check.svg
LCARStrek/global/in-content/common.css
LCARStrek/global/popup.css

index fc423afaa578856498ad7e8eea74cb0d755a0ec7..ec8c97af13e89083f7e99ff989e0a38bb92653a8 100644 (file)
@@ -9,12 +9,9 @@
 .theme-firebug {
   --even-animation-timeline-background-color: rgba(160,144,144,0.03);
   --command-pick-image: url(chrome://devtools/skin/images/command-pick.svg);
-  --pause-image: url(chrome://devtools/skin/images/debugger-pause.png);
-  --pause-image-2x: url(chrome://devtools/skin/images/debugger-pause@2x.png);
-  --rewind-image: url(chrome://devtools/skin/images/rewind.png);
-  --rewind-image-2x: url(chrome://devtools/skin/images/rewind@2x.png);
-  --play-image: url(chrome://devtools/skin/images/debugger-play.png);
-  --play-image-2x: url(chrome://devtools/skin/images/debugger-play@2x.png);
+  --pause-image: url(chrome://devtools/skin/images/pause.svg);
+  --rewind-image: url(chrome://devtools/skin/images/rewind.svg);
+  --play-image: url(chrome://devtools/skin/images/play.svg);
 }
 
 :root {
@@ -27,8 +24,7 @@
   --timeline-animation-height: 20px;
   /* The size of a keyframe marker in the keyframes diagram */
   --keyframes-marker-size: 10px;
-  /* The color of the time graduation borders. This should match the the color
-     devtools/client/animationinspector/utils.js */
+  /* The color of the time graduation borders */
   --time-graduation-border-color: rgba(160, 144, 144, .5);
 }
 
@@ -95,9 +91,15 @@ body {
 
 /* The main animations container */
 
+#sidebar-panel-animationinspector {
+  height: 100%;
+  width: 100%;
+}
+
 #players {
   height: calc(100% - var(--toolbar-height));
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 [empty] #players {
@@ -149,6 +151,10 @@ body {
   border-width: 0 1px 0 0;
 }
 
+#element-picker {
+  height: 18px;
+}
+
 #element-picker::before {
   background-image: var(--command-pick-image);
 }
@@ -165,20 +171,6 @@ body {
   background-image: var(--play-image);
 }
 
-@media (min-resolution: 1.1dppx) {
-  .pause-button::before {
-    background-image: var(--pause-image-2x);
-  }
-
-  .pause-button.paused::before {
-    background-image: var(--play-image-2x);
-  }
-
-  #rewind-timeline::before {
-    background-image: var(--rewind-image-2x);
-  }
-}
-
 #timeline-rate select.devtools-button {
   -moz-appearance: none;
   text-align: center;
@@ -204,20 +196,7 @@ body {
 /* Animation timeline component */
 
 .animation-timeline {
-  height: 100%;
-  overflow: hidden;
   position: relative;
-  /* The timeline gets its background-image from a canvas element created in
-     /devtools/client/animationinspector/utils.js drawGraphElementBackground
-     thanks to document.mozSetImageElement("time-graduations", canvas)
-     This is done so that the background can be built dynamically from script */
-  background-image: -moz-element(#time-graduations);
-  background-repeat: repeat-y;
-  /* Make the background be 100% of the timeline area so that it resizes with
-     it and subtract the width of the sidebar and the buffer at the right of the
-     timeline */
-  background-size: calc(100% - var(--timeline-sidebar-width) - var(--keyframes-marker-size)) 100%;
-  background-position: var(--timeline-sidebar-width) 0;
   display: flex;
   flex-direction: column;
 }
@@ -234,64 +213,94 @@ body {
 }
 
 .animation-timeline .scrubber-wrapper {
-  z-index: 2;
-  pointer-events: none;
+  position: absolute;
+  left: var(--timeline-sidebar-width);
+  /* Leave the width of a marker right of a track so the 100% markers can be
+     selected easily */
+  right: var(--keyframes-marker-size);
   height: 100%;
 }
 
 .animation-timeline .scrubber {
+  z-index: 5;
+  pointer-events: none;
   position: absolute;
-  height: 100%;
+  /* Make the scrubber as tall as the viewport minus the toolbar height and the
+     header-wrapper's borders */
+  height: calc(100vh - var(--toolbar-height) - 1px);
+  min-height: 100%;
   width: 0;
   border-right: 1px solid #FF0000;
   box-sizing: border-box;
 }
 
-.animation-timeline .scrubber::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  width: 1px;
-  right: -6px;
-  border-top: 5px solid #FF0000;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-}
-
 /* The scrubber handle is a transparent element displayed on top of the scrubber
    line that allows users to drag it */
 .animation-timeline .scrubber .scrubber-handle {
   position: absolute;
   height: 100%;
-  top: 0;
   /* Make it thick enough for easy dragging */
   width: 6px;
-  right: -3px;
+  right: -1.5px;
   cursor: col-resize;
   pointer-events: all;
 }
 
+.animation-timeline .scrubber .scrubber-handle::before {
+  content: "";
+  position: sticky;
+  top: 0;
+  width: 1px;
+  border-top: 5px solid red;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+}
+
 .animation-timeline .time-header {
-  min-height: var(--toolbar-height);
+  min-height: var(--timeline-animation-height);
   cursor: col-resize;
   -moz-user-select: none;
 }
 
+.animation-timeline .time-header .header-item {
+  position: absolute;
+  height: 100%;
+  padding-top: 3px;
+  border-left: 0.5px solid var(--time-graduation-border-color);
+}
+
+.animation-timeline .header-wrapper {
+  position: sticky;
+  top: 0;
+  background-color: var(--theme-body-background);
+  border-bottom: 1px solid var(--time-graduation-border-color);
+  z-index: 3;
+  height: var(--timeline-animation-height);
+  overflow: hidden;
+}
+
+.animation-timeline .time-body {
+  height: 100%;
+}
+
 .animation-timeline .time-header .time-tick {
+  -moz-user-select: none;
   position: absolute;
-  top: 3px;
+  width: 0;
+  /* When scroll bar is shown, make it covers entire time-body */
+  height: 100%;
+  /* When scroll bar is hidden, make it as tall as the viewport minus the
+     timeline animation height and the header-wrapper's borders */
+  min-height: calc(100vh - var(--timeline-animation-height) - 1px);
+  border-left: 0.5px solid var(--time-graduation-border-color);
 }
 
 .animation-timeline .animations {
   width: 100%;
   height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  /* Leave some space for the header */
-  margin-top: var(--timeline-animation-height);
   padding: 0;
   list-style-type: none;
-  border-top: 1px solid var(--time-graduation-border-color);
+  margin-top: 0;
 }
 
 /* Animation block widgets */
@@ -376,7 +385,7 @@ body {
   align-items: center;
   padding: 0 2px;
   box-sizing: border-box;
-  --fast-track-icon-width: 12px;
+  --fast-track-icon-width: 15px;
   z-index: 1;
 }
 
@@ -396,13 +405,23 @@ body {
   content: "";
   display: block;
   position: absolute;
-  top: 0;
+  top: 1px;
   right: 0;
   height: 100%;
   width: var(--fast-track-icon-width);
   z-index: 1;
+}
 
-  background-image: url("images/animation-fast-track.svg");
+.animation-timeline .all-properties .name::after {
+  background-color: white;
+  clip-path: url(images/animation-fast-track.svg#thunderbolt);
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.animation-timeline .some-properties .name::after {
+  background-color: var(--theme-content-color3);
+  clip-path: url(images/animation-fast-track.svg#thunderbolt);
   background-repeat: no-repeat;
   background-position: center;
 }
@@ -518,6 +537,32 @@ body {
   text-overflow: ellipsis;
 }
 
+.animated-properties.cssanimation {
+  --background-color: var(--theme-contrast-background);
+}
+
+.animated-properties.csstransition {
+  --background-color: var(--theme-highlight-blue);
+}
+
+.animated-properties.scriptanimation {
+  --background-color: var(--theme-graphs-green);
+}
+
+.animation-timeline .animated-properties .oncompositor::before {
+  content: "";
+  display: inline-block;
+  width: 17px;
+  height: 17px;
+  background-color: var(--background-color);
+  clip-path: url(images/animation-fast-track.svg#thunderbolt);
+  vertical-align: middle;
+}
+
+.animation-timeline .animated-properties .warning {
+  text-decoration: underline dotted;
+}
+
 .animation-timeline .animated-properties .frames {
   /* The frames list is absolutely positioned and the left and width properties
      are dynamically set from javascript to match the animation's startTime and
diff --git a/LCARStrek/devtools/boxmodel.css b/LCARStrek/devtools/boxmodel.css
new file mode 100644 (file)
index 0000000..e38963c
--- /dev/null
@@ -0,0 +1,258 @@
+/* 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/ */
+
+#boxmodel-wrapper {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-color: var(--theme-splitter-color);
+}
+
+#boxmodel-container {
+  /* The view will grow bigger as the window gets resized, until 400px */
+  max-width: 400px;
+  margin: 0px auto;
+  padding: 0;
+}
+
+/* Header */
+
+#boxmodel-header,
+#boxmodel-info {
+  display: flex;
+  align-items: center;
+  padding: 4px 17px;
+}
+
+#layout-geometry-editor {
+  visibility: hidden;
+}
+
+#layout-geometry-editor::before {
+  background: url(images/geometry-editor.svg) no-repeat center center / 16px 16px;
+}
+
+/* Main: contains the box-model regions */
+
+#boxmodel-main {
+  position: relative;
+  box-sizing: border-box;
+  /* The regions are semi-transparent, so the white background is partly
+     visible */
+  background-color: #FF9F00;
+  color: var(--theme-selection-color);
+  /* Make sure there is some space between the window's edges and the regions */
+  margin: 0 14px 4px 14px;
+  width: calc(100% - 2 * 14px);
+}
+
+.boxmodel-margin,
+.boxmodel-size {
+/*  color: var(--theme-highlight-blue); */
+}
+
+/* Regions are 3 nested elements with wide borders and outlines */
+
+#boxmodel-content {
+  height: 18px;
+}
+
+#boxmodel-margins,
+#boxmodel-borders,
+#boxmodel-padding {
+  border-color: var(--theme-splitter-color);
+  border-width: 18px;
+  border-style: solid;
+  outline: dotted 1px var(--theme-splitter-color);
+}
+
+#boxmodel-margins {
+  /* This opacity applies to all of the regions, since they are nested */
+  opacity: .8;
+}
+
+/* Regions colors */
+
+#boxmodel-margins {
+  border-color: #FFCF00;
+}
+
+#boxmodel-borders {
+  border-color: #A09090;
+}
+
+#boxmodel-padding {
+  border-color: #8050B0;
+}
+
+#boxmodel-content {
+  background-color: #008484;
+}
+/*
+.theme-firebug #boxmodel-main,
+.theme-firebug #boxmodel-borders,
+.theme-firebug #boxmodel-content {
+  border-style: solid;
+}
+
+.theme-firebug #boxmodel-main,
+.theme-firebug #boxmodel-header {
+  font-family: var(--proportional-font-family);
+}
+
+.theme-firebug #boxmodel-main {
+  color: var(--theme-body-color);
+  font-size: var(--theme-toolbar-font-size);
+}
+
+.theme-firebug #boxmodel-header {
+  font-size: var(--theme-toolbar-font-size);
+}
+*/
+/* Editable region sizes are contained in absolutely positioned <p> */
+
+#boxmodel-main > p {
+  position: absolute;
+  pointer-events: none;
+  margin: 0;
+  text-align: center;
+}
+
+#boxmodel-main > p > span,
+#boxmodel-main > p > input {
+  vertical-align: middle;
+  pointer-events: auto;
+}
+
+/* Coordinates for the region sizes */
+
+.boxmodel-top,
+.boxmodel-bottom {
+  width: calc(100% - 2px);
+  text-align: center;
+}
+
+.boxmodel-padding.boxmodel-top {
+  top: 37px;
+}
+
+.boxmodel-padding.boxmodel-bottom {
+  bottom: 38px;
+}
+
+.boxmodel-border.boxmodel-top {
+  top: 19px;
+}
+
+.boxmodel-border.boxmodel-bottom {
+  bottom: 20px;
+}
+
+.boxmodel-margin.boxmodel-top {
+  top: 1px;
+}
+
+.boxmodel-margin.boxmodel-bottom {
+  bottom: 2px;
+}
+
+.boxmodel-size,
+.boxmodel-margin.boxmodel-left,
+.boxmodel-margin.boxmodel-right,
+.boxmodel-border.boxmodel-left,
+.boxmodel-border.boxmodel-right,
+.boxmodel-padding.boxmodel-left,
+.boxmodel-padding.boxmodel-right {
+  top: 22px;
+  line-height: 80px;
+}
+
+.boxmodel-size {
+  width: calc(100% - 2px);
+}
+
+.boxmodel-margin.boxmodel-right,
+.boxmodel-margin.boxmodel-left,
+.boxmodel-border.boxmodel-left,
+.boxmodel-border.boxmodel-right,
+.boxmodel-padding.boxmodel-right,
+.boxmodel-padding.boxmodel-left {
+  width: 21px;
+}
+
+.boxmodel-padding.boxmodel-left {
+  left: 35px;
+}
+
+.boxmodel-padding.boxmodel-right {
+  right: 35px;
+}
+
+.boxmodel-border.boxmodel-left {
+  left: 16px;
+}
+
+.boxmodel-border.boxmodel-right {
+  right: 17px;
+}
+
+.boxmodel-margin.boxmodel-right {
+  right: 0;
+}
+
+.boxmodel-margin.boxmodel-left {
+  left: 0;
+}
+
+.boxmodel-rotate.boxmodel-left:not(.boxmodel-editing) {
+  transform: rotate(-90deg);
+}
+
+.boxmodel-rotate.boxmodel-right:not(.boxmodel-editing) {
+  transform: rotate(90deg);
+}
+
+/* Legend: displayed inside regions */
+
+.boxmodel-legend {
+  position: absolute;
+  margin: 2px 6px;
+  z-index: 1;
+}
+
+.boxmodel-legend[data-box="margin"] {
+  color: #000000; /*var(--theme-highlight-blue);*/
+}
+
+/* Editable fields */
+
+.boxmodel-editable {
+  border: 1px dashed transparent;
+  -moz-user-select: text;
+}
+
+.boxmodel-editable:hover {
+  border-bottom-color: #E7ADE7;
+}
+
+.styleinspector-propertyeditor {
+  border: 1px solid #008484;
+  padding: 0;
+}
+
+/* Make sure the content size doesn't appear as editable like the other sizes */
+
+.boxmodel-size > span {
+  cursor: default;
+}
+
+/* Box Model Info: contains the position and size of the element */
+
+#boxmodel-element-size {
+  flex: 1;
+}
+
+#boxmodel-position-group {
+  display: flex;
+  align-items: center;
+}
index a8163b0d6c883c7713978c1ae41883af3f781d99..90f25d36943d2737bfe48fc0418b77a47a7e0803 100644 (file)
   list-style-image: url("chrome://devtools/skin/images/profiler-stopwatch-tbutton.svg");
 }
 
+#import-snapshot {
+  list-style-image: url("images/import.svg");
+}
+
 /* Snapshots items */
 
 .snapshot-item-thumbnail {
index e4bc9f4632d68d6e2ebea6a50bb383685d389f96..badb7e3f119991eb71306ca0553e726b4f528663 100644 (file)
@@ -49,7 +49,7 @@
 .frame-link .frame-link-line,
 .frame-link .frame-link-colon {
   color: var(--theme-highlight-orange);
-  display: block;
+/*  display: block;*/
 }
 
 .focused .frame-link .frame-link-filename,
index 9e524a0d12971a18c5a48ca30012a8c63e90857c..c47bf8c0c6041fc45ff11fcf3ec78c8739373b9f 100644 (file)
@@ -6,6 +6,7 @@
 @import url(variables.css);
 @import url(common.css);
 @import url(toolbars.css);
+@import url(tooltips.css);
 
 body, html {
   padding: 0;
@@ -380,6 +381,7 @@ div.CodeMirror span.eval-text {
 }
 
 .devtools-textinput,
+.devtools-filterinput,
 .devtools-searchinput {
   background-color: #000000;
   color: #E7ADE7;
@@ -387,6 +389,7 @@ div.CodeMirror span.eval-text {
 }
 
 .devtools-textinput:focus,
+.devtools-filterinput:focus,
 .devtools-searchinput:focus {
   border-color: #008484;
 }
index a5de58595152e4651777186eff1322aed570d424..669647f67f4786b3cd7bc0ab3d3cc9b0f37d2fff 100644 (file)
@@ -39,6 +39,8 @@ xul|scrollbar:not(:hover) xul|thumb {
 }
 
 xul|scrollbar xul|scrollbarbutton,
+xul|scrollbar xul|scrollbarbutton[sbattr="scrollbar-up-top"],
+xul|scrollbar xul|scrollbarbutton[sbattr="scrollbar-down-bottom"],
 xul|scrollbar xul|gripper {
   display: none !important; /* need !important to override forced display in LCARStrek */
 }
index d9be441935dc573ad6c285667e6cfa20648f0f53..4cd4704980a9ab0cc9f917e55885f0159a14a318 100644 (file)
@@ -42,6 +42,8 @@ scrollbar:not(:hover) thumb {
 }
 
 scrollbar scrollbarbutton,
+scrollbar scrollbarbutton[sbattr="scrollbar-up-top"],
+scrollbar scrollbarbutton[sbattr="scrollbar-down-bottom"],
 scrollbar gripper {
   display: none !important; /* need !important to override forced display in LCARStrek */
 }
index 932c5e63b30de8b9f9264518a48be8bf475b009f..c781a340a0391a66fd5dd80854bc7b3a210b1c96 100644 (file)
@@ -37,8 +37,9 @@
   border-radius: 300px;
   border: none;
   background-color: var(--fonts-button-background);
-  color: var(--fonts-selected-text);
+  color: var(--fonts-button-text);
   margin: 3px;
+  padding: 0 6px;
   cursor: pointer;
   position: fixed;
   bottom: 0;
diff --git a/LCARStrek/devtools/images/dropmarker.svg b/LCARStrek/devtools/images/dropmarker.svg
new file mode 100644 (file)
index 0000000..b175ec1
--- /dev/null
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public\r
+   - License, v. 2.0. If a copy of the MPL was not distributed with this\r
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->\r
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4">\r
+  <polygon points="0,0 4,4 8,0" fill="#FFCF00"/>\r
+</svg>\r
diff --git a/LCARStrek/devtools/images/filter.svg b/LCARStrek/devtools/images/filter.svg
new file mode 100644 (file)
index 0000000..2e3ad5a
--- /dev/null
@@ -0,0 +1,16 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="#FFCF00">
+  <style>
+    /* Use a fill that's visible on both light and dark themes for filter inputs */
+    #filterinput:target + #icon {
+      fill: #aaa;
+    }
+  </style>
+  <g id="filterinput"/>
+  <g id="icon">
+    <path fill-opacity=".3" d="M6.6 8.4c0-.6-1.7.3-1.7-.3 0-.4-1.7-2.7-1.7-2.7H13s-1.8 2-1.8 2.7c0 .3-2.1-.1-2.1.3v6.1H7s-.4-4.1-.4-6.1z"/>
+    <path d="M2 2v2.3L4.7 9H6v5.4l2.1 1 1.8-.9V9h1.3L14 4.3V2H2zm11 2l-2.2 4H9v5.8l-.9.4-1.1-.5V8H5.2L3 4V3h10v1z"/>
+  </g>
+</svg>
index 384a18b6632efa3c8451cf560b8c7de3f3fc2e8c..8e76a1b41e7308575ba6307cf95bcee78d789f43 100644 (file)
@@ -3,13 +3,20 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <svg height="0" xmlns="http://www.w3.org/2000/svg">
-  <filter id="checked-icon-state">
+  <filter id="checked-icon-state"><!-- make every icon be fully black, but keep alpha channel -->
     <feColorMatrix in="SourceGraphic" type="matrix"
       values="0 0 0 0 0
               0 0 0 0 0
               0 0 0 0 0
               0 0 0 1 0"/>
  </filter>
+ <filter id="disabled-icon-state"><!-- move any icon to #8050B0 / rgb(128,80,176), keeping alpha channel -->
+    <feColorMatrix in="SourceGraphic" type="matrix" color-interpolation-filters="sRGB"
+      values="0 0 0 0 0.50
+              0 0 0 0 0.31
+              0 0 0 0 0.69
+              0 0 0 1 0"/>
+ </filter>
 
   <!-- Web Audio Gradients -->
   <linearGradient id="bypass-light" x1="6%" y1="8%" x2="12%" y2="12%" spreadMethod="repeat">
diff --git a/LCARStrek/devtools/images/itemToggle.svg b/LCARStrek/devtools/images/itemToggle.svg
new file mode 100644 (file)
index 0000000..f8d4165
--- /dev/null
@@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#FFCF00">
+  <circle cx="8" cy="8.5" r="1.5"/>
+  <path d="M15.498 8.28l-.001-.03v-.002-.004l-.002-.018-.004-.031c0-.002 0-.002 0 0l-.004-.035.006.082c-.037-.296-.133-.501-.28-.661-.4-.522-.915-1.042-1.562-1.604-1.36-1.182-2.74-1.975-4.178-2.309a6.544 6.544 0 0 0-2.755-.042c-.78.153-1.565.462-2.369.91C3.252 5.147 2.207 6 1.252 7.035c-.216.233-.36.398-.499.577-.338.437-.338 1 0 1.437.428.552.941 1.072 1.59 1.635 1.359 1.181 2.739 1.975 4.177 2.308.907.21 1.829.223 2.756.043.78-.153 1.564-.462 2.369-.91 1.097-.612 2.141-1.464 3.097-2.499.217-.235.36-.398.498-.578.12-.128.216-.334.248-.554 0 .01 0 .01-.008.04l.013-.079-.001.011.003-.031.001-.017v.005l.001-.02v.008l.002-.03.001-.05-.001-.044v-.004-.004zm-.954.045v.007l.001.004V8.33v.012l-.001.01v-.005-.005l.002-.015-.001.008c-.002.014-.002.014 0 0l-.007.084c.003-.057-.004-.041-.014-.031-.143.182-.27.327-.468.543-.89.963-1.856 1.752-2.86 2.311-.724.404-1.419.677-2.095.81a5.63 5.63 0 0 1-2.374-.036c-1.273-.295-2.523-1.014-3.774-2.101-.604-.525-1.075-1.001-1.457-1.496-.054-.07-.054-.107 0-.177.117-.152.244-.298.442-.512.89-.963 1.856-1.752 2.86-2.311.724-.404 1.419-.678 2.095-.81a5.631 5.631 0 0 1 2.374.036c1.272.295 2.523 1.014 3.774 2.101.603.524 1.074 1 1.457 1.496.035.041.043.057.046.076 0 .01 0 .01.008.043l-.009-.047.003.02-.002-.013v-.008.016c0-.004 0-.004 0 0v-.004z"/>
+</svg>
diff --git a/LCARStrek/devtools/images/magnifying-glass-light.png b/LCARStrek/devtools/images/magnifying-glass-light.png
deleted file mode 100644 (file)
index 8d50b9d..0000000
Binary files a/LCARStrek/devtools/images/magnifying-glass-light.png and /dev/null differ
diff --git a/LCARStrek/devtools/images/magnifying-glass-light@2x.png b/LCARStrek/devtools/images/magnifying-glass-light@2x.png
deleted file mode 100644 (file)
index 4059774..0000000
Binary files a/LCARStrek/devtools/images/magnifying-glass-light@2x.png and /dev/null differ
diff --git a/LCARStrek/devtools/images/magnifying-glass.png b/LCARStrek/devtools/images/magnifying-glass.png
deleted file mode 100644 (file)
index 8d50b9d..0000000
Binary files a/LCARStrek/devtools/images/magnifying-glass.png and /dev/null differ
diff --git a/LCARStrek/devtools/images/magnifying-glass@2x.png b/LCARStrek/devtools/images/magnifying-glass@2x.png
deleted file mode 100644 (file)
index 4059774..0000000
Binary files a/LCARStrek/devtools/images/magnifying-glass@2x.png and /dev/null differ
diff --git a/LCARStrek/devtools/images/pause.svg b/LCARStrek/devtools/images/pause.svg
new file mode 100644 (file)
index 0000000..04b8d40
--- /dev/null
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#FFCF00">
+  <path d="M5 12.503l.052-9a.5.5 0 0 0-1-.006l-.052 9a.5.5 0 0 0 1 .006zM12 12.497l-.05-9A.488.488 0 0 0 11.474 3a.488.488 0 0 0-.473.503l.05 9a.488.488 0 0 0 .477.497.488.488 0 0 0 .473-.503z"/>
+</svg>
diff --git a/LCARStrek/devtools/images/play.svg b/LCARStrek/devtools/images/play.svg
new file mode 100644 (file)
index 0000000..ef7db36
--- /dev/null
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#FFCF00b">
+  <path d="M4 12.5l8-5-8-5v10zm-1 0v-10a1 1 0 0 1 1.53-.848l8 5a1 1 0 0 1 0 1.696l-8 5A1 1 0 0 1 3 12.5z" fill-rule="evenodd"/>
+</svg>
diff --git a/LCARStrek/devtools/images/rewind.svg b/LCARStrek/devtools/images/rewind.svg
new file mode 100644 (file)
index 0000000..a423fec
--- /dev/null
@@ -0,0 +1,6 @@
+<!-- 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/. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#FFCF00">
+  <path d="M13 2.5l-8 5 8 5v-10zm1 0v10a1 1 0 0 1-1.53.848l-8-5a1 1 0 0 1 0-1.696l8-5A1 1 0 0 1 14 2.5zM2 12.497l-.04-7.342-.01-1.658A.488.488 0 0 0 1.474 3 .488.488 0 0 0 1 3.503l.05 9a.488.488 0 0 0 .477.497.488.488 0 0 0 .473-.503z"/>
+</svg>
index c2c1c37cd61a1c774b43eac1f1e7b8f5ff7b5ede..b54c3cce597d375a3c2c2656b1ac32c7347dc836 100644 (file)
@@ -2,5 +2,5 @@
    - 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/. -->
 <svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <path fill="#000000" d="m11.5,13.9l-.6-1.5c.3-.2 .5-.4 .8-.6 .2-.2 .4-.5 .6-.7l1.5,.6c.3,.1 .6,0 .7-.3l.4-1c.1-.3 0-.6-.3-.7l-1.5-.6c.1-.6 .1-1.3 0-2l1.5-.6c.3-.1 .4-.4 .3-.7l-.4-1c-.1-.3-.4-.4-.7-.3l-1.5,.6c-.2-.3-.4-.5-.6-.8-.2-.1-.5-.3-.7-.5l.6-1.5c.1-.3 0-.6-.3-.7l-.9-.4c-.3-.1-.6,0-.7,.3l-.6,1.5c-.6-.1-1.3-.1-2,0l-.6-1.5c-.1-.3-.4-.4-.7-.3l-1,.4c-.2,.1-.3,.4-.2,.6l.6,1.5c-.3,.3-.5,.5-.8,.7-.2,.3-.4,.5-.6,.8l-1.5-.7c-.3-.1-.6,0-.7,.3l-.4,.9c-.1,.3 0,.6 .3,.7l1.5,.7c-.1,.6-.1,1.3 0,1.9l-1.5,.6c-.3,.1-.4,.4-.3,.7l.4,1c.1,.3 .4,.4 .7,.3l1.5-.6c.2,.3 .4,.5 .6,.8 .2,.2 .5,.4 .7,.6l-.6,1.5c-.1,.3 0,.6 .3,.7l1,.4c.3,.1 .6,0 .7-.3l.6-1.5c.6,.1 1.3,.1 2,0l.6,1.5c.1,.3 .4,.4 .7,.3l1-.4c.1-.1 .3-.4 .1-.7zm-5.1-4.2c-.9-.9-.9-2.4 0-3.3 .9-.9 2.4-.9 3.3,0 .9,.9 .9,2.4 0,3.3-.9,.9-2.4,.9-3.3,0z"/>
+  <path fill="#FFCF00" d="m11.5,13.9l-.6-1.5c.3-.2 .5-.4 .8-.6 .2-.2 .4-.5 .6-.7l1.5,.6c.3,.1 .6,0 .7-.3l.4-1c.1-.3 0-.6-.3-.7l-1.5-.6c.1-.6 .1-1.3 0-2l1.5-.6c.3-.1 .4-.4 .3-.7l-.4-1c-.1-.3-.4-.4-.7-.3l-1.5,.6c-.2-.3-.4-.5-.6-.8-.2-.1-.5-.3-.7-.5l.6-1.5c.1-.3 0-.6-.3-.7l-.9-.4c-.3-.1-.6,0-.7,.3l-.6,1.5c-.6-.1-1.3-.1-2,0l-.6-1.5c-.1-.3-.4-.4-.7-.3l-1,.4c-.2,.1-.3,.4-.2,.6l.6,1.5c-.3,.3-.5,.5-.8,.7-.2,.3-.4,.5-.6,.8l-1.5-.7c-.3-.1-.6,0-.7,.3l-.4,.9c-.1,.3 0,.6 .3,.7l1.5,.7c-.1,.6-.1,1.3 0,1.9l-1.5,.6c-.3,.1-.4,.4-.3,.7l.4,1c.1,.3 .4,.4 .7,.3l1.5-.6c.2,.3 .4,.5 .6,.8 .2,.2 .5,.4 .7,.6l-.6,1.5c-.1,.3 0,.6 .3,.7l1,.4c.3,.1 .6,0 .7-.3l.6-1.5c.6,.1 1.3,.1 2,0l.6,1.5c.1,.3 .4,.4 .7,.3l1-.4c.1-.1 .3-.4 .1-.7zm-5.1-4.2c-.9-.9-.9-2.4 0-3.3 .9-.9 2.4-.9 3.3,0 .9,.9 .9,2.4 0,3.3-.9,.9-2.4,.9-3.3,0z"/>
 </svg>
index 4be769a738ad63797f1a880645c135b22c6cd0f7..71f5a607a1c27982dd12161d565dcb7e77e18276 100644 (file)
@@ -2,10 +2,56 @@
  * 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/. */
 
+:root {
+  --eyedropper-image: url(images/command-eyedropper.svg);
+}
+
 window {
   padding: 0;
 }
 
+/* Use flex layout for the Inspector toolbar. For now, it's done
+   specifically for the Inspector toolbar since general rule applied
+   on .devtools-toolbar breaks breadcrubs and also toolbars in other
+   panels (e.g. webconsole, debugger), these are not ready for HTML
+   layout yet. */
+div#inspector-toolbar.devtools-toolbar {
+  display: flex;
+  background-size: calc(100% - 30px);
+  background-image: linear-gradient(90deg,#9C9CFF,#9C9CFF);
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+div#inspector-toolbar.devtools-toolbar .devtools-toolbar-spacer {
+  flex-grow: 1;
+  display: inline-block;
+}
+
+div#inspector-toolbar.devtools-toolbar::before,
+div#inspector-toolbar.devtools-toolbar::after {
+  display: flex;
+  content: "";
+  width: 12px;
+  min-height: 16px;
+  background-color: #FF9F00;
+}
+
+div#inspector-toolbar.devtools-toolbar::before {
+  border-radius: 8px 0px 0px 8px;
+  border: none;
+  border-inline-end: 3px solid black;
+  margin-inline-end: 2px;
+}
+
+div#inspector-toolbar.devtools-toolbar::after {
+  border-radius: 0px 8px 8px 0px;
+  border: none;
+  border-inline-start: 3px solid black;
+  margin-inline-start: 2px;
+}
+
+
 #inspector-toolbar {
   border-top: none;
 }
@@ -42,6 +88,93 @@ window {
   list-style-image: url("chrome://devtools/skin/images/add.svg");
 }
 
+button#inspector-element-add-button::before {
+  background-image: url("chrome://devtools/skin/images/add.svg");
+  list-style-image: url("chrome://devtools/skin/images/add.svg");
+  -moz-user-focus: normal;
+}
+
+#inspector-search {
+  flex: unset;
+}
+
+/* TODO: bug 1265759: should apply to .devtools-searchinput once all searchbox
+   is converted to html*/
+#inspector-searchbox {
+  width: 100%;
+}
+
+/* Eyedropper toolbar button */
+
+#inspector-eyedropper-toggle {
+  /* hidden by default, until we can check that the required highlighter exists */
+  display: none;
+}
+
+#inspector-eyedropper-toggle::before {
+  background-image: var(--eyedropper-image);
+}
+
+#inspector-sidebar-toggle-box {
+  line-height: initial;
+}
+
+button#sidebar-toggle {
+  height: 100%;
+}
+
+/* Set the minimum width for the side bar so, all tabs are
+  properly visible. The value can be decreased when bug 1281789
+  is fixed and the all-tabs-menu is available again. */
+#inspector-sidebar-container {
+  overflow: hidden;
+  min-width: 300px;
+  position: relative;
+}
+
+div#inspector-sidebar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+/* Sidebar tabs */
+
+.tabs .tabs-navigation {
+  height: auto !important;
+}
+
+.tabs .tabs-menu-item {
+  border-radius: 8px 8px 0px 0px;
+  margin-top: 2px;
+  border: 0 !important;
+  border-inline-end: 2px solid transparent !important;
+  border-bottom: none;
+  padding: 2px 4px 1px;
+  background-color: var(--theme-button-background);
+  color: var(--theme-button-color);
+  background-clip: padding-box;
+  height: auto !important;
+}
+
+.tabs .tabs-menu-item a {
+  color: inherit !important;
+  padding: 0 !important;
+  border: 0;
+}
+
+.tabs .tabs-menu-item:hover {
+  background-color: var(--theme-hover-background);
+  color: var(--theme-hover-color);
+}
+
+.tabs .tabs-menu-item:hover:active {
+  background-color: var(--theme-active-background);
+  color: var(--theme-active-color);
+}
+
 /* Tooltip: Events */
 
 #devtools-tooltip-events-container {
index 0351cb09980e6c510078d691b2f6412349eac5eb..20b41e7d38e5408cefdfc5a9669680e06d12ba72 100644 (file)
@@ -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 {
@@ -116,6 +149,7 @@ html, body, #app, #memory-tool {
 #pop-view-button-label {
   border-inline-end: 1px solid var(--theme-splitter-color);
   padding-inline-end: 5px;
+  flex: none;
 }
 
 /**
@@ -125,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 {
@@ -137,7 +171,8 @@ html, body, #app, #memory-tool {
 
 #filter {
   align-self: stretch;
-  margin: 2px;
+/*  margin: 2px; */
+  font: inherit;
 }
 
 /**
@@ -639,3 +674,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);
+  -moz-margin-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);
+}
index fe378ec64c552ea40abeeee1ea1e07a9d42a9c20..5ee2b67fa6ab39b49d54e967d25a49e7232369e2 100644 (file)
@@ -49,7 +49,6 @@ window {
 #requests-menu-reload-notice-button {
   min-height: 26px;
   margin: 0;
-  background-color: var(--theme-toolbar-background);
 }
 
 /* Network requests table */
@@ -74,8 +73,8 @@ window {
 .requests-menu-header-button {
   background-color: transparent;
   border-image: linear-gradient(transparent 15%,
-                                var(--theme-splitter-color) 15%,
-                                var(--theme-splitter-color) 85%,
+                                var(--theme-toolbar-background) 15%,
+                                var(--theme-toolbar-background) 85%,
                                 transparent 85%) 1 1;
   border-style: solid;
   border-width: 0;
@@ -218,6 +217,24 @@ window {
   width: 8vw;
 }
 
+.requests-menu-cause {
+  max-width: 8em;
+  width: 8vw;
+}
+
+.requests-menu-cause-stack {
+  background-color: var(--theme-body-color-alt);
+  color: var(--theme-body-background);
+  font-size: 8px;
+  font-weight: bold;
+  line-height: 10px;
+  border-radius: 3px;
+  padding: 0 2px;
+  margin: 0;
+  margin-inline-end: 3px;
+  -moz-user-select: none;
+}
+
 .requests-menu-transferred {
   max-width: 8em;
   text-align: center;
@@ -589,6 +606,8 @@ window {
   padding: 0 5px;
   margin: 2px;
   color: var(--theme-body-color);*/
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 .requests-menu-filter-button:hover {
@@ -602,13 +621,10 @@ window {
 /* Performance analysis buttons */
 
 #requests-menu-network-summary-button {
-  background: none;
   box-shadow: none;
   border-color: transparent;
-  list-style-image: url("images/profiler-stopwatch.svg");
-  -moz-padding-end: 0;
+  list-style-image: url("images/profiler-stopwatch-tbutton.svg");
   cursor: pointer;
-  margin-inline-end: 1em;
   min-width: 0;
 }
 
index 8ac95bc61b860c73938f5d033b3b22b0c4fea4c5..1ead491870e952cf6bdd75d3416fce00fa961d45 100644 (file)
 
 /* Recording buttons */
 
-#main-record-button {
-  list-style-image: url(images/profiler-stopwatch.svg);
+#recordings-controls {
+  background-color: #9C9CFF;
+}
+
+#clear-button::before {
+  background-image: var(--clear-icon-url);
+}
+
+#main-record-button::before {
+  background-image: url(images/profiler-stopwatch-tbutton.svg);
+}
+
+#import-button::before {
+  background-image: url(images/import.svg);
+}
+
+#main-record-button .button-icon, #import-button .button-icon {
+  margin: 0;
+}
+
+#main-record-button .button-text, #import-button .button-text {
+  display: none;
 }
 
 #main-record-button .button-icon {
index 84a65baedfda3d25498433c875d47226e0d07814..e104d3ac19af0ea8c9f43b50377f9a6bb3c10209 100644 (file)
@@ -7,7 +7,6 @@
 .theme-dark,
 .theme-firebug {
   --rule-highlight-background-color: #402000;
-  --rule-filter-icon: url(images/magnifying-glass.png);
 }
 
 /* Rule View Tabpanel */
   -moz-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 {
 }
 
 .ruleview-overridden-rule-filter {
-  background-image: var(--rule-filter-icon);
+  background-image: url(images/filter.svg#filterinput);
   background-size: 11px 11px;
   margin-inline-start: 5px;
   display: inline-block;
index aabfdf6ff2539363bf12dad5af895a2afa64e838..cb257d9de1161b7b7db32fbc5dfebb5df2dd5275 100644 (file)
@@ -10,9 +10,47 @@ window:not([windowtype]) {
 }
 
 #style-editor-chrome {
+  -moz-box-flex: 1;
   background-color: #000000;
 }
 
+.splitview-nav > li,
+.stylesheet-info,
+.stylesheet-more,
+.stylesheet-rule-count,
+li.splitview-active > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton,
+li:hover > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton {
+  display: -moz-box;
+}
+
+.devtools-toolbar > spacer {
+  -moz-box-flex: 1;
+}
+
+.style-editor-newButton {
+  list-style-image: url(images/add.svg);
+}
+
+.style-editor-importButton {
+  list-style-image: url(images/import.svg);
+}
+
+.stylesheet-details-container {
+  -moz-box-flex: 1;
+}
+
+.stylesheet-media-container {
+  overflow-y: auto;
+}
+
+.stylesheet-error-message {
+  display: none;
+}
+
+li.error > .stylesheet-info > .stylesheet-more  > .stylesheet-error-message {
+  display: block;
+}
+
 .stylesheet-title,
 .stylesheet-name {
   text-decoration: none;
@@ -21,6 +59,24 @@ window:not([windowtype]) {
 
 .stylesheet-name {
   font-size: 13px;
+  white-space: nowrap;
+}
+
+.stylesheet-name > label {
+  display: inline;
+  cursor: pointer;
+}
+
+.stylesheet-info > h1 {
+  -moz-box-flex: 1;
+}
+
+.splitview-nav > li > hgroup.stylesheet-info {
+  -moz-box-pack: center;
+}
+
+.stylesheet-more > spacer {
+  -moz-box-flex: 1;
 }
 
 .stylesheet-rule-count,
@@ -49,6 +105,16 @@ window:not([windowtype]) {
   outline: 0; /* focus ring is on the stylesheet name */
 }
 
+.splitview-nav > li {
+  -moz-box-orient: horizontal;
+}
+
+.splitview-nav > li > hgroup {
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  -moz-box-flex: 1;
+}
+
 .splitview-nav > li.unsaved > hgroup .stylesheet-name {
   font-style: italic;
 }
@@ -70,12 +136,14 @@ window:not([windowtype]) {
 }
 
 .media-rule-label {
-  border-bottom: 1px solid #A09090; /* Grey */
+  border-bottom: 1px solid var(--theme-splitter-color);
 }
 
 .media-rule-label {
+  display: flex;
   padding: 4px;
   cursor: pointer;
+  border-bottom: 1px solid;
 }
 
 .media-responsive-mode-toggle {
@@ -84,7 +152,7 @@ window:not([windowtype]) {
 }
 
 .media-rule-line {
-  -moz-padding-start: 4px;
+  padding-inline-start: 4px;
 }
 
 .media-condition-unmatched {
@@ -92,26 +160,28 @@ window:not([windowtype]) {
 /*  opacity: 0.4;*/
 }
 
+.media-rule-condition {
+  flex: 1;
+  overflow: hidden;
+}
+
 .stylesheet-enabled {
+  display: -moz-box;
+  cursor: pointer;
   padding: 8px 0;
   margin: 0 8px;
-  background-image: url("images/itemToggle.png");
+  background-image: url("images/itemToggle.svg");
   background-repeat: no-repeat;
   background-clip: content-box;
-  background-position: 0 8px;
-  background-size: 48px 24px;
+  background-position: center;
+  background-size: 16px;
   width: 24px;
   height: 40px;
-}
-
-@media (min-resolution: 1.1dppx) {
-  .stylesheet-enabled {
-    background-image: url("images/itemToggle@2x.png");
-  }
+/*  filter: var(--icon-filter);*/
 }
 
 .disabled > .stylesheet-enabled {
-  background-position: -24px 8px;
+  filter: url(images/filters.svg#disabled-icon-state);
 }
 
 .splitview-nav > li > .stylesheet-enabled:focus,
@@ -120,15 +190,29 @@ window:not([windowtype]) {
 }
 
 .stylesheet-linked-file:not(:empty){
-  -moz-margin-end: 0.4em;
+  margin-inline-end: 0.4em;
 }
 
 .stylesheet-linked-file:not(:empty):before {
-  -moz-margin-start: 0.4em;
+  margin-inline-start: 0.4em;
+  content: " ↳ ";
+}
+
+li.unsaved > hgroup > h1 > .stylesheet-name:before {
+  content: "*";
+}
+
+li.linked-file-error .stylesheet-linked-file {
+  text-decoration: line-through;
 }
 
 li.linked-file-error .stylesheet-linked-file:after {
   font-size: 110%;
+  content: " ✘";
+}
+
+li.linked-file-error .stylesheet-rule-count {
+  visibility: hidden;
 }
 
 .stylesheet-more > h3 {
@@ -136,7 +220,8 @@ li.linked-file-error .stylesheet-linked-file:after {
   -moz-margin-end: 2px;
 }
 
-.devtools-searchinput {
+.devtools-searchinput,
+.devtools-filterinput {
   max-width: 25ex;
   font-size: 11px;
 }
@@ -162,6 +247,11 @@ h3 {
 
 /* portrait mode */
 @media (max-width: 550px) {
+  li.splitview-active > hgroup > .stylesheet-more > .stylesheet-rule-count,
+  li:hover > hgroup > .stylesheet-more > .stylesheet-rule-count {
+    display: none;
+  }
+
   .splitview-nav {
     box-shadow: none;
   }
@@ -182,26 +272,65 @@ h3 {
 
   .splitview-nav > li > hgroup.stylesheet-info {
     -moz-box-align: baseline;
+    -moz-box-orient: horizontal;
+    -moz-box-flex: 1;
   }
 
   .stylesheet-sidebar {
     width: 180px;
   }
+
+  .stylesheet-more {
+    -moz-box-flex: 1;
+    -moz-box-pack: end;
+  }
+
+  .stylesheet-more > spacer {
+    -moz-box-flex: 0;
+  }
 }
 
 .csscoverage-report {
   background-color: var(--theme-contrastsidebar-background);
+  -moz-box-orient: horizontal;
 }
 
 .csscoverage-report-container {
   height: 100vh;
-  padding: 10px;
+  padding: 0 10px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -moz-box-flex: 1;
 }
 
 .csscoverage-report-content {
   margin: 20px auto;
   -moz-column-width: 300px;
   font-size: 13px;
+  -moz-user-select: text;
+}
+
+.csscoverage-report-summary,
+.csscoverage-report-unused,
+.csscoverage-report-optimize {
+  display: inline-block;
+}
+
+.csscoverage-report-unused,
+.csscoverage-report-optimize {
+  flex: 1;
+  min-width: 0;
+}
+
+@media (max-width: 950px) {
+  .csscoverage-report-content {
+    display: block;
+  }
+
+  .csscoverage-report-summary {
+    display: block;
+    text-align: center;
+  }
 }
 
 .csscoverage-report h1 {
@@ -219,6 +348,12 @@ h3 {
   margin: 10px 0;
 }
 
+.csscoverage-report code,
+.csscoverage-report textarea {
+  font-family: var(--monospace-font-family);
+  font-size: inherit;
+}
+
 .csscoverage-list:after {
   content: ', ';
 }
@@ -251,7 +386,12 @@ h3 {
   border-radius: 0;
   border-top: none;
   border-bottom: none;
-  -moz-border-start: none;
+  border-inline-start: none;
+}
+
+.csscoverage-report .pie-table-chart-container {
+  -moz-box-orient: vertical;
+  text-align: start;
 }
 
 .chart-colored-blob[name="Used Preload"] {
@@ -280,5 +420,5 @@ h3 {
 }
 
 .csscoverage-report-chart {
-  margin: 0 50px;
+  margin: 0 20px;
 }
index 37fd6c6ac8dc7e8880896d5ea66194e251c4903e..c46b93b55766be8adeb5af1022c1b5ac92e6e638 100644 (file)
@@ -13,9 +13,9 @@
   --searchbox-border-color: #9C9CFF;
   --searcbox-no-match-background-color: #400000;
   --searcbox-no-match-border-color: #FF0000;
-  --magnifying-glass-image: url(images/magnifying-glass-light.png);
-  --magnifying-glass-image-2x: url(images/magnifying-glass-light@2x.png);
-  --tool-options-image: url(images/tool-options.svg);
+  --magnifying-glass-image: url(images/search.svg);
+  --filter-image: url(images/filter.svg);
+  --tool-options-image: url(images/tool-options-tbutton.svg);
   --close-button-image: url(chrome://devtools/skin/images/close.svg);
   --icon-filter: invert(1);
   --dock-bottom-image: url(chrome://devtools/skin/images/dock-bottom.svg);
   --command-measure-image: url(images/command-measure.svg);
 }
 
+#toolbox-container {
+ padding-top: 3px;
+}
+
 /* Toolbars */
 .devtools-toolbar,
 .devtools-sidebar-tabs tabs {
 }
 
 .devtools-toolbar {
+  border-bottom: 3px solid var(--theme-body-background);
 }
 
 .devtools-toolbar checkbox {
 .devtools-button {
   margin: 0;
   padding: 0;
+  border: none;
+  border-radius: 3px;
   min-width: 16px;
+  height: 100%;
+  margin-inline-start: 2px;
   background: var(--theme-toolbar-background);
   color: var(--theme-body-color);
   /* The icon is absolutely positioned in the button using ::before */
   border: none;
 /*  min-height: 32px; */
   background-color: var(--theme-button-background);
+  color: var(--theme-button-color);
+  border-radius: 300px;
+}
+
+.devtools-button[standalone]:hover,
+.devtools-button[data-standalone]:hover,
+.devtools-toolbarbutton[standalone]:hover,
+.devtools-toolbarbutton[data-standalone]:hover {
+  background-color: var(--theme-hover-background);
+  color: var(--theme-hover-color);
+}
+
+.devtools-button[standalone]:hover:active,
+.devtools-button[data-standalone]:hover:active,
+.devtools-toolbarbutton[standalone]:hover:active,
+.devtools-toolbarbutton[data-standalone]:hover:active {
+  background-color: var(--theme-active-background);
+  color: var(--theme-active-color);
 }
 
 .devtools-toolbarbutton[standalone], .devtools-toolbarbutton[data-standalone] {
 /*  opacity: 0.5 !important;*/
 }
 
+.devtools-button[standalone]::before,
+.devtools-button[data-standalone]::before,
+.devtools-toolbarbutton[standalone]::before,
+.devtools-toolbarbutton[data-standalone]::before,
+.devtools-button:not([disabled]):hover::before,
+.devtools-button:not([disabled]):hover:active::before,
 .devtools-button[checked]:empty::before,
 .devtools-button[open]:empty::before,
-.devtools-toolbarbutton:not([label]):hover > image,
-.devtools-toolbarbutton:not([label]):hover:active > image,
-.devtools-toolbarbutton:not([label])[checked=true] > image,
-.devtools-toolbarbutton:not([label])[open=true] > image {
+.devtools-button[standalone] > image,
+.devtools-button[data-standalone] > image,
+.devtools-toolbarbutton[standalone] > image,
+.devtools-toolbarbutton[data-standalone] > image,
+.devtools-toolbarbutton:not([disabled]):hover > image,
+.devtools-toolbarbutton:not([disabled]):hover:active > image,
+.devtools-toolbarbutton[checked=true] > image,
+.devtools-toolbarbutton[open=true] > image {
+  filter: url(images/filters.svg#checked-icon-state);
+}
+
+#toolbox-close:hover::before,
+#toolbox-close:hover:active::before,
+.toolbox-dock-button:hover::before,
+.toolbox-dock-button:hover:active::before,
+.command-button:hover::before,
+.command-button:hover:active::before,
+.command-button[checked=true]::before,
+.command-button[open=true]::before,
+#toolbox-close:hover > image,
+#toolbox-close:hover:active > image,
+.toolbox-dock-button:hover > image,
+.toolbox-dock-button:hover:active > image,
+.command-button:hover > image,
+.command-button:hover:active > image,
+.command-button[checked=true] > image,
+.command-button[open=true] > image {
   filter: url(images/filters.svg#checked-icon-state);
 }
 
+.devtools-button[disabled]::before,
+.devtools-toolbarbutton[disabled] > image {
+  filter: url(images/filters.svg#disabled-icon-state);
+}
+
 /* Icon-and-text buttons */
 .devtools-toolbarbutton.icon-and-text .toolbarbutton-text {
   margin-inline-start: .5em !important;
 /* Text input */
 
 .devtools-textinput,
+.devtools-filterinput,
 .devtools-searchinput {
 /*  -moz-appearance: none;
   margin: 1 3px;
   border-radius: 2px;
   padding: 4px 6px;
   border-color: var(--theme-splitter-color);*/
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 :root[platform="mac"] .devtools-textinput,
   -moz-image-region: rect(0, 32px, 16px, 16px);
 }
 
-@media (min-resolution: 1.1dppx) {
-  .devtools-searchinput {
-    background-image: var(--magnifying-glass-image-2x);
-  }
-}
-
 /* Close button */
 
 .devtools-closebutton {
   background-repeat: no-repeat;
 }
 
+button#toolbox-close {
+  margin-inline-start: 2px;
+  margin-inline-end: 10px;
+}
+
 .devtools-closebutton > .toolbarbutton-icon {
   /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must
      use evil CSS to give the impression of smaller content */
 
 /* In-tools sidebar */
 
-.devtools-sidebar-tabs {
+div.devtools-sidebar-tabs {
+  height: 100%;
 }
 
 .devtools-sidebar-tabs > tabpanels {
 .command-button {
   -moz-appearance: none;
   border: none;
-/*  padding: 0 8px; */
-/*  margin: 0; */
-  width: 16px;
+  margin-inline-start: 2px;
+  width: 20px;
+  height: 100%;
   position: relative;
   -moz-user-focus: normal;
 }
 
+button.toolbox-dock-button,
+button.command-button {
+  padding: 8px;
+}
+
 .command-button:hover {
 /*  background-color: var(--toolbar-tab-hover); */
 }
   background-repeat: no-repeat;
 }
 
-#toolbox-close:hover::before,
-#toolbox-close:hover:active::before,
-.toolbox-dock-button:hover::before,
-.toolbox-dock-button:hover:active::before,
-.command-button:hover::before,
-.command-button:hover:active::before,
-.command-button[checked=true]::before,
-.command-button[open=true]::before,
-.command-button:hover > image,
-.command-button:hover:active > image,
-.command-button[checked=true] > image,
-.command-button[open=true] > image {
-  filter: url(images/filters.svg#checked-icon-state);
-}
-
 /* Toolbox buttons images */
 
 #command-button-paintflashing > image,
diff --git a/LCARStrek/devtools/tooltips.css b/LCARStrek/devtools/tooltips.css
new file mode 100644 (file)
index 0000000..760dd83
--- /dev/null
@@ -0,0 +1,456 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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/. */
+
+/* Tooltip specific theme variables */
+
+.theme-dark,
+.theme-light {
+  --bezier-diagonal-color: #A09090;
+  --bezier-grid-color: rgba(0, 0, 0, 0.2);
+}
+
+/* Tooltip widget (see devtools/client/shared/widgets/Tooltip.js) */
+
+.devtools-tooltip .panel-arrowcontent {
+  padding: 4px;
+}
+
+.devtools-tooltip .panel-arrowcontainer {
+  /* Reseting the transition used when panels are shown */
+  transition: none;
+  /* Panels slide up/down/left/right when they appear using a transform.
+  Since we want to remove the transition, we don't need to transform anymore
+  plus it can interfeer by causing mouseleave events on the underlying nodes */
+  transform: none;
+}
+
+.devtools-tooltip[clamped-dimensions] {
+  min-height: 100px;
+  max-height: 400px;
+  min-width: 100px;
+  max-width: 400px;
+}
+.devtools-tooltip[clamped-dimensions-no-min-height] {
+  min-height: 0;
+  max-height: 400px;
+  min-width: 100px;
+  max-width: 400px;
+}
+.devtools-tooltip[clamped-dimensions-no-max-or-min-height] {
+  min-width: 400px;
+  max-width: 400px;
+}
+.devtools-tooltip[clamped-dimensions] .panel-arrowcontent,
+.devtools-tooltip[clamped-dimensions-no-min-height] .panel-arrowcontent,
+.devtools-tooltip[clamped-dimensions-no-max-or-min-height] .panel-arrowcontent {
+  overflow: hidden;
+}
+.devtools-tooltip[wide] {
+  max-width: 600px;
+}
+
+/* Tooltip: Simple Text */
+
+.devtools-tooltip-simple-text {
+  max-width: 400px;
+  margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */
+  padding: 8px 12px;
+  white-space: pre-wrap;
+}
+
+.devtools-tooltip-simple-text:first-child {
+  margin-top: -4px;
+}
+
+.devtools-tooltip-simple-text:last-child {
+  margin-bottom: -4px;
+}
+
+/* Tooltip: Alert Icon */
+
+.devtools-tooltip-alert-icon {
+  width: 32px;
+  height: 32px;
+  margin: 6px;
+  margin-inline-end: 20px;
+}
+
+.devtools-tooltip-alert-icon {
+  list-style-image: url("chrome://global/skin/icons/warning-32.png");
+}
+
+/* Tooltip: Variables View */
+
+.devtools-tooltip-variables-view-box {
+  margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
+}
+
+.devtools-tooltip-variables-view-box .variable-or-property > .title {
+  padding-inline-end: 6px;
+}
+
+/* Tooltip: Tiles */
+
+.devtools-tooltip-tiles {
+  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: 20px 20px;
+  background-position: 0 0, 10px 10px;
+}
+
+.devtools-tooltip-iframe {
+  border: none;
+  background: transparent;
+}
+
+.tooltip-container {
+  display: none;
+  position: fixed;
+  z-index: 9999;
+  display: none;
+  background: transparent;
+  pointer-events: none;
+  overflow: hidden;
+  filter: drop-shadow(0 3px 4px var(--theme-tooltip-shadow));
+}
+
+.tooltip-xul-wrapper {
+  -moz-appearance: none;
+  background: transparent;
+  overflow: visible;
+  border-style: none;
+}
+
+.tooltip-xul-wrapper .tooltip-container {
+  position: absolute;
+}
+
+.tooltip-top {
+  flex-direction: column;
+}
+
+.tooltip-bottom {
+  flex-direction: column-reverse;
+}
+
+.tooltip-panel{
+  background-color: var(--theme-tooltip-background);
+  pointer-events: all;
+  flex-grow: 1;
+}
+
+.tooltip-visible {
+  display: flex;
+}
+
+.tooltip-hidden {
+  display: flex;
+  visibility: hidden;
+}
+
+/* Tooltip : flexible height styles */
+
+.tooltip-flexible-height .tooltip-panel {
+  /* In flexible mode the tooltip panel should only grow according to its content. */
+  flex-grow: 0;
+}
+
+.tooltip-flexible-height .tooltip-filler {
+  /* In flexible mode the filler should grow as much as possible. */
+  flex-grow: 1;
+}
+
+/* type="arrow" overrides: remove arrow decorations for the xul <panel> wrapper */
+
+.tooltip-xul-wrapper[type="arrow"] {
+  margin: 0;
+}
+
+/* The arrow image is hidden because the panel is opened using openPopupAtScreen(). */
+
+/* Remove all decorations on .panel-arrowcontent is the tooltip content container. */
+.tooltip-xul-wrapper[type="arrow"] .panel-arrowcontent {
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+/* Tooltip : arrow style */
+
+.tooltip-xul-wrapper .tooltip-container {
+  /* When displayed in a XUL panel the drop shadow would be abruptly cut by the panel */
+  filter: none;
+}
+
+.tooltip-container[type="arrow"] > .tooltip-panel {
+  position: relative;
+  min-height: 10px;
+  box-sizing: border-box;
+  width: 100%;
+
+  border: 3px solid var(--theme-tooltip-border);
+  border-radius: 5px;
+}
+
+.tooltip-top[type="arrow"] .tooltip-panel {
+  top: 0;
+}
+
+.tooltip-bottom[type="arrow"] .tooltip-panel {
+  bottom: 0;
+}
+
+.tooltip-arrow {
+  position: relative;
+  height: 16px;
+  width: 32px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+/* In RTL locales, only use RTL on the tooltip content, keep LTR for positioning */
+.tooltip-container:-moz-locale-dir(rtl) {
+  direction: ltr;
+}
+
+.tooltip-panel:-moz-locale-dir(rtl) {
+  direction: rtl;
+}
+
+.tooltip-top .tooltip-arrow {
+  margin-top: -3px;
+}
+
+.tooltip-bottom .tooltip-arrow {
+  margin-bottom: -3px;
+}
+
+.tooltip-arrow:before {
+  content: "";
+  position: absolute;
+  width: 21px;
+  height: 21px;
+  margin-left: 4px;
+  background: linear-gradient(-45deg,
+    var(--theme-tooltip-background) 50%, transparent 50%);
+  border-color: var(--theme-tooltip-border);
+  border-style: solid;
+  border-width: 0px 3px 3px 0px;
+  border-radius: 3px;
+  pointer-events: all;
+}
+
+.tooltip-bottom .tooltip-arrow:before {
+  margin-top: 4px;
+  transform: rotate(225deg);
+}
+
+.tooltip-top .tooltip-arrow:before {
+  margin-top: -12px;
+  transform: rotate(45deg);
+}
+
+/* Tooltip: Events */
+
+.event-header {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.event-header:first-child {
+  border-width: 0;
+}
+
+.event-header:not(:first-child) {
+  border-width: 1px 0 0 0;
+}
+
+.devtools-tooltip-events-container {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.event-tooltip-event-type,
+.event-tooltip-filename,
+.event-tooltip-attributes {
+  margin-inline-start: 0;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.event-tooltip-event-type {
+  font-weight: bold;
+  font-size: 13px;
+}
+
+.event-tooltip-filename {
+  margin: 0 5px;
+  font-size: 100%;
+  flex-shrink: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* Force ellipsis to be displayed on the left */
+  direction: rtl;
+}
+
+.event-tooltip-debugger-icon {
+  width: 16px;
+  height: 16px;
+  margin-inline-end: 4px;
+  opacity: 0.6;
+  flex-shrink: 0;
+}
+
+.event-tooltip-debugger-icon:hover {
+  opacity: 1;
+}
+
+.event-tooltip-content-box {
+  display: none;
+  height: 100px;
+  overflow: hidden;
+  margin-inline-end: 0;
+  border: 1px solid var(--theme-splitter-color);
+  border-width: 1px 0 0 0;
+}
+
+.event-toolbox-content-box iframe {
+  height: 100%;
+  border-style: none;
+}
+
+.event-tooltip-content-box[open] {
+  display: block;
+}
+
+.event-tooltip-source-container {
+  margin-top: 5px;
+  margin-bottom: 10px;
+  margin-inline-start: 5px;
+  margin-inline-end: 0;
+}
+
+.event-tooltip-source {
+  margin-bottom: 0;
+}
+
+.event-tooltip-attributes-container {
+  display: flex;
+  flex-shrink: 0;
+  flex-grow: 1;
+  justify-content: flex-end;
+}
+
+.event-tooltip-attributes-box {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  height: 14px;
+  border-radius: 3px;
+  padding: 2px;
+  margin-inline-start: 5px;
+  background-color: var(--theme-body-color-alt);
+  color: var(--theme-toolbar-background);
+}
+
+.event-tooltip-attributes {
+  margin: 0;
+  font-size: 9px;
+  padding-top: 2px;
+}
+
+/*
+ * Tooltip: JS stack traces
+ */
+
+.stack-trace-tooltip {
+  direction: ltr;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.stack-trace-tooltip > .stack-frame {
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.stack-trace-tooltip > .stack-frame:first-child {
+  margin-top: 5px;
+}
+
+.stack-trace-tooltip > .stack-frame:last-child {
+  margin-bottom: 5px;
+}
+
+.stack-frame-call {
+  color: var(--theme-body-color-alt);
+  cursor: pointer;
+  display: flex;
+}
+
+.stack-frame-call:hover {
+  background-color: var(--theme-selection-background-semitransparent);
+}
+
+.stack-frame-async {
+  color: var(--theme-body-color-inactive);
+}
+
+.stack-frame-function-name {
+  color: var(--theme-highlight-blue);
+  max-width: 50%;
+  margin-inline-end: 1em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.stack-frame-source-name {
+  flex: 1 1;
+  /* Makes the file name truncated (and ellipsis shown) on the left side */
+  direction: rtl;
+  text-align: right;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Enforce LTR direction for the file name - fixes bug 1290056 */
+.stack-frame-source-name-inner {
+  direction: ltr;
+  unicode-bidi: embed;
+}
+
+.stack-frame-line {
+  color: var(--theme-highlight-orange);
+}
+
+/* Tooltip: HTML Search */
+
+#searchbox-panel-listbox {
+  width: 250px;
+  max-width: 250px;
+  overflow-x: hidden;
+}
+
+#searchbox-panel-listbox .autocomplete-item,
+#searchbox-panel-listbox .autocomplete-item[selected] {
+  overflow-x: hidden;
+}
+
+#searchbox-panel-listbox .autocomplete-item > .initial-value {
+  max-width: 130px;
+  margin-left: 15px;
+}
+
+#searchbox-panel-listbox .autocomplete-item > .autocomplete-value {
+  max-width: 150px;
+}
index 66e3a54cafa6974ca2e309d0e9110444417e7a91..c6f8fb0439bbb958913b5d286c47bd615be4717c 100644 (file)
@@ -24,6 +24,7 @@
   --theme-tab-toolbar-background: #402800;
   --theme-toolbar-background: #000000;
   --theme-button-background: #C09070;
+  --theme-button-color: #000000;
   --theme-hover-background: #FFCF00;
   --theme-hover-color: #000000;
   --theme-active-background: #FFCF00;
index b05b1d17384eb37634cc6c159c3d898dda148076..bbcaa5d2b458301544315b6aae52f5be48f083e4 100644 (file)
@@ -31,4 +31,6 @@
   <use id="check" xlink:href="#check-shape"/>
   <use id="check-inverted" xlink:href="#check-shape"/>
   <use id="check-native" xlink:href="#check-shape"/>
+  <use id="check-hover" xlink:href="#check-shape"/>
+  <use id="check-disabled" xlink:href="#check-shape"/>
 </svg>
index d5294d1c5e1c42e47c28bd8c27b97cd5f57ed419..d5d5821a4deab57342156c646ac31bd6180cfe63 100644 (file)
@@ -510,7 +510,7 @@ html|input[type="checkbox"] {
 }
 
 /* Create a box to style as the checkbox */
-html|input[type="checkbox"] + html|label:before {
+html|input[type="checkbox"] + html|label::before {
   display: inline-block;
   content: "";
   vertical-align: middle;
@@ -525,7 +525,7 @@ xul|checkbox {
 }
 */
 /* xul|*.checkbox-check, */
-html|input[type="checkbox"] + html|label:before {
+html|input[type="checkbox"] + html|label::before {
   -moz-appearance: none;
   width: 23px;
   height: 23px;
@@ -538,7 +538,7 @@ html|input[type="checkbox"] + html|label:before {
 }
 
 /* xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check, */
-html|input[type="checkbox"]:not(:disabled) + html|label:hover:before {
+html|input[type="checkbox"]:not(:disabled) + html|label:hover::before {
   border-color: var(--in-content-border-focus);
 }
 html|input[type="checkbox"]:not(:disabled) + html|label:hover {
@@ -551,18 +551,18 @@ xul|*.checkbox-check[checked] {
                     linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
 }
 */
-html|input[type="checkbox"]:checked + html|label:before {
+html|input[type="checkbox"]:checked + html|label::before {
   background-image: url("chrome://global/skin/in-content/check.svg#check");
 }
 
 /*xul|checkbox[checked][disabled="true"] > xul|*.checkbox-check,*/
-html|input[type="checkbox"]:checked:disabled + html|label:before {
+html|input[type="checkbox"]:checked:disabled + html|label::before {
   background-image: url("chrome://global/skin/in-content/check.svg#check-disabled");
 }
-html|input[type="checkbox"]:not(:disabled) + html|label:hover:before {
+html|input[type="checkbox"]:checked:not(:disabled) + html|label:hover::before {
   background-image: url("chrome://global/skin/in-content/check.svg#check-hover");
 }
-html|input[type="checkbox"]:disabled + html|label:before {
+html|input[type="checkbox"]:disabled + html|label::before {
   border-color: var(--in-content-border-disabled);
 }
 html|input[type="checkbox"]:disabled + html|label {
index 1e5968e7c5e41e41ccc3d2efd5d4a501992da6fc..1397ee16598287f3cbfbe6612cfc7a6dab98227d 100644 (file)
@@ -13,7 +13,7 @@
   --panel-arrowcontent-padding: 6px;
   --panel-arrowcontent-background: #000000;
   --panel-arrowcontent-color: #FF9F00;
-  --panel-arrowcontent-border: 1px solid #FF9F00;
+  --panel-arrowcontent-border-color: #FF9F00;
 }
 
 /* ::::: menupopup ::::: */
@@ -57,7 +57,7 @@ panel[type="arrow"][side="right"] {
   color: var(--panel-arrowcontent-color);
   background: var(--panel-arrowcontent-background);
   background-clip: padding-box;
-  border: var(--panel-arrowcontent-border);
+  border: 1px solid var(--panel-arrowcontent-border-color);
   margin: 0px;
 }