add closed caption icon to PiP frame.

add styles for new (optional) urlbar action results. (see Bug 1699316)
aminomancer · Jul 22, 2022 · 2ff086e · 2ff086e
1 parent b0664f2
commit 2ff086e
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 3 deletions.
diff --git a/resources/material/closed-caption-settings.svg b/resources/material/closed-caption-settings.svg
diff --git a/uc-misc.css b/uc-misc.css
@@ -641,6 +641,10 @@ toolbar:not(#PersonalToolbar) .toolbarbutton-1:focus-visible > .toolbarbutton-ba
       font-weight: var(--uc-font-weight-thin, 400) !important;
     }
 
+    .urlbarView-row[dynamicType="quickactions"] .urlbarView-quickaction-row {
+      line-height: 14px !important;
+    }
+
     .urlbarView-row .urlbarView-tag strong {
       font-weight: inherit !important;
     }

diff --git a/uc-popups.css b/uc-popups.css
@@ -425,6 +425,18 @@ panel[type="autocomplete-richlistbox"]
 
 @-moz-document url("chrome://global/content/pictureinpicture/player.xhtml")
 {
+  :root {
+    --panel-bgcolor: var(--in-content-button-highlight-dark) !important;
+  }
+
+  .box {
+    background-color: var(--panel-bgcolor) !important;
+  }
+
+  .arrow {
+    border-top-color: var(--panel-bgcolor) !important;
+  }
+
   .control-item {
     /* backdrop-filter has been temporarily disabled by mozilla */
     /* backdrop-filter: blur(8px) !important;
@@ -439,7 +451,7 @@ panel[type="autocomplete-richlistbox"]
     border-radius: 3px !important;
   }
 
-  body:not(:fullscreen) #controls:hover .control-item {
+  body:not(:fullscreen) #controls:is(:hover, [donthide]) .control-item {
     opacity: 1 !important;
   }
 
@@ -474,6 +486,10 @@ panel[type="autocomplete-richlistbox"]
   #unpip {
     --pip-icon: url(chrome://userchrome/content/pictureinpicture-closed.svg);
   }
+
+  #closed-caption {
+    --pip-icon: url(chrome://userchrome/content/material/closed-caption-settings.svg);
+  }
 }
 
 #DateTimePickerPanel {

diff --git a/uc-urlbar-results.css b/uc-urlbar-results.css
@@ -38,14 +38,15 @@ by underlining them (requires urlbarMods.uc.js) */
   color: var(--panel-shortcut-focus);
 }
 
-.urlbarView-row[selected] > .urlbarView-row-inner,
+.urlbarView-row[selected]:not([dynamicType="quickactions"]) > .urlbarView-row-inner,
 .urlbarView-row:is([dynamicType="calculator"], [has-help="true"]) > .urlbarView-row-inner[selected],
 .urlbarView-help[selected] {
   background-color: var(--arrowpanel-dimmed-further) !important;
   fill-opacity: 1;
 }
 
-.urlbarView-row:not([selected]):hover > .urlbarView-row-inner:not([selected]),
+.urlbarView-row:not([selected], [dynamicType="quickactions"]):hover
+  > .urlbarView-row-inner:not([selected]),
 .urlbarView-help:not([selected]):hover {
   background-color: var(--arrowpanel-dimmed) !important;
 }
@@ -101,6 +102,64 @@ by underlining them (requires urlbarMods.uc.js) */
   background-color: var(--arrowpanel-faint) !important;
 }
 
+.urlbarView-row[dynamicType="quickactions"] > .urlbarView-row-inner {
+  gap: 4px calc(var(--urlbar-icon-padding) + 2px) !important;
+  padding-inline: 2px !important;
+}
+
+.urlbarView-row[dynamicType="quickactions"] .urlbarView-quickaction-row {
+  background: var(--arrowpanel-faint) !important;
+  border-radius: 20px !important;
+  padding: 4px 7px !important;
+  align-items: normal !important;
+  line-height: 13px !important;
+  height: 24px !important;
+  box-sizing: border-box !important;
+  border: 1px solid var(--panel-separator-color) !important;
+  outline: none !important;
+  margin: 0 !important;
+  gap: 4px !important;
+  font-size: 0.85em !important;
+  color: var(--panel-description-color) !important;
+}
+
+.urlbarView-row[dynamicType="quickactions"]
+  .urlbarView-quickaction-row:hover {
+  background: var(--uc-arrowpanel-dimmed) !important;
+  color: var(--panel-shortcut-focus) !important;
+  fill-opacity: 1 !important;
+}
+
+.urlbarView-row[dynamicType="quickactions"]
+  .urlbarView-quickaction-row:is(:focus-visible, [selected]) {
+  background: var(--uc-arrowpanel-dimmed-further) !important;
+  border-color: transparent !important;
+  color: var(--panel-shortcut-focus) !important;
+  fill-opacity: 1 !important;
+}
+
+.urlbarView-row[dynamicType="quickactions"] .urlbarView-label {
+  font-size: inherit !important;
+  font-weight: var(--urlbar-result-strong-font-weight, 500) !important;
+  color: inherit !important;
+}
+
+.urlbarView-row[dynamicType="quickactions"]
+  .urlbarView-quickaction-row:is(:hover, :focus-visible, [selected])
+  .urlbarView-label {
+  opacity: 1;
+}
+
+.urlbarView-row[dynamicType="quickactions"] .urlbarView-favicon {
+  -moz-context-properties: fill, fill-opacity !important;
+  fill: currentColor !important;
+}
+
+.urlbarView-row[dynamicType="quickactions"] :where(.urlbarView-favicon, .urlbarView-favicon-img) {
+  width: 14px !important;
+  height: 14px !important;
+}
+
 .urlbarView-favicon {
   background-position: center !important;
   margin-inline: 0 !important;

diff --git a/utils/chrome.manifest b/utils/chrome.manifest
@@ -117,6 +117,25 @@ override chrome://activity-stream/content/data/content/assets/glyph-highlights-1
 override chrome://activity-stream/content/data/content/assets/glyph-info-16.svg ../resources/glyph-info-16.svg
 override chrome://activity-stream/content/data/content/assets/glyph-webextension-16.svg ../resources/material/extension.svg
 override chrome://devtools/content/debugger/images/sources/extension.svg ../resources/material/extension.svg
+override chrome://devtools/skin/images/command-chevron.svg ../resources/devtools/command-chevron.svg
+override chrome://devtools/skin/images/command-console.svg ../resources/devtools/command-console.svg
+override chrome://devtools/skin/images/command-eyedropper.svg ../resources/devtools/command-eyedropper.svg
+override chrome://devtools/skin/images/command-measure.svg ../resources/devtools/command-measure.svg
+override chrome://devtools/skin/images/command-noautohide.svg ../resources/devtools/command-noautohide.svg
+override chrome://devtools/skin/images/command-paintflashing.svg ../resources/devtools/command-paintflashing.svg
+override chrome://devtools/skin/images/command-pick.svg ../resources/devtools/command-pick.svg
+override chrome://devtools/skin/images/command-pick-accessibility.svg ../resources/devtools/command-pick-accessibility.svg
+override chrome://devtools/skin/images/command-rulers.svg ../resources/devtools/command-rulers.svg
+override chrome://devtools/skin/images/command-screenshot.svg ../resources/devtools/command-screenshot.svg
+override chrome://devtools/skin/images/tool-webconsole.svg ../resources/devtools/tool-webconsole.svg
+override chrome://devtools/skin/images/tool-storage.svg ../resources/devtools/tool-storage.svg
+override chrome://devtools/skin/images/tool-memory.svg ../resources/devtools/tool-memory.svg
+override chrome://devtools/skin/images/tool-inspector.svg ../resources/devtools/tool-inspector.svg
+override chrome://devtools/skin/images/tool-debugger.svg ../resources/devtools/tool-debugger.svg
+override chrome://devtools/skin/images/tool-application.svg ../resources/devtools/tool-application.svg
+override chrome://devtools/skin/images/tool-accessibility.svg ../resources/devtools/tool-accessibility.svg
+override chrome://devtools/skin/images/tool-dom.svg ../resources/devtools/tool-dom.svg
+override chrome://devtools/skin/images/tool-styleeditor.svg ../resources/devtools/tool-styleeditor.svg
 
 # Basic content stylesheets, e.g., for plain text and "view source" documents.
 resource content-accessible chrome://userchrome/content/layout/contentaccessible/ contentaccessible=yes