v0.0.3 -- Implement Find command

belltown · Mar 5, 2017 · 6eb7705 · 6eb7705
1 parent d58c810
commit 6eb7705
Show file tree

Hide file tree

Showing 17 changed files with 655 additions and 198 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
+node_modules/
 builds/
 dist/
diff --git a/README.md b/README.md
@@ -1,8 +1,12 @@
  <h1 style="color: white; background-color: #af9cd9; padding: 2em 0; text-align: center">![](https://raw.githubusercontent.com/belltown/violetbug/master/doc/icon.png) VioletBug — Roku Debugger Graphical Interface</h1>
 
+---
+
+## Windows — macOS — linux
+
 VioletBug is a cross-platform desktop application providing a graphical interface to the Roku Debugger as an alternative to Telnet. It is similar to PurpleBug, https://belltown-roku.tk/PurpleBug, which is still supported; however, PurpleBug only runs on Windows PCs, and is closed-source. VioletBug, in contrast, is open-source running under [Electron](http://electron.atom.io/) and [Node.js](https://nodejs.org), written entirely in HTML, CSS and JavaScript. The source code can be found on [GitHub](https://github.com/belltown/violetbug).
 
-Note that VioletBug is not intended as a general-purpose Telnet client, and as such only offers features deemed to be relevant to debugging a Roku device, e.g. Rokus can only be addressed by IP address, not by host name; and only well-known ports used by the Roku are supported.
+Note that VioletBug is not intended as a general-purpose Telnet client. Its features are geared towards debugging on a Roku. Currently, Rokus can only be addressed by IP address, not by host name; and only well-known ports used by the Roku are supported.
 
 ## Features
 
@@ -12,7 +16,7 @@ Note that VioletBug is not intended as a general-purpose Telnet client, and as s
 * Separate tabs for each Roku/port connection
 * Floating tabs (right-click the tab header)
 * Session logging for each tab
-* Clear screen/clear line
+* Clear screen/clear line/cut/copy/paste/find
 * Configurable foreground/background colors
 * Configurable font settings (9 monospace fonts included)
 * Auto scroll, auto wrap
@@ -63,7 +67,7 @@ cd ~/Downloads
 wget https://github.com/belltown/violetbug/releases/download/vx.y.z/violetbug-linux.zip
 ```
 
-Unzip to the appropriate folder, e.g. `/opt`
+Unzip to the appropriate directory, e.g. `/opt`
 ```
 sudo unzip -o -q violetbug-linux.zip -d /opt
 ```

diff --git a/doc/README.md.html b/doc/README.md.html
@@ -486,8 +486,10 @@
   </head>
   <body class='markdown-preview' data-use-github-style><h1 style="color: white; background-color: #af9cd9; padding: 2em 0; text-align: center"><img src="https://raw.githubusercontent.com/belltown/violetbug/master/doc/icon.png" alt=""> VioletBug — Roku Debugger Graphical Interface</h1>
 
+<hr>
+<h2 id="windows-macos-linux">Windows — macOS — linux</h2>
 <p>VioletBug is a cross-platform desktop application providing a graphical interface to the Roku Debugger as an alternative to Telnet. It is similar to PurpleBug, <a href="https://belltown-roku.tk/PurpleBug">https://belltown-roku.tk/PurpleBug</a>, which is still supported; however, PurpleBug only runs on Windows PCs, and is closed-source. VioletBug, in contrast, is open-source running under <a href="http://electron.atom.io/">Electron</a> and <a href="https://nodejs.org">Node.js</a>, written entirely in HTML, CSS and JavaScript. The source code can be found on <a href="https://github.com/belltown/violetbug">GitHub</a>.</p>
-<p>Note that VioletBug is not intended as a general-purpose Telnet client, and as such only offers features deemed to be relevant to debugging a Roku device, e.g. Rokus can only be addressed by IP address, not by host name; and only well-known ports used by the Roku are supported.</p>
+<p>Note that VioletBug is not intended as a general-purpose Telnet client. Its features are geared towards debugging on a Roku. Currently, Rokus can only be addressed by IP address, not by host name; and only well-known ports used by the Roku are supported.</p>
 <h2 id="features">Features</h2>
 <ul>
 <li>Runs under Windows (7+), macOS (10.9+), and linux</li>
@@ -496,7 +498,7 @@ <h2 id="features">Features</h2>
 <li>Separate tabs for each Roku/port connection</li>
 <li>Floating tabs (right-click the tab header)</li>
 <li>Session logging for each tab</li>
-<li>Clear screen/clear line</li>
+<li>Clear screen/clear line/cut/copy/paste/find</li>
 <li>Configurable foreground/background colors</li>
 <li>Configurable font settings (9 monospace fonts included)</li>
 <li>Auto scroll, auto wrap</li>
@@ -536,7 +538,7 @@ <h3 id="linux-installation">Linux Installation</h3>
 <p>Compiled binaries and installers for various linux distributions are provided at <a href="https://github.com/belltown/violetbug/releases/latest">https://github.com/belltown/violetbug/releases/latest</a></p>
 <h6 id="to-download-compiled-binaries-for-most-linux-distributions">To download compiled binaries for most linux distributions</h6>
 <p>Download <code>violetbug-linux.zip</code> from <a href="https://github.com/belltown/violetbug/releases/latest">https://github.com/belltown/violetbug/releases/latest</a>, e.g:</p>
-<pre class="editor-colors lang-text"><div class="line"><span class="syntax--text syntax--plain"><span class="syntax--meta syntax--paragraph syntax--text"><span>cd&nbsp;~/Downloads</span></span></span></div><div class="line"><span class="syntax--text syntax--plain"><span class="syntax--meta syntax--paragraph syntax--text"><span>wget&nbsp;</span><span class="syntax--markup syntax--underline syntax--link syntax--https syntax--hyperlink"><span>https://github.com/belltown/violetbug/releases/download/vx.y.z/violetbug-linux.zip</span></span></span></span></div></pre><p>Unzip to the appropriate folder, e.g. <code>/opt</code></p>
+<pre class="editor-colors lang-text"><div class="line"><span class="syntax--text syntax--plain"><span class="syntax--meta syntax--paragraph syntax--text"><span>cd&nbsp;~/Downloads</span></span></span></div><div class="line"><span class="syntax--text syntax--plain"><span class="syntax--meta syntax--paragraph syntax--text"><span>wget&nbsp;</span><span class="syntax--markup syntax--underline syntax--link syntax--https syntax--hyperlink"><span>https://github.com/belltown/violetbug/releases/download/vx.y.z/violetbug-linux.zip</span></span></span></span></div></pre><p>Unzip to the appropriate directory, e.g. <code>/opt</code></p>
 <pre class="editor-colors lang-text"><div class="line"><span class="syntax--text syntax--plain"><span class="syntax--meta syntax--paragraph syntax--text"><span>sudo&nbsp;unzip&nbsp;-o&nbsp;-q&nbsp;violetbug-linux.zip&nbsp;-d&nbsp;/opt</span></span></span></div></pre><p>Run the application:</p>
 <pre class="editor-colors lang-text"><div class="line"><span class="syntax--text syntax--plain"><span>&nbsp;</span><span class="syntax--meta syntax--paragraph syntax--text"><span>/opt/violetbug-linux-x64/violetbug</span></span></span></div></pre><p>Attach to the Launcher for convenience. If you don&#39;t see the application icon, try copying the file <code>/opt/violetbug-linux-x64/resources/app/violetbug.desktop</code> to <code>~/.local/share/applications/violetbug.desktop</code>, editing it if necessary for the correct path name/icon file, etc.</p>
 <h6 id="to-download-installers-for-specific-linux-distributions">To download installers for specific linux distributions</h6>

diff --git a/doc/ScreenShotConn.png b/doc/ScreenShotConn.png
diff --git a/doc/ScreenShotRokus.png b/doc/ScreenShotRokus.png
diff --git a/source/.gitignore b/source/.gitignore
diff --git a/source/float.css b/source/float.css
@@ -183,3 +183,79 @@ pre {
   cursor: text;
   padding: 3px 0;
 }
+
+/*******************************************************************/
+/* Find panel                                                      */
+/*******************************************************************/
+
+.findContainer {
+  display: none;   /* table-row or none */
+  -webkit-user-select: none;
+}
+
+.findPanel {
+  display: grid;
+  grid-template-columns: 1fr repeat(4,auto);
+  align-items: center;
+  background-color: #303030;
+  border: 0.15em solid #d69c19;
+  border-radius: 0.4em;
+  margin: 0 0.1em 0.25em 0.1em;
+  font-size: 1em;
+}
+
+.findTextInput {
+  color: #DDD;
+  margin-left: 0.25em;
+}
+
+.findMatchResult {
+  color: #888;
+  margin: 0 0.5em;
+}
+
+.findButton {
+  background-color: #151515;
+  color: #efd29b;
+  margin: 0.1em 0 0.1em 0.5em;
+  border: 0.1em solid #d69c19;
+  border-radius: 0.4em;
+  text-decoration: none;
+  padding: 0.15em 0;
+  width: 4em;
+  outline: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.findActive, .findButton:focus {
+  border: 0.15em solid #158615;
+}
+
+.findIcon {
+  font-size: 1.0em;
+  box-sizing: border-box;
+}
+
+.findCloseButton {
+  background-color: #303030;
+  color: #303030;
+  margin-left: 1em;
+  margin-right: 1em;
+  border: none;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.findCloseIcon {
+  color: #d69c19;
+  font-size: 1.3em;
+}
+
+.findCloseIcon:focus {
+  color: red;
+  outline: none;
+}
diff --git a/source/float.html b/source/float.html
@@ -23,6 +23,32 @@
         <div id="connContainer">
           <!-- Make a copy of conn-stub for each connection tab -->
           <table id="conn-stub" class="page connPage">
+
+            <!-- Find panel -->
+            <tr class="findContainer">
+              <td>
+                <div class="findPanel">
+                  <input class="findTextInput" type="text" tabindex="0">
+                  <span class="findMatchResult" tabindex="-1"></span>
+                  <button class="findDownButton findButton findActive"
+                          tabindex="0" title="Search down">
+                    <!-- U+1F847 -->
+                    <div class=findIcon>🡇</div>
+                  </button>
+                  <button class="findUpButton findButton" tabindex="0"
+                          title="Search up">
+                    <!-- U+1F845 -->
+                    <div class="findIcon">🡅</div>
+                  </button>
+                  <button class="findCloseButton" tabindex="-1"
+                          title="Close the Find box">
+                    <!-- U+24CD -->
+                    <div class="findCloseIcon" tabindex="0">Ⓧ</div>
+                  </button>
+                </div>
+              </td>
+            </tr>
+
             <tr class="fullHeight">
               <td>
                 <!-- Device output area at the top of the viewport -->

diff --git a/source/index.css b/source/index.css
@@ -1,5 +1,6 @@
 /* NOTE: WHEN CHANGING THIS FILE, CHANGE float.css TOO!!! */
 
+
 @import './fontList.css';
 
 html {
@@ -215,7 +216,6 @@ input {
 }
 
 #deviceListPage *:focus {
-  /*outline: -webkit-focus-ring-color auto;*/
   outline: #009900 auto;
   outline-width: thin;
 }
@@ -293,7 +293,6 @@ input {
 fieldset {
   margin: 5px 5px 5px 5px;
   color: #6798a2;
-  /*border: 1px solid #6798a266;*/
   border: 1px solid #98a20066;
   border-radius: 3px;
 }
@@ -501,3 +500,79 @@ pre {
   cursor: text;
   padding: 3px 0;
 }
+
+/*******************************************************************/
+/* Find panel                                                      */
+/*******************************************************************/
+
+.findContainer {
+  display: none;   /* table-row or none */
+  -webkit-user-select: none;
+}
+
+.findPanel {
+  display: grid;
+  grid-template-columns: 1fr repeat(4,auto);
+  align-items: center;
+  background-color: #303030;
+  border: 0.15em solid #d69c19;
+  border-radius: 0.4em;
+  margin: 0 0.1em 0.25em 0.1em;
+  font-size: 1em;
+}
+
+.findTextInput {
+  color: #DDD;
+  margin-left: 0.25em;
+}
+
+.findMatchResult {
+  color: #888;
+  margin: 0 0.5em;
+}
+
+.findButton {
+  background-color: #151515;
+  color: #efd29b;
+  margin: 0.1em 0 0.1em 0.5em;
+  border: 0.1em solid #d69c19;
+  border-radius: 0.4em;
+  text-decoration: none;
+  padding: 0.15em 0;
+  width: 4em;
+  outline: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.findActive, .findButton:focus {
+  border: 0.15em solid #158615;
+}
+
+.findIcon {
+  font-size: 1.0em;
+  box-sizing: border-box;
+}
+
+.findCloseButton {
+  background-color: #303030;
+  color: #303030;
+  margin-left: 1em;
+  margin-right: 1em;
+  border: none;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.findCloseIcon {
+  color: #d69c19;
+  font-size: 1.3em;
+}
+
+.findCloseIcon:focus {
+  color: red;
+  outline: none;
+}
diff --git a/source/index.html b/source/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <link rel="stylesheet" href="index.css">
     <script src="index.js"></script>
-    <title></title>
+    <title></title><!-- ip:port for a floating tab -->
   </head>
   <body>
 
@@ -102,6 +102,32 @@
         <div id="connContainer">
           <!-- Make a copy of conn-stub for each connection tab -->
           <table id="conn-stub" class="page connPage">
+
+            <!-- Find panel -->
+            <tr class="findContainer">
+              <td>
+                <div class="findPanel">
+                  <input class="findTextInput" type="text" tabindex="0">
+                  <span class="findMatchResult" tabindex="-1"></span>
+                  <button class="findDownButton findButton findActive"
+                          tabindex="0" title="Search down">
+                    <!-- U+1F847 -->
+                    <div class=findIcon>🡇</div>
+                  </button>
+                  <button class="findUpButton findButton" tabindex="0"
+                          title="Search up">
+                    <!-- U+1F845 -->
+                    <div class="findIcon">🡅</div>
+                  </button>
+                  <button class="findCloseButton" tabindex="-1"
+                          title="Close the Find box">
+                    <!-- U+24CD -->
+                    <div class="findCloseIcon" tabindex="0">Ⓧ</div>
+                  </button>
+                </div>
+              </td>
+            </tr>
+
             <tr class="fullHeight">
               <td>
                 <!-- Device output area at the top of the viewport -->