added search bar for containers

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;

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.
 // ----------------------------------------------------------------------------
 

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">