Add initial extra info feature
Only the extra profile in profiles is shown, since it is the easiest to
implement.
Bug: twpowertools:93
Change-Id: Ife4f31ee056f74bd478702347d75044b024abf1e
diff --git a/src/static/_locales/en/messages.json b/src/static/_locales/en/messages.json
index 1c3e75b..2637808 100644
--- a/src/static/_locales/en/messages.json
+++ b/src/static/_locales/en/messages.json
@@ -151,6 +151,10 @@
"message": "Manage workflows",
"description": "Button in the options page which opens the workflow management page."
},
+ "options_extrainfo": {
+ "message": "Show extra information in threads and profiles.",
+ "description": "Feature checkbox in the options page"
+ },
"options_save": {
"message": "Save",
"description": "Button in the options page to save the settings"
diff --git a/src/static/css/extrainfo.css b/src/static/css/extrainfo.css
new file mode 100644
index 0000000..86eed01
--- /dev/null
+++ b/src/static/css/extrainfo.css
@@ -0,0 +1,34 @@
+.TWPT-extrainfo-container {
+ display: inline-flex;
+ color: var(--TWPT-interop-secondary-text, #444746)!important;
+ align-items: center;
+}
+
+.TWPT-extrainfo-badge-cell {
+ margin: 0 8px;
+ --icon-size: 14px;
+ opacity: 0.6;
+}
+
+.TWPT-extrainfo-info-cell {
+ border-left: solid 1px var(--TWPT-interop-subtle-border, #ababab);
+ padding-left: 8px;
+ display: flex;
+ flex-direction: column;
+}
+
+.TWPT-extrainfo-info-cell > div:not(:last-child) {
+ margin-bottom: 2px;
+}
+
+/* Specific styles inside context */
+
+ec-unified-user .scTailwindUser_profileUsercardmain {
+ display: flex;
+ flex-direction: column;
+}
+
+ec-unified-user .TWPT-extrainfo-container {
+ margin-top: 16px;
+ align-self: end;
+}
diff --git a/src/static/options/experiments.html b/src/static/options/experiments.html
index 83a58cb..9a21fdf 100644
--- a/src/static/options/experiments.html
+++ b/src/static/options/experiments.html
@@ -14,6 +14,7 @@
<form>
<div id="optional-permissions-warning" hidden data-i18n="optionalpermissionswarning_header"></div>
<div class="option"><input type="checkbox" id="workflows"> <label for="workflows" data-i18n="workflows"></label> <button id="manage-workflows" data-i18n="workflows_manage"></button></div>
+ <div class="option"><input type="checkbox" id="extrainfo"> <label for="extrainfo" data-i18n="extrainfo"></label></div>
<div class="actions"><button id="save" data-i18n="save"></button></div>
</form>
<div id="save-indicator"></div>