[FB] SplitView | Add split method changer

Floorp-Projects · Aug 3, 2024 · 95ce9eb · 95ce9eb
1 parent 12a17cf
commit 95ce9eb
Show file tree

Hide file tree

Showing 4 changed files with 154 additions and 10 deletions.
diff --git a/browser/base/content/browser-floorp.css b/browser/base/content/browser-floorp.css
@@ -626,3 +626,90 @@ toolbarpaletteitem #workspaces-toolbar-button > label {
 #workspacesPopupSeparator {
   margin: 10px 0px !important;
 }
+
+/**
+ * SplitView Styles
+ * @license MPL2.0 : This code inspired by the split view feature in the Zen Browser Thanks to the Zen Browser team!
+ * @see https://github.com/zen-browser/desktop/raw/main/src/browser/base/content/ZenViewSplitter.mjs
+ */
+#split-views-button {
+  list-style-image: url("chrome://floorp/skin/designs/lepton/calendar-agenda.svg");
+}
+
+#splitViewModifierViewDefault {
+  min-width: 180px;
+  min-height: 180px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 10px;
+  padding: 15px;
+}
+
+#splitViewModifierViewDefault > vbox {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  cursor: pointer;
+}
+
+#splitViewModifierViewDefault .split-view-modifier-preview {
+  border-radius: 5px;
+  width: 100px;
+  height: 70px;
+  overflow: hidden;
+  padding: 5px;
+  user-select: none;
+  font-weight: 500;
+}
+
+#splitViewModifierViewDefault p {
+  margin-top: 5px;
+  margin-bottom: 0;
+}
+
+#splitViewModifierViewDefault .split-view-modifier-preview box {
+  border-radius: 3px;
+  width: 100%;
+  height: 100%;
+}
+
+#splitViewModifierViewDefault .split-view-modifier-preview.hsep {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+#splitViewModifierViewDefault .split-view-modifier-preview.hsep box:last-child {
+  margin-top: 5px;
+}
+
+#splitViewModifierViewDefault .split-view-modifier-preview.vsep box:last-child {
+  margin-left: 5px;
+}
+
+#splitViewModifierViewDefault .split-view-modifier-preview.grid {
+  display: grid;
+  grid-template-areas: "a b" "c b";
+  gap: 5px;
+}
+
+#splitViewModifierViewDefault .split-view-modifier-preview.grid box:nth-child(1) {
+  grid-area: a;
+}
+
+#splitViewModifierViewDefault .split-view-modifier-preview.grid box:nth-child(2) {
+  grid-area: b;
+}
+
+#splitViewModifierViewDefault .split-view-modifier-preview.grid box:nth-child(3) {
+  grid-area: c;
+}
+
+.split-view-modifier-preview {
+  border: solid 1px var(--toolbar-color);
+}
+
+.splitViewSelectItems {
+  border: solid 1px var(--toolbar-color);
+}
diff --git a/browser/base/content/browser-splitView.mjs b/browser/base/content/browser-splitView.mjs
@@ -3,13 +3,13 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /**
- * @class gSplitViewClass
- * @description The gSplitViewClass class is responsible for handling the split view functionality.
+ * @class SplitView
+ * @description The SplitView class is responsible for handling the split view functionality.
  * @license MPL2.0 : This code inspired by the split view feature in the Zen Browser Thanks to the Zen Browser team!
  * @see https://github.com/zen-browser/desktop/raw/main/src/browser/base/content/ZenViewSplitter.mjs
  * TODO: Send Pull Request to Zen Browser Team.
  */
-export class gSplitViewClass {
+export class SplitView {
   constructor() {
     this._data = [];
     this.currentView = -1;
@@ -20,12 +20,13 @@ export class gSplitViewClass {
     Services.prefs.setBoolPref("floorp.browser.splitView.working", false);
     window.addEventListener("TabClose", this.handleTabClose.bind(this));
     this.initializeContextMenu();
+    this.insertPageActionButton();
+    this.insertPopupPanel();
   }
 
   /**
-   * @param {Event} event
-   * Constructs a new instance of the gSplitViewClass.
-   * @class
+   * @param {Event} event - The event that triggered the tab close.
+   * @description Handles the tab close event.7
    */
   handleTabClose(event) {
     const tab = event.target;
@@ -132,7 +133,7 @@ export class gSplitViewClass {
   insertSplitLinkIntoContextMenu() {
     const element = window.MozXULElement.parseXULToFragment(`
       <menuitem id="context-split-with-newtab" data-l10n-id="floorp-split-view-open-menu"
-                oncommand="gSplitViewClass.splitLinkInNewTab();" hidden="true"/>
+                oncommand="gSplitView.splitLinkInNewTab();" hidden="true"/>
       <menuseparator id="context-stripOnShareLink"/>
     `);
     document.getElementById("context-stripOnShareLink").after(element);
@@ -178,6 +179,62 @@ export class gSplitViewClass {
     document.getElementById("page-action-buttons").appendChild(element);
   }
 
+  /**
+   * Insert popup panel to popupsets
+   */
+  insertPopupPanel() {
+    const element = window.MozXULElement.parseXULToFragment(`
+      <html:template id="template-split-view-modifier">
+        <panel id="splitViewModifier"
+               class="panel-no-padding"
+               orient="vertical"
+               role="alertdialog"
+               type="arrow"
+               aria-labelledby="split-view-modifier-header"
+               tabspecific="true">
+          <panelmultiview id="splitViewModifierMultiview"
+                          mainViewId="splitViewModifierViewDefault">
+            <panelview id="splitViewModifierViewDefault"
+                       class="PanelUI-subView"
+                       role="document"
+                       mainview-with-header="true"
+                       has-custom-header="true">
+              <vbox>
+                <box class="split-view-modifier-preview grid">
+                  <box class="splitViewSelectItems"/>
+                  <box class="splitViewSelectItems"/>
+                  <box class="splitViewSelectItems"/>
+                </box>
+                <p data-l10n-id="floorp-split-view-grid"></p>
+              </vbox>
+              <vbox>
+                <box class="split-view-modifier-preview hsep">
+                  <box class="splitViewSelectItems"/>
+                  <box class="splitViewSelectItems"/>
+                </box>
+                <p data-l10n-id="floorp-split-view-horizontal"></p>
+              </vbox>
+              <vbox>
+                <box class="split-view-modifier-preview vsep">
+                  <box class="splitViewSelectItems"/>
+                  <box class="splitViewSelectItems"/>
+                </box>
+                <p data-l10n-id="floorp-split-view-vertical"></p>
+              </vbox>
+              <vbox>
+                <box class="split-view-modifier-preview unsplit">
+                  <box class="splitViewSelectItems"/>
+                </box>
+                <p data-l10n-id="floorp-split-view-unsplit"></p>
+              </vbox>
+            </panelview>
+          </panelmultiview>
+        </panel>
+      </html:template>
+    `);
+    document.getElementById("mainPopupSet").appendChild(element);
+  }
+
   /**
    * Gets the tab browser panel.
    *

diff --git a/browser/base/content/floorp-scripts.inc b/browser/base/content/floorp-scripts.inc
@@ -30,8 +30,8 @@ document.addEventListener(
   "DOMContentLoaded",
   () => {
     import("chrome://floorp/content/browser-splitView.mjs").then(
-      ({ gSplitViewClass }) => {
-        window.gSplitView = new gSplitViewClass();
+      ({ SplitView }) => {
+        window.gSplitView = new SplitView();
       }
     );
 

diff --git a/browser/locales/l10n-central b/browser/locales/l10n-central