Merge pull request #97 from menhera-org/feature-ua-overrides

Feature ua overrides

.gitignore

@@ -95,6 +95,7 @@ ts-dist
 
 # Webpack output
 dist/**/*.js
+dist/**/*.js.map
 
 # web-ext output
 *.xpi
@@ -179,4 +180,4 @@ $RECYCLE.BIN/
 *.msi
 *.msm
 *.msp
-*.lnk
+*.lnk

Makefile

@@ -9,3 +9,6 @@ clean:
 
 typedoc:
  npm run typedoc
+
+icons:
+ cd script && ./update-contextual-identities-icons.sh

dist/_locales/en/messages.json

@@ -506,5 +506,25 @@
  "optionsHeadingContainerOverrides": {
  "message": "Per-container Overrides",
  "description": "Heading text of options page for container overrides."
+ },
+ "optionsLabelUserAgent": {
+ "message": "User Agent",
+ "description": "Label text for user agent of a container."
+ },
+ "userAgentDefault": {
+ "message": "Default",
+ "description": "Default user agent"
+ },
+ "userAgentChrome": {
+ "message": "Chrome",
+ "description": "Chrome user agent"
+ },
+ "userAgentGooglebot": {
+ "message": "Googlebot",
+ "description": "Googlebot user agent"
+ },
+ "userAgentCustom": {
+ "message": "Custom",
+ "description": "Custom user agent"
  }
 }

dist/components/container-overrides.css

@@ -0,0 +1,112 @@
+/* -*- indent-tabs-mode: nil; tab-width: 2; -*- */
+/* vim: set ts=2 sw=2 et ai : */
+
+/*
+ Container Tab Groups
+ Copyright (C) 2022 Menhera.org
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program. If not, see <https://www.gnu.org/licenses/>.
+*/
+
+@import '/theme.css';
+
+@namespace url(http://www.w3.org/1999/xhtml);
+
+#containers-wrapper {
+ inline-size: max-content;
+ max-inline-size: 100%;
+ display: block grid;
+ grid-template-columns: .5em 2em 1fr 8em auto auto .5em;
+ border-radius: .5em;
+ border: 1px solid var(--border-color);
+ margin-block: .5em;
+ box-sizing: border-box;
+}
+
+#containers {
+ display: grid;
+ grid-column: 1 / -1;
+ grid-template-columns: subgrid;
+}
+
+#containers-wrapper > .header {
+ display: block grid;
+ grid-column: 1 / -1;
+ grid-template-columns: subgrid;
+ align-items: end;
+ background-color: var(--hover-color);
+}
+
+#containers-wrapper > .header > * {
+ text-align: center;
+ padding: .5em;
+}
+
+#containers-wrapper > .header > :not(:first-child) {
+ border-inline-start: 1px solid var(--border-color);
+}
+
+#containers-wrapper > .header > .header-container {
+ grid-column: 2 / 4;
+}
+
+#containers-wrapper > .header > .header-user-agent {
+ grid-column: 5 / 7;
+}
+
+.container {
+ display: block grid;
+ grid-column: 1 / -1;
+ grid-template-columns: subgrid;
+ border-block-start: 1px solid var(--border-color);
+}
+
+.container::before, .container::after {
+ content: '';
+ display: block;
+}
+
+.container > .name {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ padding: .5em;
+}
+
+.container :is(.languages, .user-agent-custom) {
+ inline-size: 100%;
+ min-inline-size: 0;
+ box-sizing: border-box;
+ margin: 0;
+ font: inherit;
+ border: none;
+ border-radius: 0;
+ padding: .5em;
+ color: inherit;
+ background-color: transparent;
+ align-self: stretch;
+}
+
+.container > .user-agent {
+ display: block grid;
+ grid-template-columns: subgrid;
+ grid-column: 5 / 7;
+}
+
+.container > .user-agent > .user-agent-select {
+ margin-inline: .5rem;
+ align-self: center;
+ margin-block: 0 !important;
+}

dist/components/container-sorter.css

@@ -27,7 +27,7 @@
  inline-size: max-content;
  max-inline-size: 100%;
  display: block grid;
- grid-template-columns: .5em 2em 1fr 2em 2em min-content auto .5em;
+ grid-template-columns: .5em 2em 1fr 2em 2em min-content .5em;
  border-radius: .5em;
  border: 1px solid var(--border-color);
  margin-block: .5em;