bring back popup panel access from logger

Popup panel is now tab selector-bound, rather than logger
entry-bound.

Additonally, start migrating toward svg-based icons rather than
font-based icons.

src/css/common.css

@@ -30,6 +30,24 @@
     vertical-align: baseline;
     display: inline-block;
     }
+.fa-icon {
+    align-self: center;
+    background-color: transparent;
+    border: border: 1px solid transparent;
+    display: inline-block;
+    height: 1.2em;
+    vertical-align: middle;
+    width: 1.2em;
+    }
+.fa-icon:hover {
+    background-color: #eee;
+    }
+.fa-icon.disabled {
+    fill: #888;
+    opacity: 0.4;
+    stroke: #fff;
+    pointer-events: none;
+    }
 
 body {
     font-size: 14px;

src/css/logger-ui.css

@@ -9,6 +9,12 @@ body {
     padding: 0;
     width: 100%;
     }
+.fa-icon {
+    cursor: pointer;
+    height: 1.5em;
+    padding: 0.5em 1em;
+    width: 1.5em;
+    }
 #toolbar {
     background-color: white;
     border: 0;
@@ -23,42 +29,73 @@ body {
     width: 100%;
     z-index: 10;
     }
-#toolbar .button {
-    background-color: white;
-    border: none;
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    cursor: pointer;
-    display: inline-block;
-    font-size: 150%;
-    margin: 0;
-    padding: 8px;
-    }
-#toolbar .button.disabled {
-    opacity: 0.2;
-    pointer-events: none;
-    }
-#toolbar .button:hover {
-    background-color: #eee;
-    }
 #toolbar > div {
+    display: flex;
+    padding: 0.5em;
     white-space: nowrap;
     }
-#toolbar > div:first-of-type {
-    font-size: 120%;
-    }
-#toolbar > div > * {
-    vertical-align: middle;
-    }
 #pageSelector {
     width: 28em;
+    margin-right: 0.5em;
     padding: 0.2em 0;
     }
-body #compactViewToggler.button:before {
-    content: '\f102';
+
+@keyframes popupPanelShow {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+#popupPanelContainer {
+    background: white;
+    border: 1px solid gray;
+    display: none;
+    overflow: hidden;
+    position: fixed;
+    right: 0;
+    /*top: 0;*/
+    z-index: 2000;
+    }
+body.popupPanelOn #popupPanelContainer {
+    animation-duration: 0.25s;
+    animation-name: popupPanelShow;
+    display: block;
+    }
+#popupPanelContainer.hide {
+    width: 6em !important;
+}
+#popupPanelContainer > div {
+    background: #888;
+    border: 0;
+    display: none;
+    text-align: right;
+    }
+#popupPanelContainer > div > span {
+    color: #ccc;
+    cursor: pointer;
+    display: inline-block;
+    font: 14px FontAwesome;
+    padding: 3px;
+    }
+#popupPanelContainer > div > span:hover {
+    color: white;
+    }
+#popupPanelContainer > iframe {
+    border: 0;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    }
+#popupPanelContainer.hide > iframe {
+    display: none;
+    }
+
+#popupPanelButton > use {
+    transform: scaleY(0.4);
+    }
+body.popupPanelOn #popupPanelButton > use {
+    transform: scaleY(1);
     }
-body.compactView #compactViewToggler.button:before {
-    content: '\f103';
+body.compactView #compactViewToggler {
+    transform: rotateZ(180deg);
     }
 #filterButton {
     opacity: 0.25;
@@ -189,7 +226,7 @@ body.compactView #content tr:not(.vExpanded) td {
     position: fixed;
     top: 0;
     width: 100vw;
-    z-index: 1000;
+    z-index: 5000;
     }
 .modalDialog > .dialog {
     background-color: white;
@@ -218,46 +255,20 @@ body.compactView #content tr:not(.vExpanded) td {
     justify-content: space-around;
     margin-left: 0.5em;
     }
-.ruleEditorToolbar button {
-    background-color: white;
-    border: 0;
-    color: black;
-    cursor: pointer;
-    margin: 0;
-    padding: 0.2em;
-    position: relative;
-    }
-.ruleEditorToolbar button:hover {
-    background-color: #eee;
-    }
-.ruleEditorToolbar button.disabled {
-    color: #ccc;
-    }
-.ruleEditorToolbar button.fa {
-    font: 1.7em FontAwesome;
-    min-width: 1.5em;
-    }
-.ruleEditorToolbar button > span.badge {
-    background-color: rgba(240,240,240,0.75);
-    bottom: 1px;
-    color: #000;
-    display: inline-block;
+.ruleEditorToolbar .fa-icon > .badge {
     font-family: sans-serif;
-    font-size: 40%;
-    padding: 1px 1px;
+    font-size: 80%;
     pointer-events: none;
-    position: absolute;
-    right: 1px;
     }
-.ruleEditorToolbar button.disabled > span.badge {
+.ruleEditorToolbar .fa-icon.disabled > .badge {
     display: none;
     }
 
-button.scopeRel {
-    color: #24c;
+.fa-icon.scopeRel {
+    fill: #24c;
     }
-body[data-scope="*"] button.scopeRel {
-    color: #000;
+body[data-scope="*"] .fa-icon.scopeRel {
+    fill: #000;
     }
 
 .ruleWidgets {

src/img/fontawesome/LICENSE.txt

@@ -0,0 +1,34 @@
+Font Awesome Free License
+-------------------------
+
+Font Awesome Free is free, open source, and GPL friendly. You can use it for
+commercial projects, open source projects, or really almost whatever you want.
+Full Font Awesome Free license: https://fontawesome.com/license/free.
+
+# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
+In the Font Awesome Free download, the CC BY 4.0 license applies to all icons
+packaged as SVG and JS file types.
+
+# Fonts: SIL OFL 1.1 License (https://scripts.sil.org/OFL)
+In the Font Awesome Free download, the SIL OLF license applies to all icons
+packaged as web and desktop font files.
+
+# Code: MIT License (https://opensource.org/licenses/MIT)
+In the Font Awesome Free download, the MIT license applies to all non-font and
+non-icon files.
+
+# Attribution
+Attribution is required by MIT, SIL OLF, and CC BY licenses. Downloaded Font
+Awesome Free files already contain embedded comments with sufficient
+attribution, so you shouldn't need to do anything additional when using these
+files normally.
+
+We've kept attribution comments terse, so we ask that you do not actively work
+to remove them from files, especially code. They're a great way for folks to
+learn about Font Awesome.
+
+# Brand Icons
+All brand icons are trademarks of their respective owners. The use of these
+trademarks does not indicate endorsement of the trademark holder by Font
+Awesome, nor vice versa. **Please do not use brand logos for any purpose except
+to represent the company, product, or service to which they refer.**