some devtools improvements

diff --git a/LCARStrek/browser/devtools/dark-theme.css b/LCARStrek/browser/devtools/dark-theme.css
index c9ac0938a324aecd047bfe9c8bfd8e3ae269f2c8..dcd62750a2db03efc8c4365e2fefaf117dbe93e0 100644 (file)
--- a/LCARStrek/browser/devtools/dark-theme.css
+++ b/LCARStrek/browser/devtools/dark-theme.css
@@ -483,6 +483,7 @@ div.CodeMirror span.eval-text {
 }
 
 .devtools-toolbar .devtools-toolbarbutton {
 }
 
 .devtools-toolbar .devtools-toolbarbutton {

+  -moz-margin-start: 2px;

 }
 
 .devtools-toolbarbutton > .toolbarbutton-icon {
 }
 
 .devtools-toolbarbutton > .toolbarbutton-icon {

diff --git a/LCARStrek/browser/devtools/inspector.css b/LCARStrek/browser/devtools/inspector.css
index 4a6c379b86d07afac80943d347de19feb8187b07..2e3b08271e4031614b3c1fe2d07b07d49ce485df 100644 (file)
--- a/LCARStrek/browser/devtools/inspector.css
+++ b/LCARStrek/browser/devtools/inspector.css
@@ -288,6 +288,43 @@ window {
   max-width: 200px !important;
 }
 
   max-width: 200px !important;
 }
 

+/* Expand/collapse panel toolbar button */
+
+#inspector-pane-toggle {
+  list-style-image: url("debugger-collapse.png");
+  -moz-image-region: rect(0px,16px,16px,0px);
+}
+
+#inspector-pane-toggle > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+}
+
+#inspector-pane-toggle[pane-collapsed] {
+  list-style-image: url("debugger-expand.png");
+}
+
+#inspector-pane-toggle:hover,
+#inspector-pane-toggle:active {
+  -moz-image-region: rect(0px,32px,16px,16px);
+}
+
+@media (min-resolution: 2dppx) {
+  #inspector-pane-toggle {
+    list-style-image: url("debugger-collapse@2x.png");
+    -moz-image-region: rect(0px,32px,32px,0px);
+  }
+
+  #inspector-pane-toggle[pane-collapsed] {
+    list-style-image: url("debugger-expand@2x.png");
+  }
+
+  #inspector-pane-toggle:hover,
+  #inspector-pane-toggle:active {
+    -moz-image-region: rect(0px,64px,32px,32px);
+  }
+}
+

 /* Tooltip: Events */
 
 #devtools-tooltip-events-container {
 /* Tooltip: Events */
 
 #devtools-tooltip-events-container {

diff --git a/LCARStrek/browser/devtools/netmonitor.css b/LCARStrek/browser/devtools/netmonitor.css
index 985e5a900b9527d34fc84a64b1cc8aaa3267d6f7..f73ddf94d4c2a2c7cebbe66056d203c579c5d827 100644 (file)
--- a/LCARStrek/browser/devtools/netmonitor.css
+++ b/LCARStrek/browser/devtools/netmonitor.css
@@ -194,6 +194,11 @@ window {
   width: 8em;
 }
 
   width: 8em;
 }
 

+.requests-menu-transferred {
+  text-align: center;
+  width: 8em;
+}
+

 /* Network requests table: status codes */
 
 box.requests-menu-status {
 /* Network requests table: status codes */
 
 box.requests-menu-status {

diff --git a/LCARStrek/browser/devtools/performance-icons.svg b/LCARStrek/browser/devtools/performance-icons.svg
index 7c28d607e2f9bf66147fc7ecb60c463bb049a8eb..9e3adf379d68a5d20b8fdd6989f66a4214436a0c 100644 (file)
--- a/LCARStrek/browser/devtools/performance-icons.svg
+++ b/LCARStrek/browser/devtools/performance-icons.svg
@@ -1,42 +1,66 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px">\r
-<style>\r
-  g {\r
-    fill: #FFCF00;\r
-  }\r
-  g:not(:target) {\r
-    display: none;\r
-  }\r
-</style>\r
-<g id="overview-markers">\r
-  <rect x="0px" y="3px" width="5px" height="2.5px" rx="1" ry="1"/>\r
-  <rect x="7px" y="3px" width="9px" height="2.5px" rx="1" ry="1"/>\r
-  <rect x="0px" y="7px" width="9px" height="2.5px" rx="1" ry="1"/>\r
-  <rect x="10px" y="7px" width="6px" height="2.5px" rx="1" ry="1"/>\r
-  <rect x="4px" y="11px" width="5px" height="2.5px" rx="1" ry="1"/>\r
-  <rect x="12px" y="11px" width="4px" height="2.5px" rx="1" ry="1"/>\r
-</g>\r
-<g id="overview-frames">\r
-  <rect x="1px" y="4px" width="2px" height="12px" rx="1" ry="1"/>\r
-  <rect x="5px" y="12px" width="2px" height="4px" rx="1" ry="1"/>\r
-  <rect x="9px" y="9px" width="2px" height="7px" rx="1" ry="1"/>\r
-  <rect x="13px" y="7px" width="2px" height="9px" rx="1" ry="1"/>\r
-</g>\r
-<g id="details-waterfall">\r
-  <rect x="0px" y="3px" width="9px" height="2.5px" rx="1" ry="1"/>\r
-  <rect x="5px" y="7px" width="8px" height="2.5px" rx="1" ry="1"/>\r
-  <rect x="7px" y="11px" width="9px" height="2.5px" rx="1" ry="1"/>\r
-</g>\r
-<g id="details-call-tree">\r
-  <rect x="0px" y="3px" width="16px" height="2px" rx="1" ry="1"/>\r
-  <rect x="0px" y="6px" width="8px" height="2px" rx="1" ry="1"/>\r
-  <rect x="0px" y="9px" width="11px" height="2px" rx="1" ry="1"/>\r
-  <rect x="0px" y="12px" width="6px" height="2px" rx="1" ry="1"/>\r
-</g>\r
-<g id="details-flamegraph">\r
-  <rect x="0px" y="3px" width="16px" height="2px" rx="1" ry="1"/>\r
-  <rect x="0px" y="6px" width="8px" height="2px" rx="1" ry="1"/>\r
-  <rect x="10px" y="6px" width="6px" height="2px" rx="1" ry="1"/>\r
-  <rect x="2px" y="9px" width="6px" height="2px" rx="1" ry="1"/>\r
-  <rect x="5px" y="12px" width="3px" height="2px" rx="1" ry="1"/>\r
-</g>\r
-</svg>\r
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="16px" height="16px">
+<style>
+use:not(:target) {
+  display: none;
+}
+
+use {
+  fill: #FFCF00;
+}
+
+use[id$="-active"] {
+  fill: #000000;
+}
+</style>
+<defs>
+  <g id="overview-markers-shape">
+    <rect x="0px" y="3px" width="5px" height="2.5px" rx="1" ry="1"/>
+    <rect x="7px" y="3px" width="9px" height="2.5px" rx="1" ry="1"/>
+    <rect x="0px" y="7px" width="9px" height="2.5px" rx="1" ry="1"/>
+    <rect x="10px" y="7px" width="6px" height="2.5px" rx="1" ry="1"/>
+    <rect x="4px" y="11px" width="5px" height="2.5px" rx="1" ry="1"/>
+    <rect x="12px" y="11px" width="4px" height="2.5px" rx="1" ry="1"/>
+  </g>
+  <g id="overview-frames-shape">
+    <rect x="1px" y="4px" width="2px" height="12px" rx="1" ry="1"/>
+    <rect x="5px" y="12px" width="2px" height="4px" rx="1" ry="1"/>
+    <rect x="9px" y="9px" width="2px" height="7px" rx="1" ry="1"/>
+    <rect x="13px" y="7px" width="2px" height="9px" rx="1" ry="1"/>
+  </g>
+  <g id="details-waterfall-shape">
+    <rect x="0px" y="3px" width="9px" height="2.5px" rx="1" ry="1"/>
+    <rect x="5px" y="7px" width="8px" height="2.5px" rx="1" ry="1"/>
+    <rect x="7px" y="11px" width="9px" height="2.5px" rx="1" ry="1"/>
+  </g>
+  <g id="details-call-tree-shape">
+    <rect x="0px" y="3px" width="16px" height="2px" rx="1" ry="1"/>
+    <rect x="0px" y="6px" width="8px" height="2px" rx="1" ry="1"/>
+    <rect x="0px" y="9px" width="11px" height="2px" rx="1" ry="1"/>
+    <rect x="0px" y="12px" width="6px" height="2px" rx="1" ry="1"/>
+  </g>
+  <g id="details-flamegraph-shape">
+    <rect x="0px" y="3px" width="16px" height="2px" rx="1" ry="1"/>
+    <rect x="0px" y="6px" width="8px" height="2px" rx="1" ry="1"/>
+    <rect x="10px" y="6px" width="6px" height="2px" rx="1" ry="1"/>
+    <rect x="2px" y="9px" width="6px" height="2px" rx="1" ry="1"/>
+    <rect x="5px" y="12px" width="3px" height="2px" rx="1" ry="1"/>
+  </g>
+</defs>
+
+<use id="overview-markers"          xlink:href="#overview-markers-shape"/>
+<use id="overview-markers-active"   xlink:href="#overview-markers-shape"/>
+
+<use id="overview-frames"           xlink:href="#overview-frames-shape"/>
+<use id="overview-frames-active"    xlink:href="#overview-frames-shape"/>
+
+<use id="details-waterfall"         xlink:href="#details-waterfall-shape"/>
+<use id="details-waterfall-active"  xlink:href="#details-waterfall-shape"/>
+
+<use id="details-call-tree"         xlink:href="#details-call-tree-shape"/>
+<use id="details-call-tree-active"  xlink:href="#details-call-tree-shape"/>
+
+<use id="details-flamegraph"        xlink:href="#details-flamegraph-shape"/>
+<use id="details-flamegraph-active" xlink:href="#details-flamegraph-shape"/>
+</svg>

diff --git a/LCARStrek/browser/devtools/performance.css b/LCARStrek/browser/devtools/performance.css
index f0b94b54d3eb19334df0e6876f30bd1904e9030c..413d89430273a7a425aa3d5cc49ebe618b5b4115 100644 (file)
--- a/LCARStrek/browser/devtools/performance.css
+++ b/LCARStrek/browser/devtools/performance.css
@@ -28,6 +28,30 @@
   -moz-padding-end: 8px;
 }
 
   -moz-padding-end: 8px;
 }
 

+#filter-button {
+  list-style-image: url(timeline-filter.svg#filter);
+  min-width: 24px;
+}
+
+#filter-button[disabled] {
+  list-style-image: url(timeline-filter.svg#filter-disabled);
+}
+
+#filter-button:not([disabled]):hover,
+#filter-button:not([disabled]):hover:active,
+#filter-button[open] {
+  list-style-image: url(timeline-filter.svg#filter-open);
+}
+
+#performance-filter-menupopup > menuitem:before {
+  content: "";
+  display: block;
+  width: 8px;
+  height: 8px;
+  margin: 0 8px;
+  border-radius: 1px;
+}
+

 /* Recording Notice */
 
 #performance-view .notice-container {
 /* Recording Notice */
 
 #performance-view .notice-container {


@@ -46,6 +70,12 @@
 /* Overview Panel */
 
 .record-button {
 /* Overview Panel */
 
 .record-button {

+  list-style-image: url(profiler-stopwatch-tbutton.svg);
+}
+
+#empty-notice > .record-button,
+.record-button:hover,
+.record-button:hover:active {

   list-style-image: url(profiler-stopwatch.svg);
 }
 
   list-style-image: url(profiler-stopwatch.svg);
 }
 


@@ -71,18 +101,48 @@
   list-style-image: url(performance-icons.svg#details-waterfall);
 }
 
   list-style-image: url(performance-icons.svg#details-waterfall);
 }
 

+#select-waterfall-view:hover,
+#select-waterfall-view:hover:active,
+#select-waterfall-view[checked] {
+  list-style-image: url(performance-icons.svg#details-waterfall-active);
+}
+

 #select-calltree-view,
 #select-js-calltree-view,
 #select-memory-calltree-view {
   list-style-image: url(performance-icons.svg#details-call-tree);
 }
 
 #select-calltree-view,
 #select-js-calltree-view,
 #select-memory-calltree-view {
   list-style-image: url(performance-icons.svg#details-call-tree);
 }
 

+#select-calltree-view:hover,
+#select-calltree-view:hover:active,
+#select-calltree-view[checked],
+#select-js-calltree-view:hover,
+#select-js-calltree-view:hover:active,
+#select-js-calltree-view[checked],
+#select-memory-calltree-view:hover,
+#select-memory-calltree-view:hover:active,
+#select-memory-calltree-view[checked] {
+  list-style-image: url(performance-icons.svg#details-call-tree-active);
+}
+

 #select-flamegraph-view,
 #select-js-flamegraph-view,
 #select-memory-flamegraph-view {
   list-style-image: url(performance-icons.svg#details-flamegraph);
 }
 
 #select-flamegraph-view,
 #select-js-flamegraph-view,
 #select-memory-flamegraph-view {
   list-style-image: url(performance-icons.svg#details-flamegraph);
 }
 

+#select-flamegraph-view:hover,
+#select-flamegraph-view:hover:active,
+#select-flamegraph-view[checked],
+#select-js-flamegraph-view:hover,
+#select-js-flamegraph-view:hover:active,
+#select-js-flamegraph-view[checked],
+#select-memory-flamegraph-view:hover,
+#select-memory-flamegraph-view:hover:active,
+#select-memory-flamegraph-view[checked] {
+  list-style-image: url(performance-icons.svg#details-flamegraph-active);
+}
+

 /* Profile call tree */
 
 .call-tree-cells-container {
 /* Profile call tree */
 
 .call-tree-cells-container {

diff --git a/LCARStrek/browser/devtools/webconsole.css b/LCARStrek/browser/devtools/webconsole.css
index 26827648129be5403d7da9771f1f26c867491403..0de177484dd17abfa3df8b78d54c3ffc896a9a16 100644 (file)
--- a/LCARStrek/browser/devtools/webconsole.css
+++ b/LCARStrek/browser/devtools/webconsole.css
@@ -199,6 +199,10 @@ a {
 
 /* WebConsole colored drops */
 
 
 /* WebConsole colored drops */
 

+.hud-console-filter-toolbar toolbarbutton > .toolbarbutton-text {
+  padding: 2px 2px 3px;
+}
+

 .webconsole-filter-button {
   -moz-user-focus: normal;
 }
 .webconsole-filter-button {
   -moz-user-focus: normal;
 }


@@ -209,11 +213,16 @@ a {
   height: 8px;
   width: 8px;
   border-radius: 50%;
   height: 8px;
   width: 8px;
   border-radius: 50%;

-  margin-left: 5px;
+  -moz-margin-start: 2px;
+  -moz-margin-end: 2px;

   border-width: 1px;
   border-style: solid;
 }
 
   border-width: 1px;
   border-style: solid;
 }
 

+.webconsole-filter-button > .toolbarbutton-menubutton-button {
+  -moz-box-orient: horizontal;
+}
+

 .webconsole-filter-button menuitem {
   -moz-image-region: auto;
 }
 .webconsole-filter-button menuitem {
   -moz-image-region: auto;
 }


@@ -569,6 +578,7 @@ a {
   .toolbarbutton-text {
     display: -moz-box;
   }
   .toolbarbutton-text {
     display: -moz-box;
   }

+  /*

   .devtools-toolbarbutton {
     margin-top: 3px;
   }
   .devtools-toolbarbutton {
     margin-top: 3px;
   }


@@ -576,6 +586,7 @@ a {
   .hud-console-filter-toolbar .devtools-toolbarbutton {
     margin-top: 5px;
   }
   .hud-console-filter-toolbar .devtools-toolbarbutton {
     margin-top: 5px;
   }

+  */

 }
 
 /* === END webconsole.inc.css === */
 }
 
 /* === END webconsole.inc.css === */