Start some work on player selector

src/common/components/QsElement.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="qsb flex flex-row flex-cross-center flex-center flex-nogrow"
+  :class="{
+    'id': selector.startsWith('#'),
+    'class': selector.startsWith('.'),
+  }">
+    <div class="flex mt2px">{{selector}}</div> <span class="flex closeButton" @click="remove">×</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    selector: String,
+  },
+  methods: {
+    remove() {
+      this.$emit('remove');
+    }
+  }
+}
+</script>
+
+<style>
+.mt2px {
+  margin-top: 7px;
+}
+.id {
+  border: 1px solid #d00;
+  background-color: rgba(216, 94, 24, 0.25)
+}
+.class {
+  border: 1px solid #33d;
+  background-color: rgba(69, 69, 255, 0.25)
+}
+.closeButton {
+  margin-top: 2px;
+  margin-left: 4px;
+  margin-right: 4px;
+  font-size: 1.5em;
+  color: #e00;
+}
+.closeButton:hover {
+  cursor: pointer;
+  color: #fa6;
+}
+.qsb {
+  cursor:default;
+  margin-left: 3px;
+  margin-right: 3px;
+  margin-bottom: 2px;
+}
+</style>

src/popup/panels/SiteDetailsPanel.vue

@@ -1,5 +1,36 @@
 <template>
   <div class="flex flex-column" style="padding-bottom: 20px">
+    <div class="">
+      <div class="label">Player picker</div>
+      <div class="desc">
+        If extension doesn't detect player correctly, you can override it.
+        <small>(NOTE: this currently doesn't work for embedded videos)</small>
+      </div>
+      
+      <div>Meaning of outlines:</div>
+
+      <div class="flex flex-row flex-wrap">
+        <div class="pp_video flex flex-nogrow"><code>&lt;video&gt;</code>&nbsp;element</div>
+        <div class="pp_current flex flex-nogrow">Selected element</div>
+        <div class="pp_matched flex flex-nogrow">Matched by query string</div>
+      </div>
+
+      <div class="flex flex-row">
+        <ShortcutButton label="Move up"
+        />
+        <ShortcutButton label="Move down"
+        />
+      </div>
+      <div class="flex flex-row flex-wrap">
+        <QsElement selector="#test_id" />
+        <QsElement selector=".test_class" />
+        <template v-for="qse of currentElementQs" >
+          <QsElement :selector="qse" :key="qse" />
+        </template>
+      </div>
+
+
+    </div>
     <div class="label">
       Video detection settings<br/><small>for {{site}}</small>
     </div>
@@ -93,6 +124,8 @@
 </template>
 
 <script>
+import ShortcutButton from '../../common/components/ShortcutButton.vue';
+import QsElement from '../../common/components/QsElement.vue';
 import QuerySelectorSetting from '../../common/components/QuerySelectorSetting.vue';
 import ExtensionMode from '../../common/enums/extension-mode.enum';
 import VideoAlignment from '../../common/enums/video-alignment.enum';
@@ -100,6 +133,8 @@ import Stretch from '../../common/enums/stretch.enum';
 export default {
   components: {
     QuerySelectorSetting,
+    ShortcutButton,
+    QsElement,
   },
   data() {
     return {
@@ -221,5 +256,19 @@ export default {
 </script>
 
 <style>
-
+.pp_video {
+  margin: 2px;
+  padding: 5px;
+  border: 1px solid red;
+}
+.pp_current {
+  margin: 2px;
+  padding: 5px;
+  border: 1px solid #88f;
+}
+.pp_matched {
+  margin: 2px;
+  padding: 5px;
+  border: 1px dashed #fd2;
+}
 </style>