URL-mode in manager's search and popup's manage button

* in manager use search query like url:https://github.com/openstyles/stylus
* in popup shift-click or right-click on manager button opens it and applies the filter

_locales/en/messages.json

@@ -425,6 +425,10 @@
     "message": "More Options",
     "description": "Subheading for options section on manage page."
   },
+  "popupManageTooltip": {
+    "message": "Shift-click or right-click opens manager with styles applicable for current site",
+    "description": "Tooltip for the 'Manage' button in the popup."
+  },
   "popupStylesFirst": {
     "message": "Styles before commands",
     "description": "Label for the checkbox controlling section order in the popup."
@@ -457,6 +461,10 @@
     "message": "Search contents",
     "description": "Label for the search filter textbox on the Manage styles page"
   },
+  "searchStylesTooltip": {
+    "message": "To show styles for a URL, prefix it with 'url:'\nFor example, url:https://github.com/openstyles/stylus",
+    "description": "Label for the search filter textbox on the Manage styles page"
+  },
   "sectionAdd": {
     "message": "Add another section",
     "description": "Label for the button to add a section"

manage.html

@@ -164,6 +164,7 @@
       <span i18n-text="manageOnlyUpdates"></span>
     </label>
     <input id="search" type="search" i18n-placeholder="searchStyles" spellcheck="false"
+           i18n-title="searchStylesTooltip"
            data-filter=":not(.not-matching)"
            data-filter-hide=".not-matching">
   </fieldset>

manage/filters.js

@@ -8,6 +8,11 @@ const filtersSelector = {
   numTotal: 0,
 };
 
+const urlFilterParam = new URLSearchParams(location.search).get('url');
+if (location.search) {
+  history.replaceState(0, document.title, location.origin + location.pathname);
+}
+
 HTMLSelectElement.prototype.adjustWidth = function () {
   const parent = this.parentNode;
   const singleSelect = this.cloneNode(false);
@@ -22,6 +27,9 @@ HTMLSelectElement.prototype.adjustWidth = function () {
 
 onDOMready().then(onBackgroundReady).then(() => {
   $('#search').oninput = searchStyles;
+  if (urlFilterParam) {
+    $('#search').value = 'url:' + urlFilterParam;
+  }
 
   $$('select[id$=".invert"]').forEach(el => {
     const slave = $('#' + el.id.replace('.invert', ''));
@@ -306,7 +314,10 @@ function showFiltersStats({immediately} = {}) {
 
 function searchStyles({immediately, container}) {
   const searchElement = $('#search');
-  const query = searchElement.value.toLocaleLowerCase();
+  const urlMode = /^\s*url:/i.test(searchElement.value);
+  const query = urlMode
+    ? searchElement.value.replace(/^\s*url:/i, '').trim()
+    : searchElement.value.toLocaleLowerCase();
   const queryPrev = searchElement.lastValue || '';
   if (query === queryPrev && !immediately && !container) {
     return;
@@ -317,15 +328,18 @@ function searchStyles({immediately, container}) {
   }
   searchElement.lastValue = query;
 
-  const searchInVisible = queryPrev && query.includes(queryPrev);
+  const searchInVisible = !urlMode && queryPrev && query.includes(queryPrev);
   const entries = container && container.children || container ||
     (searchInVisible ? $$('.entry:not(.hidden)') : installed.children);
+  const siteStyleIds = urlMode &&
+    new Set(BG.filterStyles({matchUrl: query}).map(style => style.id));
   let needsRefilter = false;
   for (const entry of entries) {
     let isMatching = !query;
     if (!isMatching) {
-      const style = BG.cachedStyles.byId.get(entry.styleId) || {};
-      isMatching = Boolean(style && (
+      const style = urlMode ? siteStyleIds.has(entry.styleId) :
+        BG.cachedStyles.byId.get(entry.styleId) || {};
+      isMatching = urlMode ? style : Boolean(style && (
         isMatchingText(style.name) ||
         style.url && isMatchingText(style.url) ||
         isMatchingStyle(style)));

popup.html

@@ -99,7 +99,7 @@
     <!-- Actions -->
     <div id="popup-options">
       <button id="popup-manage-button" i18n-text="openManage"
-              data-href="manage.html" i18n-title="optionsOpenManager"></button>
+              data-href="manage.html" i18n-title="popupManageTooltip"></button>
       <button id="popup-options-button" i18n-text="openOptionsPopup"></button>
       <button id="popup-shortcuts-button" class="chromium-only"
               i18n-text="shortcuts"

popup/popup.js

@@ -89,7 +89,11 @@ function initPopup(url) {
   setupLivePrefs();
 
   $('#find-styles-link').onclick = handleEvent.openURLandHide;
-  $('#popup-manage-button').onclick = handleEvent.openURLandHide;
+  Object.assign($('#popup-manage-button'), {
+    onclick: handleEvent.openManager,
+    onmouseup: handleEvent.openManager,
+    oncontextmenu: handleEvent.openManager,
+  });
 
   $('#popup-options-button').onclick = () => {
     chrome.runtime.openOptionsPage();
@@ -386,6 +390,16 @@ Object.assign(handleEvent, {
     openURL({url: this.href || this.dataset.href})
       .then(window.close);
   },
+
+  openManager(event) {
+    event.preventDefault();
+    if (!this.eventHandled) {
+      this.eventHandled = true;
+      this.dataset.href += event.shiftKey || event.button === 2 ?
+        '?url=' + encodeURIComponent(tabURL) : '';
+      handleEvent.openURLandHide.call(this, event);
+    }
+  },
 });