A few ui adjustments

modules/breakpoints/source_breakpoints.py

@@ -146,7 +146,7 @@ def render(self):
 			p = self.view.text_point(line - 1, column - 1)
 			self.column_phantom = ui.Phantom(self.view, sublime.Region(p, p))[
 				ui.click(self.on_click_inline)[
-					ui.icon(image)
+					ui.icon(image, height=2, width=2, padding=0)
 				]
 			]
 

modules/ui/align.py

@@ -4,6 +4,7 @@
 from . html import span, click, alignable
 from . layout import Layout
 
+# spacers are integers so they can always undershoot the available space
 
 class spacer (span):
 	def __init__(self, width: int|None = None, min: int|None = None):

modules/ui/html.py

@@ -2,7 +2,7 @@
 from ..typecheck import *
 
 from .image import Image
-from .style import css, div_inline_css, icon_css, none_css
+from .style import css, none_css
 
 import re
 
@@ -150,31 +150,12 @@ def html(self, layout: Layout) -> str:
 
 		h = layout.to_rem(self.height(layout) - self.padding_height)
 		w = layout.to_rem(self.width(layout) - self.padding_width)
-		one = layout.to_rem(1)
-
 		if children_inline:
 			# this makes it so that divs with an img in them and divs without an img in them all align the same
-			return f'<d id="{self.css_id}" style="height:{h}rem;width:{w}rem;line-height:{h}rem;padding:{-one}rem 0 {one}rem 0"><img>{html}</d>'
+			return f'<d id="{self.css_id}" style="height:{h}rem;width:{w}rem;line-height: {h}rem; padding: -{h/2}rem 0 {h/2}rem 0"><img style="height: {h}rem">{html}</d>'
 		else:
 			return f'<d id="{self.css_id}" style="height:{h}rem;width:{w}rem;">{html}</d>'
 
-# uses an img tag to force the width of the phantom to be the width of the item being rendered
-class phantom_sizer (div):
-	def __init__(self, item: Union[div, span]) -> None:
-		super().__init__()
-		self.item = item
-
-	def render(self) -> div.Children:
-		return self.item
-
-
-html_escape_table = {
-	"&": "&amp;",
-	">": "&gt;",
-	"<": "&lt;",
-	" ": "\u00A0" # HACK spaces inside <a> tags are not clickable. We replaces spaces with no break spaces
-}
-
 
 def html_escape(text: str) -> str:
 	return text.replace(" ", "\u00A0").replace('&', '&amp;').replace(">", "&gt;").replace("<", "&lt;").replace("\n", "\u00A0")
@@ -224,14 +205,17 @@ def html(self, layout: Layout) -> str:
 
 
 class icon (span):
-	def __init__(self, image: Image) -> None:
-		super().__init__(width=3, height=1, css=icon_css)
+	def __init__(self, image: Image, width: float = 3, height: float = 3, padding: float = 0.5) -> None:
+		super().__init__(width=width, height=height)
+		self.padding = padding
 		self.image = image
 
 	def html(self, layout: Layout) -> str:
-		width = layout.to_rem(2.5)
-		required_padding = layout.to_rem(0.5)
-		return f'<s id="{self.css_id}" style="padding-right:{required_padding:.2f}rem;"><img style="width:{width:.2f}rem;height:{width:.2f}rem;" src="{self.image.data(layout)}"></s>'
+		assert self._height
+		width = layout.to_rem(self._height - self.padding)
+		required_padding = layout.to_rem(self.padding)
+		top = layout.to_rem(0.75)
+		return f'<s id="{self.css_id}" style="position: relative; top: {top}rem; line-height:0; padding-right:{required_padding:.2f}rem;"><img style="width:{width:.2f}rem;height:{width:.2f}rem;" src="{self.image.data(layout)}"></s>'
 
 tokenize_re = re.compile(
 	r'(0x[0-9A-Fa-f]+)' #matches hex

modules/ui/layout.py

@@ -4,7 +4,7 @@
 
 from ..import core
 from .style import css
-from .html import phantom_sizer, div, span, element
+from .html import div, span, element
 from .debug import DEBUG_TIMING, DEBUG_TIMING_STATUS
 
 import sublime
@@ -82,7 +82,7 @@ def __init__(self, item: Union[div, span], view: sublime.View) -> None:
 		self.on_click_handlers_id = 0
 		self.requires_render = True
 		self.html = ""
-		self.item = phantom_sizer(div()[item])
+		self.item = div()[item]
 		self.add_component(self.item)
 		self.dirty()
 		self.view = view
@@ -99,11 +99,7 @@ def dispose(self) -> None:
 		Layout.layouts_to_remove.append(self)
 
 	def __getitem__(self, values: div.Children):
-		if isinstance(values, element):
-			self.item = phantom_sizer(div()[values])
-		else:
-			self.item = phantom_sizer(div()[values])
-
+		self.item = div()[values]
 		self.add_component(self.item)
 		self.dirty()
 		return self
@@ -112,18 +108,6 @@ def dirty(self) -> None:
 		self.requires_render = True
 		Layout._schedule_render_layouts()
 
-	def remove_component_children(self, item: element) -> None:
-		for child in item.children:
-			assert child.layout
-			child.layout.remove_component(child)
-
-		item.children = []
-
-	def remove_component(self, item: element) -> None:
-		self.remove_component_children(item)
-		item.removed()
-		item.layout = None
-
 	def add_component_children(self, item: element) -> None:
 		if item._width is not None:
 			_parent_width = item._width
@@ -139,6 +123,19 @@ def add_component(self, item: element) -> None:
 		item.layout = self
 		item.added(self)
 
+	def remove_component(self, item: element) -> None:
+		self.remove_component_children(item)
+		item.removed()
+		item.layout = None
+
+	def remove_component_children(self, item: element) -> None:
+		for child in item.children:
+			assert child.layout
+			child.layout.remove_component(child)
+
+		item.children = []
+
+
 	def render_component_tree(self, item: element|None) -> None:
 		if item is None:
 			return

modules/ui/style.py

@@ -30,9 +30,6 @@
 a {
 	text-decoration: none;
 }
-img {
-	height: 1.6rem;
-}
 d {
 	display: block;
 }
@@ -150,11 +147,6 @@ def __init__(
 
 
 
-div_inline_css = css(
-	padding_top=-1.0,
-	padding_bottom=1.0
-)
-
 none_css = css()
 
 icon_css = css(raw='''

modules/views/callstack.py

@@ -53,24 +53,19 @@ def selected_session(self, session: dap.Session):
 
 	def render(self) -> ui.div.Children:
 		thread_views: list[SessionView] = []
-		show_session_name = len(self.debugger.sessions) > 1
 
 		if not self.debugger.sessions:
-			return ui.div(height=css.row_height)[
-				ui.spacer(1),
-				ui.text('No Active Debug Sessions', css=css.label_secondary)
+			return [
+				ui.div(height=css.row_height)[
+					ui.spacer(1),
+					ui.text('No Active Debug Sessions', css=css.label_secondary)
+				],
 			]
 
 		for session in self.debugger.sessions:
 			# skip sessions that are children of another session since those will be renderer in the parent session
 			if session.parent: continue
 
-
-			# for thread in threads:
-			# 	is_selected = session == self.sessions.selected_session and session.selected_thread == thread
-			# 	if is_selected:
-			# 		self.state.set_expanded(thread, True)
-
 			thread_views.append(SessionView(self.debugger, session, self.state))
 
 		return thread_views
@@ -93,7 +88,6 @@ def __init__(self, debugger: Debugger, session: dap.Session, state: CallStackSta
 		self.session = session
 		self.state = state
 		self.is_selected = session == debugger.session
-		self.show_session_name = True
 
 	def selected_session(self):
 		self.debugger.active = self.session
@@ -105,15 +99,16 @@ def render(self) -> ui.div.Children:
 		thread_views: list[SessionView|ThreadView] = []
 		label_view: ui.div | None = None
 
+		is_session_active = self.session == self.debugger.session
 
 		if True:
-			if session == self.debugger.session:
+			if is_session_active:
 				session_css_label = css.label
 			else:
 				session_css_label = css.label_secondary
 
 			session_label = ui.click(lambda session=session: self.selected_session()) [
-				ui.text(session.name, css=session_css_label)
+				ui.text(session.name, css=session_css_label),
 			]
 
 			def on_toggle(session: dap.Session):
@@ -129,14 +124,13 @@ def on_toggle(session: dap.Session):
 		for session in self.session.children:
 			thread_views.append(SessionView(self.debugger, session, self.state))
 
-		show_thread_name = len(threads) > 1
 
 		for thread in threads:
 			is_selected = self.is_selected and session.selected_thread == thread
 			if is_selected:
 				self.state.set_expanded(thread, True)
 
-			thread_views.append(ThreadView(session, thread, is_selected, self.state, show_thread_name))
+			thread_views.append(ThreadView(session, thread, is_selected, self.state))
 
 		return [
 			label_view,
@@ -146,14 +140,14 @@ def on_toggle(session: dap.Session):
 		]
 
 class ThreadView (ui.div):
-	def __init__(self, session: dap.Session, thread: dap.Thread, is_selected: bool, state: CallStackState, show_thread_name: bool):
+	def __init__(self, session: dap.Session, thread: dap.Thread, is_selected: bool, state: CallStackState):
 		super().__init__()
 		self.session = session
-		self.is_selected = is_selected
-		self.show_thread_name = show_thread_name
+		self.is_selected = session.selected_thread == thread
+		self.show_thread_name = len(session.threads) > 1
 		self.thread = thread
 		self.state = state
-		self.frames = [] #type: list[dap.StackFrame]
+		self.frames: list[dap.StackFrame] = []
 		self.fetch()
 
 	@property
@@ -186,14 +180,20 @@ def render(self) -> ui.div.Children:
 		expandable = self.thread.has_children()
 		is_expanded = self.is_expanded
 
+		is_thread_active = self.session.selected_thread == self.thread
+		if is_thread_active:
+			thread_css = css.label
+		else:
+			thread_css = css.label_secondary
+
 		if expandable:
 			thread_item = ui.div(height=css.row_height)[
 				ui.align()[
 					ui.click(self.toggle_expand)[
 						ui.icon(ui.Images.shared.open if is_expanded else ui.Images.shared.close),
 					],
 					ui.click(self.on_select_thread)[
-						ui.text(self.thread.name, css=css.label),
+						ui.text(self.thread.name, css=thread_css),
 						ui.spacer(1),
 						ui.text(self.thread.stopped_reason, css=css.label_secondary),
 					],
@@ -228,7 +228,7 @@ def render(self) -> ui.div.Children:
 
 class StackFrameComponent (ui.div):
 	def __init__(self, session: dap.Session, frame: dap.StackFrame, is_selected: bool, on_click: Callable[[], None], show_thread_name: bool) -> None:
-		super().__init__()
+		super().__init__(height=css.row_height)
 		self.frame = frame
 		self.on_click = on_click
 		self.show_thread_name = show_thread_name
@@ -266,7 +266,5 @@ def render(self) -> ui.div.Children:
 		]
 
 		return [
-			ui.div(height=css.row_height)[
-				file_and_line,
-			]
+			file_and_line
 		]

modules/views/selected_line.py

@@ -27,7 +27,7 @@ def __init__(self, text: str) -> None:
 
 	def render(self) -> ui.div.Children:
 		return [
-			ui.div(height=2.8)[
+			ui.div(height=2.6)[
 				ui.text(self.text, css=css.selected_text),
 			],
 		]

modules/views/tabbed_panel.py

@@ -74,8 +74,9 @@ def remove(self, panel: Any):
 	def select(self, panel: Any):
 		for index, item in enumerate(self.items):
 			if item == panel:
-				self.selected_index = index
-				self.dirty()
+				if self.selected_index != index:
+					self.selected_index = index
+					self.dirty()
 				return
 
 	def patch_selected(self):