From 453ba03962ececcdff9264bea606b7bc488c1803 Mon Sep 17 00:00:00 2001
From: Wojtek Kosior <koszko@koszko.org>
Date: Wed, 1 Sep 2021 11:45:06 +0200
Subject: add styling for popup page\n\nThis does not include styling for
 contents of the import dialog

---
 html/display-panel.html | 365 ++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 292 insertions(+), 73 deletions(-)

(limited to 'html/display-panel.html')

diff --git a/html/display-panel.html b/html/display-panel.html
index cbd7dc8..4121c30 100644
--- a/html/display-panel.html
+++ b/html/display-panel.html
@@ -9,117 +9,336 @@
     <title>Hachette - page settings</title>
     <link type="text/css" rel="stylesheet" href="reset.css" />
     <link type="text/css" rel="stylesheet" href="base.css" />
+    <link type="text/css" rel="stylesheet" href="back_button.css" />
+    <link type="text/css" rel="stylesheet" href="table.css" />
     <style>
       body {
-	  width: 300px;
-	  height: 300px;
+	  width: max-content;
+	  width: -moz-max-content;
       }
 
-      ul {
-	  padding-inline-start: 15px;
+      .bold, h2 {
+	  font-weight: bold;
       }
 
-      .bold {
-	  font-weight: bold;
+      h2 {
+	  margin: 8px;
+	  font-size: 120%;
+      }
+
+      .top>h2 {
+	  padding-left: calc(0.8*3.2em - 8px);
+      }
+
+      .top {
+	  line-height: calc(0.8*3.6em - 16px);
       }
 
-      .unroll_chbx:not(:checked)+*+label span.triangle:first-child+span.triangle,
-      .unroll_chbx:checked+*+label span.triangle:first-child,
-      .unroll_chbx:not(:checked)+*,
-      .unroll_chbx:not(:checked)+*+label+* {
+      #main_view>.top>h2 {
+	  padding-left: 0;
+      }
+
+      h3 {
+	  padding: 5px;
+	  font-size: 108%;
+	  text-shadow: 0 0 0 #454;
+      }
+
+      .unroll_chbx:not(:checked)+div>:not(:first-child) {
 	  display: none;
       }
 
+      .unroll_triangle {
+	  height: 1em;
+	  width: 1em;
+	  display: inline-block;
+      }
+
+      .unroll_triangle::after {
+	  content: "";
+	  width: 0.6em;
+	  height: 0.6em;
+	  background: linear-gradient(-45deg, currentColor 50%, transparent 50%);
+	  display: block;
+	  position: relative;
+	  transform: rotate(-45deg);
+	  top: 0.3em;
+      }
+
+      .unroll_chbx:checked+div>:first-child .unroll_triangle::after {
+	  transform: rotate(45deg);
+	  left: 0.2em;
+	  top: 0.2em;
+      }
+
+      .unroll_chbx:checked+div>:first-child .unroll_block {
+	  display: block;
+      }
+
+      .unroll_chbx:checked+div>:first-child {
+	  line-height: 1.4em;
+      }
+
+      .l2_ul {
+	  border-left: solid #454 5px;
+      }
+
+      .l1_li {
+	  margin-top: 0.3em;
+	  margin-bottom: 0.3em;
+      }
+
+      .l1_li>div {
+	  padding: 0.3em 0.3em 0.3em 0;
+      }
+
+      .l2_li {
+	  padding: 0.3em;
+      }
+
+      #container_for_injected>*:nth-child(odd),
+      .l2_li:nth-child(odd) {
+	  background-color: #e5e5e5;
+      }
+
       #container_for_injected>#none_injected:not(:last-child) {
 	  display: none;
       }
+
+      #page_url_heading>span {
+	  display: inline-block;
+      }
+
+      .back_button {
+	  position: fixed;
+	  z-index: 1;
+	  top: 0;
+	  left: 0;
+	  /* The following scales the entire button. */
+	  font-size: 80%;
+      }
+
+      #show_main_view_radio:checked~.back_button {
+	  margin-left: -3.2em;
+      }
+
+      #show_main_view_radio:not(:checked)~.back_button {
+	  transition: all 0.2s ease-out;
+      }
+
+      pre {
+	  font-family: monospace;
+	  background-color: white;
+	  border-top: dashed #4CAF50 1px;
+	  border-bottom: dashed #4CAF50 1px;
+	  padding: 1px 5px;
+      }
+
+      .matched_pattern {
+	  font-weight: bold;
+      }
+
+      tr.matched_pattern~tr {
+	  color: #777;
+	  font-size: 90%;
+      }
+
+      .padding_inline {
+	  padding-left: 5px;
+	  padding-right: 5px;
+      }
+
+      .header {
+	  border-bottom: dashed #4CAF50 1px;
+	  padding-bottom: 0.3em;
+	  margin-bottom: 0.5em;
+	  text-align: center;
+      }
+
+      .middle {
+	  margin-top: 0.5em;
+	  margin-bottom: 0.5em;
+      }
+
+      .footer {
+	  border-top: dashed #4CAF50 1px;
+	  padding-top: 0.3em;
+	  margin-top: 0.5em;
+	  text-align: center;
+      }
+
+      .active_setting_table {
+	  margin-bottom: 0.5em;
+      }
+
+      .active_setting_table td {
+	  padding: 5px;
+	  vertical-align: middle;
+      }
     </style>
   </head>
   <body>
     <template>
-      <li id="pattern_li">
-	<span></span>
-	<button>View in settings</button>
-      </li>
-      <li id="query_match_li" class="queried_pattern_match" data-template="li">
+      <tr id="pattern_entry" data-template="entry">
+	<td data-template="name"></td>
+	<td>
+	  <div class="button" data-template="button">Add setting</div>
+	</td>
+      </tr>
+
+      <li id="query_match_li" class="l2_li" data-template="li">
 	<div>
 	  <span>pattern:</span>
 	  <span class="bold" data-template="pattern"></span>
-	  <button data-template="btn">Install</button>
+	  <label class="button slimbutton" for="show_install_view_radio" data-template="btn">
+	    Install
+	  </label>
 	</div>
 	<div id="unrollable_component" data-template="unroll_container">
-	  <span data-template="component_label">payload:</span>
 	  <input type="checkbox" class="unroll_chbx" data-template="chbx"></input>
-	  <br data-template="br"/>
-	  <label class="bold" data-template="lbl">
-	    <span data-template="triangle">
-	      <span class="triangle">&#x23F5;</span>
-	      <span class="triangle">&#x23F7;</span>
+	  <div>
+	    <span>payload:
+	      <label class="bold unroll_block" data-template="lbl">
+		<div data-template="triangle" class="unroll_triangle"></div>
+		<span data-template="payload"></span>
+	      </label>
 	    </span>
-	    <span data-template="component"></span>
+	    <div data-template="unroll"></div>
+	  </div>
+	</div>
+      </li>
+
+      <div id="injected_script" data-template="div">
+	<input type="checkbox" class="unroll_chbx" data-template="chbx"></input>
+	<div>
+	  <label data-template="lbl">
+	    <h3><div class="unroll_triangle"></div> script</h3>
 	  </label>
-	  <div data-template="unroll"></div>
+	  <pre data-template="script_contents"></pre>
+	</div>
+      </div>
+
+      <div id="multi_repos_query_result" data-template="div">
+	Results for <span class="bold" data-template="url_span"></span>
+	<ul class="l1_ul" data-template="ul"></ul>
+      </div>
+
+      <li id="single_repo_query_result" class="l1_li" data-template="li">
+	<div>
+	  From <span class="bold" data-template="repo_url"></span>
 	</div>
       </li>
+
+      <ul id="result_patterns_list" class="l2_ul" data-template="ul">
+      </ul>
     </template>
 
-    <input id="show_install_view_chbx" type="checkbox" class="show_hide_next2"></input>
+    <input id="show_install_view_radio" type="radio" class="show_next" name="current_view"></input>
     <div id="install_view">
+      <div class="top has_bottom_line"><h2> Site modifiers install </h2></div>
       <IMPORT html/import_frame.html />
-      <!--
-	  <div id="install_status"></div>
-	  <label for="show_install_chbx" class="bold">Cancel install</label>
-	  <button id="commit_install_but">Commit install</button>
-      -->
     </div>
-    <div id="main_view">
-      <h2 id="page_url_heading"></h2>
-
-      <input id="show_privileged_notice_chbx" type="checkbox" class="show_next"></input>
-      <h3>Privileged page</h3>
-
-      <input id="show_page_state_chbx" type="checkbox" class="show_next"></input>
-      <div>
-	<input id="possible_patterns_chbx" type="checkbox" class="unroll_chbx"></input>
-	<span></span>
-	<label for="possible_patterns_chbx">
-	  <h3>
-	    <span class="triangle">&#x23F5;</span>
-	    <span class="triangle">&#x23F7;</span>
-	    Possible patterns
-	  </h3>
-	</label>
-	<ul id="possible_patterns"></ul>
-
-	<input id="connected_chbx" type="checkbox" class="show_hide_next2"></input>
+
+    <input id="show_injected_view_radio" type="radio" class="show_next" name="current_view"></input>
+    <div id="injected_view">
+      <div class="top has_bottom_line"><h2>Injected scripts</h2></div>
+      <div id="container_for_injected">
+	<span id="none_injected">None</span>
+      </div>
+    </div>
+
+    <input id="show_patterns_view_radio" type="radio" class="show_next" name="current_view"></input>
+    <div>
+      <div class="top has_bottom_line"><h2>Possible patterns for this page</h2></div>
+      <div class="padding_inline">
+	<aside>
+	  Patterns higher are more specific and override the ones below.
+	</aside>
+      </div>
+      <div class="table_wrapper">
 	<div>
-	  Matched pattern: <span id="pattern" class="bold">...</span>
-	  <button id="view_pattern" class="hide">
-	    View in settings
-	  </button>
-	  <br/>
-	  Blocked: <span id="blocked" class="bold">...</span>
-	  <br/>
-	  Payload: <span id="payload" class="bold">...</span>
-	  <button id="view_payload" class="hide">
-	    View in settings
-	  </button>
-	  <h3>Injected</h3>
-	  <div id="container_for_injected">
-	    <span id="none_injected">None</span>
+	  <table>
+	    <tbody id="possible_patterns">
+	    </tbody>
+	  </table>
+	</div>
+      </div>
+    </div>
+
+    <input id="show_queried_view_radio" type="radio" class="show_next" name="current_view"></input>
+    <div>
+      <div class="top has_bottom_line"><h2>Queried from repositories</h2></div>
+      <div id="container_for_repo_responses" class="padding_inline">
+      </div>
+    </div>
+
+    <input id="show_main_view_radio" type="radio" class="show_next" name="current_view" checked></input>
+    <div id="main_view">
+      <div class="top has_bottom_line"><h2 id="page_url_heading"></h2></div>
+      <h3 id="privileged_notice" class="middle hide">Privileged page</h3>
+
+      <div id="page_state" class="hide">
+	<div class="header padding_inline">
+	  <label for="show_patterns_view_radio" class="button">
+	    Edit settings for this page
+	  </label>
+	</div>
+	<div class="middle padding_inline">
+	  <input id="connected_chbx" type="checkbox" class="show_hide_next2"></input>
+	  <div>
+	    <table class="active_setting_table">
+	      <tbody>
+		<tr>
+		  <td>Matched pattern:</td>
+		  <td id="pattern" class="bold">...</td>
+		  <td>
+		    <button id="view_pattern" class="hide">
+		      View in settings
+		    </button>
+		  </td>
+		</tr>
+		<tr>
+		  <td>Scripts blocked:</td>
+		  <td id="blocked" class="bold">...</td>
+		  <td></td>
+		</tr>
+		<tr>
+		  <td>Injected payload:</td>
+		  <td id="payload" class="bold">...</td>
+		  <td id="payload_buttons" class="hide">
+		    <button id="view_payload"> View in settings </button>
+		    <br/>
+		    <label id="view_injected" class="button" for="show_injected_view_radio">
+		      View injected scripts
+		    </label>
+		  </td>
+		</tr>
+	      </tbody>
+	    </table>
+	    <label id="query_pattern" for="show_queried_view_radio" class="button">
+	      Install scripts for this page
+	    </label>
 	  </div>
-	  <input id="query_started_chbx" type="checkbox" class="show_hide_next2"></input>
-	  <div id="container_for_repo_responses">
-	    <h3>Queried from repositories</h3>
+	  <div>
+	    <h3>
+	      Connecting to content script..<span id="loading_point">.</span>
+	    </h3>
+	    <aside id="reload_notice">
+	      Try reloading the page.
+	    </aside>
 	  </div>
-	  <button id="query_pattern">
-	    Search for matching patterns
-	  </button>
 	</div>
-	<h3>Trying to connect..<input id="loading_chbx" type="checkbox" class="show_next"></input><span>.</span></h3>
       </div>
 
-      <button id="settings_but" type="button" style="margin-top: 20px;">Settings</button>
-    </div>_POPUPSCRIPTS_
+      <div class="footer padding_inline">
+	<button id="settings_but" type="button">
+	  Open Hachette settings
+	</button>
+      </div>
+    </div>
+
+    <div class="has_upper_line"></div>
+
+    <label for="show_main_view_radio" class="back_button"><div></div></label>_POPUPSCRIPTS_
   </body>
 </html>
-- 
cgit v1.2.3