From 372bb8a191cbc41e8735ac03248ac674bb4de0a0 Mon Sep 17 00:00:00 2001
From: triptishukla <tripti12shukla1280@gmail.com>
Date: Fri, 11 Oct 2019 12:38:27 +0530
Subject: [PATCH] added search bar for containers

---
 src/css/popup.css | 44 +++++++++++++++++++++++++++++++++++++++++++-
 src/js/popup.js   |  5 +++++
 src/popup.html    |  5 +++++
 3 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/src/css/popup.css b/src/css/popup.css
index 5f45f10..6225006 100644
--- a/src/css/popup.css
+++ b/src/css/popup.css
@@ -470,13 +470,37 @@ manage things like container crud */
   inline-size: var(--inline-button-size);
   justify-content: center;
   text-decoration: none;
+  width: 200px;
+  
 }
-
 #container-panel #sort-containers-link:hover,
 #container-panel #sort-containers-link:focus {
   background: #f2f2f2;
 }
 
+#container-panel #search-containers-link:hover,
+#container-panel #search-containers-link:focus {
+  background: #f2f2f2;
+}
+
+#container-panel #search-containers-link {
+  align-items: center;
+  block-size: var(--block-url-label-size);
+  border: 1px solid #d8d8d8;
+  border-radius: var(--small-radius);
+  color: var(--title-text-color);
+  display: flex;
+  font-size: var(--small-text-size);
+  inline-size: var(--inline-button-size);
+  justify-content: center;
+  text-decoration: none;
+  width: 100px;
+  margin-right: 2px;
+
+  
+}
+
+
 span ~ .panel-header-text {
   padding-block-end: 0;
   padding-block-start: 0;
@@ -794,6 +818,10 @@ span ~ .panel-header-text {
   overflow: hidden; /* Bugfix: issue 948 */
 }
 
+.radio-search > .radio-container > [type="radio"]{
+width: 40px;
+
+}
 #edit-sites-assigned {
   flex: 1000; /* Bugfix: issue 948 */
 }
@@ -872,6 +900,7 @@ span ~ .panel-header-text {
   -moz-appearance: none;
   display: inline;
   opacity: 0;
+  
 }
 
 .radio-choice > .radio-container > [type="radio"]:checked + label {
@@ -916,6 +945,19 @@ span ~ .panel-header-text {
   padding-inline-start: 5px;
 }
 
+.container-panel-controls  input[type="text"] {
+  block-size: 28px;
+  border-radius: 3px;
+  font-size: 14px;
+  inline-size: 100%;
+  padding-block-end: 5px;
+  padding-block-start: 5px;
+  padding-inline-end: 5px;
+  padding-inline-start: 5px;
+  width: 200px;
+  margin-right: 2px;
+}
+
 .edit-container-panel legend {
   flex: 1 0;
   font-size: 14px !important;
diff --git a/src/js/popup.js b/src/js/popup.js
index 80986a2..6844123 100644
--- a/src/js/popup.js
+++ b/src/js/popup.js
@@ -505,6 +505,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
   panelSelector: "#container-panel",
 
   // This method is called when the object is registered.
+
   async initialize() {
     Logic.addEnterHandler(document.querySelector("#container-add-link"), () => {
       Logic.showPanel(P_CONTAINER_EDIT, { name: Logic.generateIdentityName() });
@@ -1043,6 +1044,8 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     });
   },
 
+  
+
   // This method is called when the panel is shown.
   async prepare() {
     const identity = Logic.currentIdentity();
@@ -1071,6 +1074,8 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
 
 });
 
+//For displaying search icon for search bar
+
 // P_CONTAINER_DELETE: Delete a container.
 // ----------------------------------------------------------------------------
 
diff --git a/src/popup.html b/src/popup.html
index 4cd8219..a078904 100644
--- a/src/popup.html
+++ b/src/popup.html
@@ -108,6 +108,11 @@
       </label>
     </div>
     <div class="container-panel-controls">
+      <input type="text" name="container-search" id="search-container-panel" maxlength="20"/>
+      <a href="#"  class="action-link" id="search-containers-link" title="Sort tabs into container order">
+          <img class="pop-button-image-small icon" alt="Create new container icon" src="/img/check.svg" />
+        </a>
+       
       <a href="#" class="action-link" id="sort-containers-link" title="Sort tabs into container order">Sort Tabs</a>
     </div>
     <div class="scrollable panel-content" tabindex="-1">