Add experimental option to reduce whitespace
This reduces the excessive whitespace in the RCE thread page, and fixes
space issues in the thread list on mobile.
Bug: twpowertools:130
Change-Id: Ibd0c666fa7f6a9c89814e529ef7b80541143ada2
diff --git a/src/common/optionsPrototype.json5 b/src/common/optionsPrototype.json5
index 6b6e01b..0854647 100644
--- a/src/common/optionsPrototype.json5
+++ b/src/common/optionsPrototype.json5
@@ -151,6 +151,11 @@
context: 'experiments',
killSwitchType: 'experiment',
},
+ 'uispacing': {
+ defaultValue: false,
+ context: 'experiments',
+ killSwitchType: 'experiment',
+ },
// Internal options:
'ccdarktheme_switch_enabled': {
diff --git a/src/contentScripts/communityConsole/start.js b/src/contentScripts/communityConsole/start.js
index 1bb6a3f..02995e7 100644
--- a/src/contentScripts/communityConsole/start.js
+++ b/src/contentScripts/communityConsole/start.js
@@ -63,4 +63,9 @@
break;
}
}
+
+ if (options.uispacing) {
+ injectStylesheet(chrome.runtime.getURL('css/ui_spacing/shared.css'));
+ injectStylesheet(chrome.runtime.getURL('css/ui_spacing/console.css'));
+ }
});
diff --git a/src/contentScripts/publicThreadStart.js b/src/contentScripts/publicThreadStart.js
new file mode 100644
index 0000000..d1c4e3c
--- /dev/null
+++ b/src/contentScripts/publicThreadStart.js
@@ -0,0 +1,9 @@
+import {injectStylesheet} from '../common/contentScriptsUtils.js';
+import {isOptionEnabled} from '../common/optionsUtils.js';
+
+isOptionEnabled('uispacing').then(isUiSpacingEnabled => {
+ if (!isUiSpacingEnabled) return;
+
+ injectStylesheet(chrome.runtime.getURL('css/ui_spacing/shared.css'));
+ injectStylesheet(chrome.runtime.getURL('css/ui_spacing/twbasic.css'));
+});
diff --git a/src/static/_locales/en/messages.json b/src/static/_locales/en/messages.json
index 23e03f6..678066f 100644
--- a/src/static/_locales/en/messages.json
+++ b/src/static/_locales/en/messages.json
@@ -175,6 +175,10 @@
"message": "Turn on the nested replies feature in the Community Console.",
"description": "Feature checkbox in the options page"
},
+ "options_uispacing": {
+ "message": "Reduce the whitespace in the Community Console and TW.",
+ "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/ui_spacing/console.css b/src/static/css/ui_spacing/console.css
new file mode 100644
index 0000000..daa400e
--- /dev/null
+++ b/src/static/css/ui_spacing/console.css
@@ -0,0 +1,116 @@
+@media (max-width: 700px) {
+ /*
+ * == THREAD LIST VIEW ==
+ **/
+
+ /* Hide work state label when thread row is collapsed */
+ ec-thread-summary .thread-summary:not(.expanded) .issue-tracking-work-state {
+ display: none!important;
+ }
+}
+
+@media (max-width: 599px) {
+ /*
+ * == THREAD LIST VIEW ==
+ **/
+
+ /* Squeeze all elements in each row */
+ ec-thread-summary .issue-tracking-work-state {
+ display: none!important;
+ }
+
+ ec-thread-summary .title,
+ ec-thread-summary ec-second-summary-line .properties,
+ ec-thread-summary ec-second-summary-line ec-relative-time {
+ margin-inline-start: 0!important;
+ margin-inline-end: 8px!important;
+ }
+
+ ec-thread-summary ec-thread-counts,
+ ec-thread-summary ec-second-summary-line .icons {
+ width: auto!important;
+ }
+
+ ec-thread-list ec-bulk-actions {
+ padding-inline-start: 4px!important;
+ padding-inline-end: 0!important;
+ }
+
+ ec-thread-summary .panel {
+ padding-inline: 4px!important;
+ }
+
+ ec-thread-summary .panel > .main-header > .header.header {
+ padding-inline: 0!important;
+ }
+
+ body:not(.TWPT-threadlistavatars-enabled) ec-thread-summary div.header div.header-content {
+ width: calc(100% - 68px)!important;
+ }
+
+ body.TWPT-threadlistavatars-enabled ec-thread-summary div.header div.header-content {
+ width: calc(100% - 134px)!important;
+ }
+
+ .TWPT-avatars {
+ min-width: 62px!important;
+ margin-inline-start: 4px!important;
+ }
+
+ .TWPT-avatars .TWPT-avatar:first-child {
+ margin-inline-start: 2px!important;
+ }
+
+ .TWPT-avatars .TWPT-avatar,
+ .TWPT-avatars .TWPT-avatar-private-placeholder {
+ height: 22px!important;
+ width: 22px!important;
+ }
+
+ ec-thread-summary .header.header .checkbox {
+ min-width: 32px!important;
+ }
+
+ ec-thread-summary .header.header .checkbox material-checkbox {
+ margin: 8px 4px!important;
+ }
+
+ ec-thread-summary .header.header .star-button {
+ margin-inline-start: 0!important;
+ margin-inline-end: 4px!important;
+ }
+
+ ec-thread-summary .header.header .star-button .content {
+ padding: 8px 4px!important;
+ }
+
+ ec-thread-summary .action .expand-container {
+ padding-inline: 0!important;
+ }
+
+ ec-thread-summary .action .expand-container .expand-button {
+ width: 32px;
+ }
+
+ ec-thread-summary .action .expand-container .expand-button > .content {
+ padding: 8px 4px!important;
+ }
+
+ ec-thread-summary .thread-summary.expanded .main.main .content-wrapper {
+ margin: 0 12px 16px!important;
+ }
+
+ ec-thread-summary .thread-summary.expanded .main.main .content-wrapper > .content > .content {
+ padding-inline: 56px 30px!important;
+ padding-block: 0!important;
+ }
+}
+
+@media (min-width: 37.5rem) {
+ /*
+ * == THREAD VIEW ==
+ **/
+ .scTailwindThreadQuestionQuestioncardcontent {
+ padding: 2rem 3rem 1.5rem 3rem!important;
+ }
+}
diff --git a/src/static/css/ui_spacing/shared.css b/src/static/css/ui_spacing/shared.css
new file mode 100644
index 0000000..19be735
--- /dev/null
+++ b/src/static/css/ui_spacing/shared.css
@@ -0,0 +1,52 @@
+.scTailwindThreadQuestionQuestioncardtitle-container {
+ gap: 0 1rem!important;
+ margin: 1rem 0!important;
+}
+
+.scTailwindThreadQuestionQuestioncardcontent {
+ padding: 1.5rem 1rem 1rem 1rem!important;
+}
+
+.scTailwindThreadQuestionQuestioncardsub-content {
+ padding: 0 1rem 1rem!important;
+}
+
+.scTailwindThreadMessageMessagecardcontent,
+ .scTailwindThreadMessageMessagecardnested-reply {
+ padding: 1rem!important;
+}
+
+.scTailwindThreadMessagegapmore-nested-replies {
+ padding: 0.25rem 1rem!important;
+}
+
+sc-tailwind-thread-post-header {
+ margin-bottom: 0!important;
+}
+
+.scTailwindThreadMessageMessagelistmessage-card {
+ padding-bottom: 0.75rem!important;
+}
+
+h3.scTailwindThreadMessageMessagelistheading {
+ margin: 1rem 0!important;
+}
+
+.scTailwindThreadMorebuttonroot {
+ margin: 0 0 0.75rem 0!important;
+}
+
+@media (min-width: 37.5rem) {
+ .scTailwindThreadMessageMessagecardcontent,
+ .scTailwindThreadMessageMessagecardnested-reply {
+ padding: 1rem 3rem!important;
+ }
+
+ .scTailwindThreadMessagegapmore-nested-replies {
+ padding: 0.25rem 3rem!important;
+ }
+
+ .scTailwindThreadQuestionQuestioncardsub-content {
+ padding: 0 3rem 1rem!important;
+ }
+}
diff --git a/src/static/css/ui_spacing/twbasic.css b/src/static/css/ui_spacing/twbasic.css
new file mode 100644
index 0000000..f0ddb75
--- /dev/null
+++ b/src/static/css/ui_spacing/twbasic.css
@@ -0,0 +1,9 @@
+.page {
+ margin: 0!important;
+}
+
+@media (min-width: 37.5rem) {
+ .scTailwindThreadQuestionQuestioncardcontent {
+ padding: 2rem 3rem!important;
+ }
+}
diff --git a/src/static/options/experiments.html b/src/static/options/experiments.html
index 615d5ec..5eddef5 100644
--- a/src/static/options/experiments.html
+++ b/src/static/options/experiments.html
@@ -16,6 +16,7 @@
<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="option"><input type="checkbox" id="nestedreplies"> <label for="nestedreplies" data-i18n="nestedreplies"></label></div>
+ <div class="option"><input type="checkbox" id="uispacing"> <label for="uispacing" data-i18n="uispacing"></label></div>
<div class="actions"><button id="save" data-i18n="save"></button></div>
</form>
<div id="save-indicator"></div>