Log pane improvements (#3418)

* Ordering of log entries in the new errors UI

* Don't show the expand-collapse widget when not needed; smaller font size in the raw log output

* Expose log actions in the log pane.

* Use "This project" instead of "Your project" in the new errors UI

* Better handling of long log messages; left-ellipsize the file/line number button

* Make log location more button-like; add tooltip when needed.

* Add a PDF expand button to the toolbar.

* Add a stop compilation button to the new compile UI

* Use aria-label for button accessible text; improve handling of long filenames in the log location button

* Set max-height correctly for the logs pane dropdown

* Avoid changing raw logs sizing when expanded and collapsed

* Add comment on the solution for right-to-left text and ellipsis

* Improve logs pane actions

GitOrigin-RevId: 4098d77a9ee6d333644906876b9ff27035b79319

services/web/test/frontend/shared/hooks/use-expand-collapse.test.js

@@ -14,6 +14,15 @@ const sampleContent = (
   </div>
 )
 
+const originalScrollHeight = Object.getOwnPropertyDescriptor(
+  HTMLElement.prototype,
+  'offsetHeight'
+)
+const originalScrollWidth = Object.getOwnPropertyDescriptor(
+  HTMLElement.prototype,
+  'offsetWidth'
+)
+
 function ExpandCollapseTestUI({ expandCollapseArgs }) {
   const { expandableProps } = useExpandCollapse(expandCollapseArgs)
   return (
@@ -27,6 +36,33 @@ ExpandCollapseTestUI.propTypes = {
 }
 
 describe('useExpandCollapse', function() {
+  // JSDom doesn't compute layout/sizing, so we need to simulate sizing for the elements
+  // Here we are simulating that the content is bigger than the `collapsedSize`, so
+  // the expand-collapse widget is used
+  beforeEach(function() {
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+      configurable: true,
+      value: 500
+    })
+    Object.defineProperty(HTMLElement.prototype, 'scrollWidth', {
+      configurable: true,
+      value: 500
+    })
+  })
+
+  afterEach(function() {
+    Object.defineProperty(
+      HTMLElement.prototype,
+      'scrollHeight',
+      originalScrollHeight
+    )
+    Object.defineProperty(
+      HTMLElement.prototype,
+      'scrollWidth',
+      originalScrollWidth
+    )
+  })
+
   describe('custom CSS classes', function() {
     it('supports a custom CSS class', function() {
       const testArgs = {