Workspace: Fully take care of workarea geometry to allocate the views

Both the WorkspaceBackground and the ControlsManagerLayout are doing allocation without (fully) taking care of the workarea size, and this may lead to some visual issues (such as #4330 (closed) and background being shifted from its shadow):

This is a simple example using some fake struts such as:

diff --git a/js/ui/layout.js b/js/ui/layout.js
index 70ece6cab8..36590b114c 100644
--- a/js/ui/layout.js
+++ b/js/ui/layout.js
@@ -292,6 +292,36 @@ var LayoutManager = GObject.registerClass({
         monitorManager.connect('monitors-changed',
                                this._monitorsChanged.bind(this));
         this._monitorsChanged();
+
+        const left = new Clutter.Actor();
+        this.addChrome(left, { affectsStruts: true });
+        const right = new Clutter.Actor();
+        this.addChrome(right, { affectsStruts: true });
+        const bottom = new Clutter.Actor();
+        this.addChrome(bottom, { affectsStruts: true });
+
+        const updateStruts = () => {
+            let thickness = 60;
+            left.set_background_color(Clutter.Color.from_pixel(0xff000050));
+            left.set_size(thickness, this.primaryMonitor.height - this.panelBox.height);
+            left.set_x(this.primaryMonitor.x);
+            left.set_y(this.primaryMonitor.y + this.panelBox.height);
+
+            thickness = 100;
+            right.set_background_color(Clutter.Color.from_pixel(0x00ff0050));
+            right.set_size(thickness, this.primaryMonitor.height - this.panelBox.height);
+            right.set_x(this.primaryMonitor.x + this.primaryMonitor.width - thickness);
+            right.set_y(this.primaryMonitor.y + this.panelBox.height);
+
+            thickness = 80;
+            bottom.set_background_color(Clutter.Color.from_pixel(0x0000ff50));
+            bottom.set_size(this.primaryMonitor.width - left.width - right.width, thickness);
+            bottom.set_x(this.primaryMonitor.x + left.width);
+            bottom.set_y(this.primaryMonitor.y + this.primaryMonitor.height - thickness);
+        };
+        updateStruts();
+        this.connect('monitors-changed', () => updateStruts());
+        this.panelBox.connect('notify::size', () => updateStruts());
     }
 
     // This is called by Main after everything else is constructed

Screencast_2021-06-18_16_14_48.fixed

---

So, adapt the code to use both the workarea offsets and size.

This change will also help extensions such as DashToDock, dash-to-panel and Window List to behave as expected.

After it will be such as:

Screencast_2021-06-18_18_39_50.fixed