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/frontend/js/shared/hooks/use-expand-collapse.js

@@ -9,19 +9,30 @@ function useExpandCollapse({
 } = {}) {
   const ref = useRef()
   const [isExpanded, setIsExpanded] = useState(initiallyExpanded)
-  const [size, setSize] = useState()
+  const [sizing, setSizing] = useState({
+    size: null,
+    needsExpandCollapse: null
+  })
 
   useLayoutEffect(
     () => {
       const expandCollapseEl = ref.current
-      if (isExpanded) {
+      if (expandCollapseEl) {
         const expandedSize =
           dimension === 'height'
             ? expandCollapseEl.scrollHeight
             : expandCollapseEl.scrollWidth
-        setSize(expandedSize)
-      } else {
-        setSize(collapsedSize)
+
+        const needsExpandCollapse = expandedSize > collapsedSize
+
+        if (isExpanded) {
+          setSizing({ size: expandedSize, needsExpandCollapse })
+        } else {
+          setSizing({
+            size: needsExpandCollapse ? collapsedSize : expandedSize,
+            needsExpandCollapse
+          })
+        }
       }
     },
     [isExpanded]
@@ -39,10 +50,11 @@ function useExpandCollapse({
 
   return {
     isExpanded,
+    needsExpandCollapse: sizing.needsExpandCollapse,
     expandableProps: {
       ref,
       style: {
-        [dimension === 'height' ? 'height' : 'width']: `${size}px`
+        [dimension === 'height' ? 'height' : 'width']: `${sizing.size}px`
       },
       className: expandableClasses
     },

services/web/frontend/js/shared/hooks/use-resize-observer.js

@@ -17,7 +17,6 @@ function useResizeObserver(observedElement, observedData, callback) {
     () => {
       if ('ResizeObserver' in window) {
         const observedCurrent = observedElement && observedElement.current
-
         if (observedCurrent) {
           observe(observedElement.current)
         }
@@ -27,7 +26,9 @@ function useResizeObserver(observedElement, observedData, callback) {
         }
 
         return () => {
-          unobserve(observedCurrent)
+          if (observedCurrent) {
+            unobserve(observedCurrent)
+          }
         }
       }
     },